如何扩展本机mootools方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何扩展本机mootools方法相关的知识,希望对你有一定的参考价值。

是否有可能在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

以上是关于如何扩展本机mootools方法的主要内容,如果未能解决你的问题,请参考以下文章

MooTools中文介绍

MooTools中文介绍

MooTools替代Prototype

mootools常用特性和示例(基础篇1)

如何使用 Mootools 操作表单

我如何使用本机 swift 代码中的 react 本机 RCNAsyncStorage 模块