javascript - 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 对象。我可以使用程序方法来做到这一点，但我不想这样做。我现在不想使用任何库，我只是在学习。

我有这些问题:

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

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

• 每个工具都将具有相同的界面但具有不同的行为。我可以使用 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)中的源代码。如果你想认真地学习更多，你应该看看真正优秀的开发人员编写的代码，看看他们是如何完成你刚刚提出的问题的。据我所知，除了不断阅读之外，这是通过良好实践学习编程语言的最佳方式之一。