Mootools - 如何摧毀一個類實例

Question

我想要做的是創建一個類，我可以快速附加到鏈接，它將獲取並顯示鏈接到文檔的縮略圖預覽。現在，我注重易用性和便攜性在這裏，我想簡單的鼠標懸停事件添加到鏈接是這樣的：

<a href="some-document.pdf" onmouseover="new TestClass(this)">Testing</a>

我知道有其他的方式，我可以去這個問題會解決我的問題在這裏，我可能最終必須這樣做，但現在我的目標是實現這一點，如上所述。我不想爲每個鏈接手動添加一個mouseout事件，而且我不想在代碼中的任何地方（以及創建類實例的mouseover事件）以外的任何地方使用代碼。

代碼：

TestClass = new Class({ 
    initialize: function(anchor) { 
     this.anchor = $(anchor); 
     if(!this.anchor) return; 

     if(!window.zzz) window.zzz = 0; 
     this.id = ++window.zzz; 

     this.anchor.addEvent('mouseout', function() { 
      // i need to get a reference to this function 
      this.hide(); 
     }.bind(this)); 

     this.show(); 

    }, 
    show: function() { 
     // TODO: cool web 2.0 stuff here! 
    }, 
    hide: function() { 
     alert(this.id); 

     //this.removeEvent('mouseout', ?); // need reference to the function to remove 

     /*** this works, but what if there are unrelated mouseout events? and the class instance still exists! ***/ 
     //this.anchor.removeEvents('mouseout'); 

     //delete(this); // does not work ! 
     //this = null; // invalid assignment! 
     //this = undefined; // invalid assignment! 

    } 
}); 

目前與上面的代碼會發生什麼：

• 第1次出：警報1
• 第二次了：警告1，2
• 第3次out：alerts 1，2，3
• etc

期望的行爲：

• 第一超時：警報1
• 第二超時：警報2
• 第三超時：警報3
• 等

問題是，每次將鼠標懸停在鏈接上時，我都會創建一個新的類實例併爲該實例附加一個新的mouseout事件。類實例也無限期地保留在內存中。

在mouseout上，我需要刪除mouseout事件並銷燬類實例，所以在後續的鼠標懸停時我們將開始新鮮。

我可以創建一個輔助功能，這確保每個環節的類只創建一次，這樣的事情：

function TestClassHelper(anchor) { 
    anchor = $(anchor); 
    if(!anchor) return; 

    if(!anchor.retrieve('TestClass')) anchor.store('TestClass', new TestClass(anchor)); 
    anchor.retrieve('TestClass').show(); 
} 

<a href="some-document.pdf" onmouseover="TestClassHelper(this)">Testing</a>

我可能最終實現它這樣如果我必須，但我很好奇如何解決其他方法。

Answer 1

這看起來比應該複雜得多。但是如果你想解決這個問題，你需要在某處保存一個對綁定函數的引用，然後傳遞給removeEvent。

例如：

// inside initialize 
this.boundHandler = function() { 
    this.hide(); 
}.bind(this) 
this.anchor.addEvent('mouseout', this.boundHandler); 

// inside hide  
this.removeEvent('mouseout', this.boundHandler); 

這個問題非常的例子見removeEvent docs。

由於性能方面的原因，我不會在此推薦活動委託。最好的方法是用代碼而不是內聯方式附加處理程序，只做一次，因此每次用戶鼠標懸停時都不會創建不必要的對象。