一篇文章带你搞懂JS对象的自我销毁

在日常的JS组件开发中,往往会有一些较为复杂的DOM操作及事件监听,尤其是在处理UI层面的widgets时候更为明显。常常会花很多精力在对象的init上,而当组件需要被移除时则仅仅是把所在DOM草草的remove掉就算完事儿。

当然,绝大多数情况这样处理并没有什么不妥,因为事件监听时仅仅局限于所属的DOM自身,移除DOM后,只要对象的外部引用不再维系,相关的内存占用很快就会被当作垃圾回收掉(本文不讨论低版本 IE 内存回收的 BUG)。

其实个人在构建组件(对象)的时候是比较习惯于添加自定义方法destroy,用来手动销毁对象内部的一些引用。也就是今天要说的仅靠移除DOM并不能达到销毁对象的几种情况。

当你的组件出现下面几种情况时需要特别注意。

一: DOM事件监听越界

常规情况下,一个组件需要监听的仅仅是自身的DOM内的事件。偶尔也会有另一种情况,对象不得不操作自身之外的DOM。

拿常见的瀑布流组件为例,除了自身事件,还要监听页面的滚动、浏览器尺寸重置等事件。因此当瀑布流组件需要被移除时,简单的移除自身DOM并不能完整销毁组件对页面的影响。

下面是常规做法的例子:

//定义瀑布流组件
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后遗留的事件监听还在,回调内对组件的引用会导致整个组件常驻内存无法被回收,直至页面卸载。

不过你可能会说,在移除DOM时顺手解除下事件绑定就 OK 啦。事实确实如此,但是如果操作的具体细节让调用者实现就有点儿麻keng烦die了。因此我们需要提供一个destroy接口让调用者去解除对窗口滚动等事件的监听。

//定义瀑布流组件
function WaterFall(node){
this.node = node;
this._scrollListenner = function(){
//do sth
console.log('scrolling');
};
window.addEventListener('scroll',this._scrollListenner);
}
WaterFall.prototype.destroy = function(){
window.removeEventListener('scroll',this._scrollListenner);
this.node.parentNode.removeChild(this.node);
};

//实例化一个瀑布流组件
var myWaterFall = new WaterFall(document.getElementById('xxx'));
//注销瀑布流组件
myWaterFall.destroy();

©著作权归作者所有:来自51CTO博客作者Hjiangxue的原创作品

非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://www.ydxinzuo.cn/archives/1387

作者: Webmaster

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

0000000

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-16:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部