用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法

世界本该如此!

所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存。也许你猜到了,较老版本的浏览器则不会去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡。因此,需要我们自己对要删除的元素进行事件解绑。

实现思路

用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法。我们可以对此三个方法进行进一步的封装,我们会在事件绑定的时候给绑定事件的元素添加一个属性标识,从要删除的元素中去寻找有此标识的元素,然后进行事件的完全解绑。一切都是那么的巧妙!需要注意的一点是,remove()方法在执行的时候会对其自身进行事件解绑,并且该方法可以接受一个选择器参数,以删除其子元素。

实现代码

有了实现思路,编码可以很快搞定。如下:

 
define(['jquery', 'underscore'], function () {
var bindDirects = ['delegate', 'bind','on', 'hover', 'blur', 'change', 'click', 'dblclick', 'focus', 'keydown', 'keypress', 'keyup', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'resize', 'scroll', 'select', 'submit'];
var eMarker = '_addedEvent';
_.each(bindDirects, function (eventName) {
var alias = $.fn[eventName];
$.fn[eventName] = function () {
var $tar = _.isElement(this)?$(this):this;
var hasEventAdded = $tar.attr(eMarker) || '';
var _en = eventName;
if (hasEventAdded.length) {
_en += ',' + hasEventAdded;
}
$tar.attr(eMarker, _en);
return alias.apply(_.isElement(this)?$tar:this, [].slice.call(arguments));
};
});
// 为某一个元素移除绑定的事件
function removeEvents($tar) {
var addedEventsName = $tar.attr(eMarker);
if (addedEventsName) {
addedEventsName.replace(/[^,]+/g, function (eventName) {
// 全部移除
if (eventName === 'delegate') {
$tar.undelegate();
} else {
$tar.unbind();
}
return eventName;
});
}
}

var funcs = ['html','empty'];
_.each(funcs, function (func) {
var alias = $.fn[func];
$.fn[func] = function () {
var $tar = _.isElement(this)?$(this):this;
if($tar.length){
$tar.find('*[' + eMarker + ']').each(function (k, subEl) {
try{
removeEvents($(subEl));
}catch(e){
console.error(e.message);
}
});
}
var args = [].slice.call(arguments);
return alias.apply($tar, args);
};
});
// 扩展remove()方法
var alias = $.fn.remove;
$.fn.remove = function () {
var $tar = _.isElement(this)?$(this):this,
arg = arguments;
if($tar.length && !arg.length){
$tar.find('*[' + eMarker + ']').each(function (k, subEl) {
try{
removeEvents($(subEl));
}catch(e){
console.error(e.message);
}
});
}
if(arg.length){
var selector = arg[0];
if(_.isString(selector)){
$tar.find(selector).each(function(k,curEl){
var $cur = $(curEl);
$cur.find('*[' + eMarker + ']').each(function (k, subEl) {
try{
removeEvents($(subEl));
}catch(e){
console.error(e.message);
}
});
removeEvents($cur);
$cur.remove();
});
}
}
var args = [].slice.call(arguments);
return alias.apply($tar, args);
};
});

还是那句话,了解的越多,你能做的就越多!

最新资讯
收入一度九成来自苹果产业链 华兴源创胜算几何

收入一度九成来自苹果

华兴源创对苹果的依赖度其实还是比较高的。2016至2018
无App有百万社群 这样的电商能高速增长十年吗?

无App有百万社群 这样

中国电商发达程度超过其他国度,但细分数据说明市场分化
AIOT时代  跨国企业为工业互联“扩列”中国朋友圈

AIOT时代 跨国企业为

万物互联,模糊了传统行业和互联网行业的边界。AI(人工智
2019年美国最佳CEO榜单出炉:库克和小扎连续7年登榜

2019年美国最佳CEO榜

今年有27位科技公司的首席执行官登场,其中库克从第96位
两家中国自动驾驶公司获加州许可:小马智行和AutoX

两家中国自动驾驶公司

小马智行(Pony.ai)和AutoX(Auto.ai)在同一天获得由美国加
H连锁酒店夏青宁:四个月签约近千家酒店 超5万间客房

H连锁酒店夏青宁:四个

H连锁酒店创始人兼CEO夏青宁今日在朋友圈分享了一组最
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编