$（document.body）和document.body是否一樣？在課堂上清理垃圾和綁定？ - MooTools的1.3

我建立一個MooTools的類，我有這在我的初始化函數：

this.css = null; 

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

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

}.bind(this));

好了，現在到了問題... 我應該聲明this.css = null或任何其他空變量在init：

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

接下來的事情是關於窗口和文檔......我應該把它變成$（）或不是因爲它是雙向的方式，所以我只是想知道哪種方式最好？所以總結：

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

我將這些值存儲到對象，以避免多個DOM查詢，這是好嗎？或者每次調用$（selector）/ $$（selector）會更好嗎？

還剩下兩件事...關於綁定...可以每次使用.bind（this）還是使用.bind（this.myDiv）會更好，並在函數內部使用它，例如。：this.setStyle（...）;而不是this.myDiv.setStyle（...）

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

或

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

而最後一件事是關於垃圾收集......我一定要自己的垃圾，以及如何做到這一點（據我所知MooTools在卸載時自行完成）。混亂的是，我在MT文檔中的函數：

myElement.destroy();

他們說：清空其所有兒童的元素，刪除和garbages的元素。在pageUnload之前清除內存很有用。

所以我必須自己做垃圾？怎麼做？何時使用.destroy（）？我正在研究一個巨大的項目，我注意到IE緩慢執行腳本的多次執行（所以如何處理？可能需要一些清理，內存泄漏？）。

來源

2011-01-21 jzvelc

好的問題！順便說一下，你還在使用MooTools嗎？ – Sergio 2014-06-13 22:24:12

pff，這有點長。

首先，初始變量。 this.css = null ...我只設置'空'變量的唯一時間是：typecast;當它是一個對象的屬性時，我可能引用並且不想要未定義;當它是一個字符串，我會連接或一個數字我會增加/減少; null在這一點上並不真正有用。

寫一個mootools類的一個常見/好的做法是使用Options類作爲一個mixin。這允許您使用可以在實例化時覆蓋的默認設置來設置默認選項對象。同樣，如果提供，Object.merge({ var: val}, useroptions);可以覆蓋默認值。

現在，IIRC，很多時候，你不得不使用$(document.body)倍，這不是因爲document.body的是不行的，這是因爲應用$()也在IE適用元素的原型（因爲元素的原型不延長那裏，方法直接應用於元素，而當你$他們時）。此外，$分配目標元素的內部UID，並允許元素存儲用於該元素。我沒有看到使用$(document)或$(window)的一點 - 默認情況下，它們會根據需要「擴展」。無論如何，即使在IE中，您只需要$(something)一次，並可以繼續使用它作爲「事後」。檢查我的document.getElementById("foo").method()示例 - 您可以自行運行$("foo");，然後再嘗試document.getElementById("foo").method() - 它也可以在IE中運行。

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

和自己：

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

看到這個IE8：http://www.jsfiddle.net/AePzD/1/ - 將背景設置第一次嘗試失敗，但第二個作品。隨後，document.body.methods()電話會正常工作。

http://www.jsfiddle.net/AePzD/2/ - 這顯示元素（哪些$也返回）可以在webkit/mozilla中擁有方法而不在三叉戟中。然而，用$（「foo」）替換它，它將開始工作。經驗法則：在對其應用方法之前，您不會動態創建$元素。

存儲選擇器可以是好的性能練習，當然。但它也可以用許多變量填充您的範圍鏈，所以要小心。如果您將兩次或更多次使用選擇器，則緩存它是一件好事。不這樣做不是戲劇，選擇引擎像嘶嘶聲和光滑如此之快這些天無所謂（除非你在這個時候動畫，它會影響你的FPS）。

至於綁定，無論你喜歡的方式。

牢記延遲具有第二個參數，BIND：

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

這樣做相當多的功能。這個特殊的綁定不是很有用，但在一個類中，你可能想要做

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

GC。 mootools確實是它自己的GC。然而，.destroy是一個非常好的做法，imo。如果你不需要DOM中的東西，可以使用element.dispose（）。如果您不再將它附加到DOM，請使用.destroy（） - 刪除所有子節點並清理。更多內存\ o/

關於IE的建議...狡猾。如果你可以追蹤內存泄漏，你可以使用滴灌，有像dynatrace這樣的分析能力非常好的東西。在實踐中...確保你不使用內聯js，你總是清理你不需要的東西（事件，元素），一般來說，要小心，特別是當你堆疊事件和處理ajax時帶來需要事件的新元素 - 請考慮事件委派......）。使用更少的DOM節點 - 也幫助...

來源

2011-01-21 01:46:25

太棒了！感謝你這麼快速的回答，你已經很好地解釋了，現在很多事情都很清楚了...... – jzvelc 2011-01-21 12:07:09

$（document.body）和document.body是否一樣？在課堂上清理垃圾和綁定？ - MooTools的1.3

回答

相關問題