在日常的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);
} //欢迎加入前端全栈开发交流圈一起学习交流: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();
给大家推荐一个技术交流学习圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。**获取资料
原文地址:https://blog.51cto.com/14145734/2391961