MooTools的隐藏功能

art*_*ung 9 javascript mootools

每个MooTools开发人员都应该注意MooTools隐藏或模糊的功能是什么?

请回答每个答案的一个功能.

Dim*_*off 9

类突变者

MooTools有一个很棒的功能,可以让你创建自己的Class mutators.例如,要为引用的特定类方法添加记录器,您可以执行以下操作:

// define the mutator as 'Monitor', use as Mointor: ['methodname', 'method2'...]
Class.Mutators.Monitor = function(methods){
    if (!this.prototype.initialize) this.implement('initialize', function(){});
    return Array.from(methods).concat(this.prototype.Monitor || []);
};

Class.Mutators.initialize = function(initialize){
    return function(){
        Array.from(this.Monitor).each(function(name){
           var original = this[name];
           if (original) this[name] = function() {
               console.log("[LOG] " + name, "[SCOPE]:", this, "[ARGS]", arguments);
               original.apply(this, arguments);
           }
        }, this);
        return initialize.apply(this, arguments);
    };
};
Run Code Online (Sandbox Code Playgroud)

然后在课堂上:

var foo = new Class({

    Monitor: 'bar',

    initialize: function() {
        this.bar("mootools");
    },

    bar: function(what) {
        alert(what);
    }

});

var f = new foo();
f.bar.call({hi:"there from a custom scope"}, "scope 2");
Run Code Online (Sandbox Code Playgroud)

试试jsfiddle:http://jsfiddle.net/BMsZ7/2/

这个小宝石对我在HUUUGE异步webapp中捕获嵌套的bugfoot竞争条件问题起了重要作用,否则这些问题很难被追踪.


ari*_*ian 6

Function.prototype.protect 可能是一个鲜为人知的好人.

用于在类中具有受保护的方法:

var Foo = new Class({

    fooify: function(){
        console.log('can\'t touch me');
    }.protect(),

    barify: function(){
        this.fooify();
    }

});

 var foo = new Foo();
 foo.fooify(); // throws error
 foo.barify(); // logs "can't touch me"
Run Code Online (Sandbox Code Playgroud)

我个人经常不经常使用它,但在某些情况下它可能有用.


ari*_*ian 5

Function.prototype.overloadGetterFunction.prototype.overloadSetter

看到这篇文章:MooTools的Function.prototype.overloadSetter()有什么作用?


Dim*_*off 4

如果你阅读源代码,可以使用很多功能,尽管官方的说法是:if it's not in the documentation, it is not in the api and it's not supported so do not base your code around it as it may change

话虽这么说,有一些东西确实非常有用。我最喜欢的未记录功能之一是:

引用的元素有一个 uid

任何已创建或通过选择器传递的元素都会被分配一个属性uid,该属性是增量且唯一的。从 MooTools 1.4.2 开始,只能通过Slick.uidOf(node)旧元素 attr 读取,而不能通过旧元素 attr读取.uiduniqueNumber您现在可以使用任何 MooTools Element 对象的新属性。

它是如何被使用的?首先,元素存储。它依赖于 uid 作为Storage闭包内对象的键,该闭包将包含您.store为该元素设置的任何内容。

element.store('foo', 'bar');
Run Code Online (Sandbox Code Playgroud)

翻译为:

Storage[Slick.uidOf(element)].foo = 'bar';
Run Code Online (Sandbox Code Playgroud)

element.retrieve('foo'); // getter of the storage key
element.eliminate('foo'); // delete Storage[Slick.uidOf(element)].foo
Run Code Online (Sandbox Code Playgroud)

初始化您在外部创建的元素的存储,例如通过var foo = document.createElement('div')而不是元素构造函数

Slick.uidOf(foo); // makes it compatible with Storage

// same as:
document.id(foo);
Run Code Online (Sandbox Code Playgroud)

框架存储到存储中的事物还包括所有events回调、validators实例、Fx实例(补间、变形等)等。

知道元素的 UID 可以做什么?嗯,克隆元素不会获取元素的存储或事件。您实际上可以编写一个新的Element.cloneWithStorage原型,该原型还将复制您可能拥有的所有存储值,这在某种程度上很有用 - 引用特定元素(例如,Fx.Tween)的实例将继续引用旧元素,因此可能会出现意外的情况结果。这对于移动您自己的存储很有用,但是您所需要的只是一个类似的方法来记录您所存储的内容并允许您克隆它。

另一个元素数据的存储穿刺示例:

var foo = new Element('div'),
    uid = foo.uniqueNumber;

foo.store('foo', 'foo only');

var bar = new Element('div');

console.log(bar.retrieve('foo')); // null

bar.uniqueNumber = uid; // force overwrite of uid to the other el

console.log(bar.retrieve('foo')); // foo only - OH NOES

console.log(Object.keys(foo)); // ["uniqueNumber"] - oh dear. enumerable!
Run Code Online (Sandbox Code Playgroud)