一篇文章带你搞懂JS对象的自我销毁-创新互联

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

成都创新互联公司是一家专注于网站制作、成都网站建设与策划设计,江陵网站建设哪家好?成都创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:江陵等地区。江陵做网站价格咨询:18980820575

当然，绝大多数情况这样处理并没有什么不妥，因为事件监听时仅仅局限于所属的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以及面试资源等。**获取资料

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：一篇文章带你搞懂JS对象的自我销毁-创新互联
分享路径：http://cdxtjz.com/article/jjdjj.html