如何扩展本机mootools方法

Posted 2021-05-03

是否有可能在mootools中扩展addEvent函数以执行某些操作，并且还调用普通的addEvent方法？或者，如果有人有更好的方法来做我需要的事情，我就已经多年了。

我有不同的“点击”处理程序，具体取决于我在网站上的页面。此外，每一页上可能有多个。我想让页面上的每次点击都执行一段代码，除了执行点击侦听器将要做的任何事情。在每个处理程序上添加这两行，至少可以说是PITA，因此我考虑了覆盖addEvent，每次我添加“ click”监听器时，它都会创建一个执行代码的新函数，并且然后调用该函数。

知道我该怎么做吗？

答案

虽然这并非不可能，但这是一个有问题的做法-更改mootools内部api。除非您精通mootools并遵循github上的dev指导并且知道您的更改不会破坏未来的兼容性，否则我建议您反对。

我的看法，您有两条路线：

1. 通过implement创建一个新的Element方法，该方法可以执行您的逻辑。例如：Element.addMyEvent执行您的操作，然后调用普通的element.addEvent。这是可取的，并且没有实际的不良影响（请参见上文）

2. 直接更改原型。意味着您无需重构任何代码，它就可以正常工作。这可能意味着其他使用您的代码的人将很难遵循它，也难以进行跟踪/故障排除-想想，知道mootools和标准addEvent行为的人甚至不会想到检查原型是否遇到问题。

3. mootools 2.0即将发布，如果mootools放弃了Element.prototype修改而希望使用包装器（与其他框架兼容），则可能会使上面的方法2无效。返回方法1：）

我认为解决方案1更好而且很明显。

至于2：http://jsfiddle.net/dimitar/aTukP/

(function() {
    // setup a proxy via the Element prototype.
    var oldProto = Element.prototype.addEvent;

    // you really need [Element, Document, Window] but this is fine.
    Element.prototype.addEvent = function(type, fn, internal){
        console.log("added " + type, this); // add new logic here. 'this' == element.
        oldProto.apply(this, arguments);
    };

})();

document.id("foo").addEvent("click", function(e) {
    e.stop();
    console.log("clicked");
    console.log(e);
});

就这么简单。注意Element.events也应转到文档和窗口。同样，这不会更改Events类mixin，因为您需要重构Events.addEvent。