Funzioni nascoste di MooTools

Question

Quali sono le funzionalità nascoste o oscure di MooTools che dovrebbero essere a conoscenza di tutti gli sviluppatori di MooTools?

Una funzione per risposta, per favore.

Answer 1

ci sono molte caratteristiche che si possono usare se si legge il codice sorgente, anche se la linea ufficiale è: 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

Detto questo, ci sono alcune cose che in realtà può essere molto utile. Uno dei miei preferiti caratteristiche non documentate è questo:

elementi referenziati hanno un UID

ogni elemento che possiede sia in fase di creazione o è passata attraverso un selettore, vengono assegnate le proprietà uid, che è incrementale e unico . Poiché MooTools 1.4.2 è leggibile solo tramite Slick.uidOf(node) e non tramite il vecchio elemento attr .uid. È ora possibile utilizzare la nuova proprietà uniqueNumber di qualsiasi oggetto Elemento MooTools.

Come viene utilizzato? Per i principianti, Element Storage. Si basa sull'uid come chiave nell'oggetto Storage all'interno di una chiusura, che avrà tutto ciò che hai .store per quell'elemento.

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

traduce:

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

e

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

Inizializzazione stoccaggio per un elemento è stato creato esternamente, ad esempio, tramite var foo = document.createElement('div') e non Elemento costruttore

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

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

th Le informazioni memorizzate dal framework in Storage includono anche tutte le richiamate events, le istanze validators, le istanze Fx (interpolazione, metamorfosi, ecc.) e così via.

Cosa si può fare conoscendo l'UID degli elementi? Bene, la clonazione di un elemento NON ottiene la memoria o gli eventi dell'elemento. È possibile scrivere un nuovo prototipo Element.cloneWithStorage che copierà anche tutti i valori memorizzati che possono essere utili fino a un punto: le istanze che fanno riferimento a un particolare elemento (ad esempio, Fx.Tween) continueranno a fare riferimento al vecchio elemento, quindi potrebbe avere risultati inaspettati Questo può essere utile per spostare il tuo spazio di archiviazione, tuttavia, tutto ciò di cui hai bisogno è un metodo simile che registrerà ciò che hai memorizzato e ti consentirà di clonarlo.

Esempio bagagli foratura dei dati di un altro 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 è forse uno bel meno noti.

consente di iniziare protetta metodi nelle classi:

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 io non uso molto spesso, ma potrebbe essere utile in alcuni casi.

Answer 3

Function.prototype.overloadGetter e Function.prototype.overloadSetter

Vedi questo post: What does MooTools' Function.prototype.overloadSetter() do?

Answer 4

Classe Mutatori

MooTools ha una splendida funzione che permette di creare i propri mutatori Class. Ad esempio, per aggiungere un logger per particolari metodi di classe in fase di riferimento, si può fare:

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

e poi nella Classe:

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

provare il jsfiddle: http://jsfiddle.net/BMsZ7/2/

Questo piccolo gioiello ha mi è stato strumentale per aver catturato problemi di condizioni di gara a piedi nidificati all'interno di una webapp asincrona HUUUGE che sarebbe stata così difficile da tracciare altrimenti.

Answer 5

Mi raccomando di leggere la serie eccellente Up the Moo Herd da Mark Obcena, autore di Pro Javascript With MooTools     :)

Answer 6

Una delle mie funzioni preferite che ho imparato più tardi, ma avremmo voluto che sapevo fin dall'inizio - pseudos eventi, in particolare :once.

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