$（document.body）和document.body是否相同？ 清潔垃圾並在課堂上裝訂？ -MooTools 1.3

Question

我正在構建一個MooTools類，並且在我的initialize函數中有這個類：

this.css = null;

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

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

}.bind(this));

好的，現在問問題...我應該在init中聲明this.css = null還是任何其他空變量：

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

他們說：清空所有子元素，將其刪除並進行垃圾處理。 有助於在pageUnload之前清除內存。

所以我必須自己亂扔垃圾嗎？ 怎么做？ 什么時候使用.destroy（）？ 我正在做一個龐大的項目，我注意到IE在腳本的多次執行中變得很慢（因此，如何處理該問題？可能需要進行一些清理，內存泄漏？）。

Answer 1

pff，這有點長。

首先，初始變量。 this.css = null ...我唯一設置“空”變量的時間是： 當它是對象的屬性時，我可以引用它，並且不希望對其進行不確定的定義； 當它是一個字符串，我將與之連接或一個數字，我將增加/減少； 此時，null並不是真正有用的。

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

現在，iirc，有些時候您不得不使用$(document.body) ，這不是因為document.body無法正常工作，而是因為應用$()也會在IE中應用Element原型（因為未擴展Element原型）在那里，這些方法直接應用於元素，當您為它們設置$時會發生這種情況。 同樣，$分配目標元素的內部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中而不是在trident中具有方法。 但是，用$（“ 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。 但是，imo是.destroy的一種很好的做法。 如果您在DOM中不需要某些內容，請使用element.dispose（）。 如果您不會再次將其附加到DOM，請使用.destroy（）-刪除所有子節點並進行清理。 更多內存\\ o /

關於IE的建議...狡猾。 如果可以跟蹤內存泄漏，則可以使用Drip，諸如dynatrace之類的東西可以很好地進行性能分析。 在實踐方面...確保您不使用內聯js，始終清理不需要的內容（事件，元素），通常，當您堆積事件並處理ajax時尤其要小心，尤其是（帶來需要事件的新元素-請考慮使用事件委托...）。 使用較少的dom節點-也有幫助...