如何在JS中處理原型？

我有一個棘手的問題，雖然答案可能很明顯，但我看不出如何去做我想做的事情。如何在JS中處理原型？

我爲我的應用程序創建了一個腳本庫，它使用JS原型和模板來動態實例化DOM元素並將這些元素與處理程序連接起來。一個例子如下：

var ppane = new AWP.iuiPanel(theObject, { title: 'Select filter(s)', idDisplay: 'block', idString: params.sender._options['title'] });

AWP.iuiPanel是被定義爲的函數原型的一類，例如：

AWP.iuiPanel = function() { <i'm a constructor> } 
AWP.iuiPanel.prototype = { <a bunch of methods here> }

實例內的方法創建DOM元素（在此情況下，浮動面板）併爲它建立事件綁定，連接它的控制元素等。

沿着這條路走下去的好處是，通過單個調用來創建一個新的類實例，我也可以建立關聯的DOM元素，並且一旦實例化，就有了類方法被連線起來將執行對元素做相對於目標對象的位置，響應相關的瀏覽器事件等。

我遇到的問題是當我想要處理這個構造。我可以輕鬆地部署DOM元素。但是我仍然在內存中使用連接到瀏覽器事件的方法來查找已處置的DOM元素。我需要能夠處理不僅DOM元素，但也是類實例，我不知道如何做到這一點。

一旦聲明瞭一個函數原型怎麼處理？這看起來應該很簡單，但我發現它絕對不是這樣。

有關背景資料，在這裏是因爲我定義它的類的實例：

這必然是僞代碼（ISH）...

AWP.trivialExample = function(someDomRef, someOptionSet) { 
    this._id = someOptionSet['name']; 
    this._width = someOptionSet['width']; 
    this._width = someOptionSet['height']; 
    this._domRef = someDomRef; 
    this._object = ''; 

    this.constructDOM(); 
    this.wireEvents(); 

} 

AWP.trivialExample.prototype = { 

    constructDOM: function() { 
     // build a complex DOM element relative to a provided DOM ref using the 
     // desired and height. This uses a template and I won't give a precise example 
     // of such a template. 
     jQuery("#aTemplate").tmpl(someJSONData).appendTo("body"); 

    }, 

    positionRelative: function() { 
     // this function would get the location of a specific DOM ref and always maintain 
     // a relative position for the DOM element we just constructed 

    }, 

    wireEvents: function() { 
     // hook up to events using JQuery (example) 
     jjQuery(window).resize(this.positionRelative); 

    } 

}

以上是一個簡單的例子它會接受一個DOM對象引用，然後它會動態地構造一個新的DOM元素，並且它會連接到瀏覽器事件，以在頁面大小調整時始終保持這兩個對象之間的相對位置。

當我處理新的對象時，我也需要處理類實例，我找不到一個簡單的方法來做到這一點。

所有幫助表示讚賞。

謝謝;

來源

2011-05-01 Thomas W Tupper

的事件監聽器引用刪除DOM節點A建議：

就像你有一個「wireEvents」，你應該在情況下，相應的「unwireEvents」你決定停止使用的對象。在這種情況下，addEventListener（）需要與removeEventListener（）結合使用。正如你所說，你應該修改你的原型，以便當相應的DOM節點被「處置」時刪除事件監聽器。

來源

2011-05-01 02:13:22 ampersand

這讓我走上了正確的道路。問題是，即使在銷燬DOM對象之後，jQuery事件仍然受到束縛，因此將繼續針對不存在的DOM對象執行。詳情請參閱下面的答案。謝謝。 – 2011-05-01 04:26:56

我做了兩件事。首先，jQuery事件綁定使用一個命名處理程序完成： 'this._windowHandler = Function.createDelegate（this，this.positionRelative）; jQuery（window）.resize（this._windowHandler）;' 忽略ajax.net-isms--這個代碼庫顯然是被編寫來處理它，但你可以在不使用委託的情況下完成相同的工作。其次，在類dispose方法我解除綁定的特定參考： '的jQuery（窗口）.unbind（ '調整大小'，this._windowHandler）;' 當然我也破壞的DOM對象： '的jQuery （myObjectRef）.remove（）;' – 2011-05-01 04:38:41

非常好！這種方式更加清潔，您確切知道發生了什麼以及何時發生。 – ampersand 2011-05-01 05:14:41

AWP.iuiPanel.prototype = null; // ?

來源

2011-05-01 00:44:02 Malvolio

這不會處理特定的實例。假設我創建了兩個類的實例：var ppane1 = new AWP.iuiPanel（theObject，{title：'Select filter（s）'，idDisplay：'block'，idString：params.sender._options ['title']}） ; var ppane2 = new AWP.iuiPanel（theObject，{title：'嘿，我是另一個！'，idDisplay：'block'，idString：params.sender。_options ['title']}）;我必須能夠處置實例。但我不能簡單地將ppane1或ppane2清零 - 即不清除實例。 – 2011-05-01 00:55:02

如何在JS中處理原型？

回答

相關問題