OO Javascript - 事件

Question

我正在尝试使用 OO 方法学习 JavaScript。这是我的代码：

/*global document, MouseEvent */
MouseEvent.prototype.mouseCoordinates = function () {
    return {
        'x' : this.pageX - this.target.offsetLeft,
        'y' : this.pageY - this.target.offsetTop
    };
};

(function () {
    var Pencil = function () {},
        Canvas = function () {
            this.element = document.getElementById('canvas');
            this.tool = new Pencil();

            this.element.addEventListener('click', this.tool.draw, false);
        },
        c;

    Pencil.prototype.draw = function (event) {
        var context = event.target.getContext('2d'),
            coordinates = event.mouseCoordinates();

        context.fillRect(coordinates.x, coordinates.y, 5, 5);
    };

    c = new Canvas();
}());

我正在尝试做一些类似 MS Paint 的事情。所以，我创建了一个 Canvas 对象和一个 Pencil 对象。我可以使用程序方法来做到这一点，但我不想这样做。我现在不想使用任何图书馆，我只是在学习。

我有这些问题：

• 注册事件有什么好的做法吗？我应该使用对象构造函数注册事件吗？

• 我的画布对象有一个工具（在本例中为铅笔）对象。从概念上讲，它并不好。我的画布不应该有工具对象。它必须提供一个可以绘制的表面，仅此而已！但是，它作为回调（点击事件）存在。我该如何解决这个问题？

• 每个工具都有相同的界面，但行为不同。我可以使用 Javascript 创建接口吗？

• 我还能改进什么？

更新：

(function () {
    var pencil = {
        draw : function (event) {
            var context = event.target.getContext('2d'),
                coordinates = event.mouseCoordinates();

                context.fillRect(coordinates.x, coordinates.y, 5, 5);
        }
    },
        currentTool = pencil,
        canvas = (function () {
            var object = {};
            object.element = document.getElementById('canvas');

            object.element.addEventListener('click', function (event) {
                currentTool.draw(event);
            }, false);

            return object;
        }());
}());

我已遵循所有提示（谢谢，感谢您的帮助！）。你怎么看？现在我有一个“全局” currentTool 变量。你怎么看待这件事？谢谢。

谢谢。

Answer 1

我知道您说过您不想使用库，但我必须建议您在一个好的开源库（例如 jquery）中查看源代码。如果您想认真了解更多信息，您应该查看真正优秀的开发人员编写的代码，看看他们是如何完成您刚刚提出的要求的。据我所知，除了继续阅读之外，这是通过良好实践学习编程语言的最佳方式之一。

Answer 2

• 在没有任何框架的情况下注册事件有点棘手（捕获 或冒泡阶段只是问题的开始），所以在这里 是其他问题的答案

• 您的铅笔工具可以监听画布事件，最终，
  当有人点击它时，铅笔工具会在
  全局对象（单例），如果它是一个活动工具。如果是，你
  改变画布上一些适当像素的颜色。

• javascript 中没有接口（如 php），只有原型
  行为。但是，您可以编写一个抽象类，其中方法
  （在原型命名空间中）将抛出“未实现”异常，
  强迫你覆盖它们。

• 至于改进，你肯定会发现自己正在与之抗争
  不同浏览器的行为。这就是为什么（嗯，这还不是全部）
  存在框架。如我所见，您喜欢 OO 风格的developpent，我
  可以给你一个建议来尝试 MooTools，或者更难的，谷歌
  封闭框架。随时在这里询问有关它们的问题。