在日常的JS組件開發(fā)中，往往會有一些較為復雜的DOM操作及事件監(jiān)聽，尤其是在處理UI層面的widgets時候更為明顯。常常會花很多精力在對象的init上，而當組件需要被移除時則僅僅是把所在DOM草草的remove掉就算完事兒。
當然，絕大多數(shù)情況這樣處理并沒有什么不妥，因為事件監(jiān)聽時僅僅局限于所屬的DOM自身，移除DOM后，只要對象的外部引用不再維系，相關(guān)的內(nèi)存占用很快就會被當作垃圾回收掉（本文不討論低版本 IE 內(nèi)存回收的 BUG）。
其實個人在構(gòu)建組件（對象）的時候是比較習慣于添加自定義方法destroy，用來手動銷毀對象內(nèi)部的一些引用。也就是今天要說的僅靠移除DOM并不能達到銷毀對象的幾種情況。
當你的組件出現(xiàn)下面幾種情況時需要特別注意。
一： DOM事件監(jiān)聽越界
常規(guī)情況下，一個組件需要監(jiān)聽的僅僅是自身的DOM內(nèi)的事件。偶爾也會有另一種情況，對象不得不操作自身之外的DOM。
拿常見的瀑布流組件為例，除了自身事件，還要監(jiān)聽頁面的滾動、瀏覽器尺寸重置等事件。因此當瀑布流組件需要被移除時，簡單的移除自身DOM并不能完整銷毀組件對頁面的影響。
下面是常規(guī)做法的例子：
重慶分公司
重慶分公司
//定義瀑布流組件
function WaterFall(node){
this.node = node;
window.addEventListener('scroll',function(){
//do sth
console.log('scrolling');
});
}
//實例化一個瀑布流組件
var node_content = document.getElementById('xxx');
new WaterFall(node_content);
//移除瀑布流組件所屬的DOM
node_content.parentNode.removeChild(node_content);上面的例子很明顯，移除DOM后遺留的事件監(jiān)聽還在，回調(diào)內(nèi)對組件的引用會導致整個組件常駐內(nèi)存無法被回收，直至頁面卸載。
不過你可能會說，在移除DOM時順手解除下事件綁定就 OK 啦。事實確實如此，但是如果操作的具體細節(jié)讓調(diào)用者實現(xiàn)就有點兒麻keng煩die了。因此我們需要提供一個destroy接口讓調(diào)用者去解除對窗口滾動等事件的監(jiān)聽。
//定義瀑布流組件
function WaterFall(node){
this.node = node;
this._scrollListenner = function(){
//do sth
console.log('scrolling');
};
window.addEventListener('scroll',this._scrollListenner);
} //歡迎加入前端全棧開發(fā)交流圈一起學習交流：1007317281
WaterFall.prototype.destroy = function(){
window.removeEventListener('scroll',this._scrollListenner);
this.node.parentNode.removeChild(this.node);
};
//實例化一個瀑布流組件
var myWaterFall = new WaterFall(document.getElementById('xxx'));
//注銷瀑布流組件
myWaterFall.destroy();給大家推薦一個技術(shù)交流學習圈，里面概括移動應用網(wǎng)站開發(fā)，css，html，webpack，vue node angular以及面試資源等。**獲取資料
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
