OOJavaScript-事件

我正在尝试使用面向对象的方法学习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();
}());

我正试着做一些类似于绘画的事情。所以，我创建了一个画布对象和一个铅笔对象。我可以用程序的方法来做，但我不想。我现在不想使用任何图书馆，我只是在学习

我有以下问题：

• 是否有注册活动的良好实践？我应该使用对象构造函数注册事件吗

• 我的画布对象有一个工具（本例中为铅笔）对象。从概念上讲，这并不好。我的画布不应该有工具对象。它必须提供一个曲面来绘制，就是这样！但是，它作为回调（单击事件）存在。我怎样才能解决这个问题

• 每个工具都有相同的界面，但行为不同。我可以使用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变量。你觉得怎么样？谢谢

---

谢谢。

我知道您说过不想使用库，但我建议您在一个好的开源库（如jquery）中查找源代码。如果你想认真学习更多，你应该看看真正优秀的开发人员编写的代码，看看他们是如何按照你刚才的要求完成的。据我所知，除了保持阅读，这是通过良好实践学习编程语言的最佳方法之一。

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

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

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

• 至于改进，您肯定会发现自己在与
  不同浏览器的行为。这就是为什么（嗯，这还不是全部）
  框架存在。如我所见，您喜欢OO风格的开发，我
  可以给你一个建议，让你尝试MooTools，或者更难的是，谷歌
  关闭框架。请在这里自由提问

---

（1）要绑定事件，请使用

addEventListener

。“使用对象构造函数注册事件”是什么意思？（2） 只需将

Pencil

实例定义为一个独立的对象，而不是

Canvas

实例的属性。（3） 这是个好问题。接口不是JavaScript的一部分，但可能有一种方法可以模拟它们……对不起，我的意思是：“我应该在哪里绑定事件？”。谢谢，你做得对。在

Canvas

构造函数中，创建一个新的Canvas对象，然后将单击处理程序绑定到该对象。没关系。但是，请考虑使用<代码> CANVATCRATION 处理器，而不是直接绑定到<代码>铅笔。在

canvasClicked

处理程序中，您可以确定用户做了什么（如果有多种可能性），然后调用不同的函数…顺便问一下，您的页面上存在多少Canvas实例？如果只有一个，那么实际上并不需要构造函数，您可以定义一个表示Canvas元素的对象（singleton）。我将阅读关于JS singleton的文章。你推荐什么链接吗？关于JS有太多的旧信息和错误信息。谢谢。jQuery可能不是学习Javascript的好选择。我正在听。有什么原因吗？也许我对这句话太过肯定了，我只是认为MooTools会是一个更好的例子，因为它们在更大程度上关注OOP。关于框架，我同意并使用它们。他们解决了很多问题。但这不是问题所在。我现在不担心跨浏览器。谢谢。我的铅笔怎么能听呢？听起来很棒！谢谢。我真的不知道如何在纯js中实现它，但我知道如何在google Close中实现它，所以它必须是一种在没有框架的情况下实现的方法。@thom它不必这样做。您的

canvasClicked

处理程序显式调用

pencil.draw

方法-这就是我将如何实现它的方法。“我的画布有一个工具”。西姆·维达斯，你也觉得奇怪吗？我觉得很奇怪。谢谢