Características ocultas de MooTools

Question

¿Cuáles son las características ocultas u oscuras de MooTools que todo desarrollador de MooTools debe conocer?

Una característica por respuesta, por favor.

Answer 1

Hay muchas características que se pueden utilizar si se lee el código fuente, aunque la línea oficial es: 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

Dicho esto, hay algunas cosas que realmente pueden ser muy útiles. Uno de mis favoritos características no documentadas es la siguiente:

elementos referenciados tienen un UID

cualquier elemento que tiene o bien se está creando o se transmite a través de un selector, se le asigna una propiedad uid, que es gradual y único . Desde MooTools 1.4.2, esto solo se puede leer a través de Slick.uidOf(node) y no a través del antiguo elemento attr .uid. Ahora puede usar la nueva propiedad uniqueNumber de cualquier objeto MooTools Element.

¿Cómo se usa? Para empezar, Element Storage. Se basa en el uid como la clave en el objeto Storage dentro de un cierre, que tendrá todo lo que tenga .store 'd para ese elemento.

element.store('foo', 'bar'); 

se traduce en:

Storage[Slick.uidOf(element)].foo = 'bar'; 

y

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

Inicialización de almacenamiento para un elemento que ha creado externamente, por ejemplo, a través de var foo = document.createElement('div') y no elemento constructor

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

// same as: 
document.id(foo); 

Th Los archivos almacenados por el framework en Storage también incluyen todas las devoluciones de llamada events, instancias validators, instancias Fx (tween, morph, etc.) y así sucesivamente.

¿Qué puedes hacer al conocer los UID de los elementos? Bueno, clonar un elemento NO obtiene el almacenamiento o los eventos del elemento. En realidad, puede escribir un nuevo prototipo Element.cloneWithStorage que también copiará todos los valores almacenados que pueda tener, lo que es útil hasta un punto: las instancias que hacen referencia a un elemento en particular (como Fx.Tween) continuarán haciendo referencia al elemento anterior, por lo que tener resultados inesperados. Esto puede ser útil para mover su propio almacenamiento, sin embargo, todo lo que necesita es un método similar que registre lo que ha almacenado y le permita clonarlo.

punción Ejemplo de almacenamiento de datos de otro elemento:

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! 

Answer 2

Function.prototype.protect es tal vez una agradable menos conocido.

se utiliza para tener protegidos los métodos en las clases:

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" 

personalmente no lo utilizan muy a menudo, pero podría ser útil en algunos casos.

Answer 3

Function.prototype.overloadGetter y Function.prototype.overloadSetter

Ver este post: What does MooTools' Function.prototype.overloadSetter() do?

Answer 4

Clase Mutators

MooTools tiene una característica maravillosa que le permite crear sus propios mutators clase. Por ejemplo, añadir un registrador para que se referencian los métodos de clases particulares, que puede hacer:

// 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); 
    }; 
}; 

y luego en la Clase:

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"); 

Prueba el jsFiddle: http://jsfiddle.net/BMsZ7/2/

Esta pequeña joya tiene Me ha servido para atrapar problemas de condición de carrera de bugfoot anidados dentro de una aplicación web asíncrona HUUUGE que de otra manera hubiera sido tan difícil de rastrear.

Answer 5

lo recomiendo la lectura de la excelente serie Up the Moo Herd por Mark Obcena, autor de Pro Javascript With MooTools     :)

Answer 6

Una de mis características favoritas que he aprendido más tarde, pero deseaba que sabía desde el principio - pseudos de eventos, especialmente :once.

Ver http://mootools.net/docs/more/Class/Events.Pseudos#Pseudos:once