$ (document.body) e document.body sono uguali? Pulizia spazzatura e rilegatura in classe? - MooTools 1.3

Question

Sto costruendo una classe MooTools e ho questo nella mia funzione di inizializzazione:

this.css = null; 

window.addEvent('domready', function(){ 

    this.document = $(document); 
    this.body = $(document.body); 
    this.head = $(document.head); 

}.bind(this)); 

Ok e ora alle domande ... Devo dichiarare this.css = null o qualunque altra variabile vuota nella init:

this.css = null; // Maybe this.css = '' - empty string? 

la prossima cosa è di circa finestra e documento ... dovrei metterla in $() o no, perché funziona sia così, quindi ho solo voglia di sapere da che parte è preferito? Quindi riassumendo:

window.addEvent() // or should I use $(window).addEvent() 
this.document = $(document) // or this.document = document 
this.body = $(document.body) // or this.body = document.body 

Ho memorizzato questi valori in oggetto per evitare più query DOM, ok? O sarebbe meglio chiamare $ (selettore)/$$ (selettore) ogni volta?

Altre due cose rimanenti ... Informazioni sul collegamento ... È corretto utilizzare .bind (this) ogni volta o sarebbe meglio usare .bind (this.myDiv) e usarlo all'interno della funzione come ad es. : this.setStyle (...); invece di this.myDiv.setStyle (...)

(function(){ 
    this.setStyle('overflow-y', 'visible'); 
}.bind(this.body)).delay(100); 

o

(function(){ 
    this.body.setStyle('overflow-y', 'visible'); 
}.bind(this)).delay(100); 

E l'ultima cosa è circa la raccolta dei rifiuti ... Devo spazzatura me stesso e come farlo (per quanto ne so, MooTools lo fa da solo allo scaricamento). La parte confusa è che ho trovato funzione nel docs MT:

myElement.destroy(); 

Dicono: Vuoti un elemento di tutti i suoi figli, rimuove e garbages l'Elemento. Utile per cancellare la memoria prima del pageUnload.

Quindi devo spazzare da solo? Come farlo? Quando usare .destroy()? Sto lavorando su un grande progetto e ho notato che IE rallenta le varie esecuzioni dello script (quindi come gestirlo? Probabilmente è necessaria una pulizia, perdite di memoria?).

Answer 1

pff, questo è un po 'lungo.

prime, variabili iniziali. this.css = null ... l'unica volta che ho impostato le variabili "vuote" sono: typecast; quando è una proprietà di un oggetto posso fare riferimento e non voglio indefinito; quando si tratta di una stringa con cui concatenare o un numero aumenterò/diminuirò; null non è veramente utile a questo punto.

una pratica comune/buona quando si scrive una classe mootools consiste nell'utilizzare la classe Options come mixin. questo ti permette di impostare l'oggetto delle opzioni di default con le tue impostazioni predefinite che possono essere sovrascritte al momento dell'istanziazione. allo stesso modo, Object.merge({ var: val}, useroptions); può sovrascrivere un valore predefinito se fornito.

ora, IIRC, ci sono momenti in cui dovreste usare $(document.body) e non è perché document.body non funziona, è perché l'applicazione $() vale anche prototipi Element in IE (in quanto elemento prototipo non è esteso lì, il i metodi vengono applicati direttamente agli elementi invece, cosa che accade quando li fai $). Inoltre, $ assegna un UID interno dell'elemento di destinazione e consente di utilizzare la memoria degli elementi per quell'elemento. Non vedo l'opportunità di utilizzare $(document) o $(window) - sono "estesi" quanto necessario per impostazione predefinita. In ogni caso, anche in IE, hai solo bisogno di $(something) una sola volta e puoi continuare a usarlo come "qualcosa" in seguito.controlla il mio esempio document.getElementById("foo").method() - puoi semplicemente eseguire $("foo"); da solo e provare di nuovo document.getElementById("foo").method() - funzionerà anche in IE.

window.addEvent(); // is fine. 
document.body.adopt(new Element("div")); // not fine in IE. 
new Element("div").inject(document.body); // fine. 

e sotto la propria:

$(document.body).adopt(new Element("div")); // fine. 
document.body.adopt(new Element("span")); // now fine, after first $. 

vedono questo in IE8: http://www.jsfiddle.net/AePzD/1/ - primo tentativo di impostare lo sfondo fallisce, ma la seconda si lavora. successivamente, le chiamate document.body.methods() funzioneranno correttamente.

http://www.jsfiddle.net/AePzD/2/ - questo mostra come l'elemento (che restituisce anche $) può avere metodi in webkit/mozilla e non in tridente. tuttavia, sostituirlo con $ ("pippo") e inizierà a funzionare. regola generale: $ elementi che non si creano dinamicamente prima di applicare loro i metodi.

memorizzare selettori può essere uno buono pratica di prestazioni, di sicuro. ma può anche riempire la catena di portata con molte variabili, quindi fai attenzione. se si utilizzerà un selettore due o più volte, è consigliabile memorizzarlo nella cache. non riuscire a farlo non è un dramma, i motori di selezione come lo sfrigolio e il lucido sono così veloci in questi giorni non importa (a meno che non si stia animando in quel momento e questo abbia un impatto sul FPS).

come per legare, in qualsiasi modo.

tenere a mente ritardo ha un secondo argomento, BIND:

(function(){ 
     this.setStyle('background', 'blue'); 
}).delay(100, $("foo")); 

in modo da fare un bel paio di funzioni. questo particolare legame non è molto utile ma in una classe, potresti voler fare

(function(){ 
     this.element.setStyle('background', 'blue'); 
     this.someMethod(); 
}).delay(100, this)); 

GC. mootools ha il proprio GC, certo. tuttavia, .destroy è una buona pratica, imo. se non hai bisogno di qualcosa nel DOM, usa element.dispose(). se non lo si collega nuovamente al DOM, utilizzare .destroy() - rimuove tutti i nodi figlio e pulisce. più memoria \ o/

consigli su IE ... dubbia. puoi usare la flebo se riesci a rintracciare le perdite di memoria, ci sono cose come dynatrace che possono essere molto buone nella profilazione. in termini di pratiche ... assicurati di non usare inline js, ripulisci sempre ciò che non ti serve (eventi, elementi) e, in generale, fai attenzione, specialmente quando impili eventi e si occupano di ajax (portare nuovi elementi che hanno bisogno di eventi - considera invece la delega degli eventi ...). usare meno dom node - aiuta anche ...