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风格的开发，我可以给你一个建议来试试MooTools，或者更难的一个，谷歌关闭框架。请随时在这里提出有关他们的问题。

OO Javascript - 活动

2 个答案: