先说下将这个话题的起因：最近发现公司的功能代码，很多在dom对象删除以后，其声明的绑定在window上的resize事件还一直存在，导致相同的功能代码执行了几次。对于我这种轻微代码洁癖的人来说，简直是个大坑。
所以，这里以jQuery的resize方法为例，讲解下我所理解的高效写法。
先看一下普通的在window下绑定resize事件：
$(window).resize(function(){
console.log("hehe");
});
$(window).resize(function(){
console.log("hehe2");
});
触发了几次resize后的执行结果如下：
两个事件处理程序不会互相覆盖是因为，jQuery的方法都是DOM2级的（这里就不细说了）。而问题就出在这里，如果再删除DOM对象后，其特有的、非绑定在本身的响应方法没有对应删除的话，会一直积累下来，像幽灵一般。而这里就是所谓的影响性能，让浏览器宝贵的CPU被无效的功能代码消耗掉，用户体验也在积累一定数量级该幽灵代码后，逐级降低，甚至卡死。
怎么解决呢？当然是kill掉！
如果用unbind方法，是可以进行清除操作，但是关键有时候会勿删，特别是多人协作的团队。所以，on和off方法就派上用场了！
将resize方法改造一下：
$(window).on("resize.fn1", function(){
console.log("hehe");
});
$(window).on("resize.fn2", function(){
console.log("hehe2");
});
重点是on方法的第一个参数：resize.fn1。实心点之前，是该window对象要绑定的resize方法；实心点之后是为该方法取的一个别名，用于标识该方法（注意不能有空格，这是我的一位同事遇到的）。
这个别名，是用于调用off方法时，删除指定对应的处理程序。
如我要删除输出“hehe”的处理程序，代码如下：
$(window).off("resize.fn1");
这样，就可以把不需要的功能代码精确销毁，而不会导致勿删。
另外提醒下，resize事件可以根据需要写n个，然后，你可以根据业务的功能划分，为相同生存期的代码标识相同的别名，以便可以统一销毁。
扩展一下思路：
一般我们写扩展性比较好的函数，比如生成一个遮罩，一般都会预留一个calbackl方法，如下：
function overlay(options){
var default = {
/*其他参数 */
callback:false
};
var settings = $.extend({}, default, options);
if(!!settings.callback){
settings.callback();
}
}
但是，我们可以把扩展性做得更好，比如当遮罩初始化生成时，在window上绑定一个resize事件，输出1
var data = {
/*其他参数*/
extFn : [{
obj:$(window),
name:"resize.overlay",
fn:function(){
console.log(1);
}
}]
};
overlay(data);
function overlay(options){
var default = {
/*其他参数*/
callback:false,
extFn:[]
};
var settings = $.extend({}, default, options);
if(settins.extFn.length > 0){
var extFn_obj, extFn_name, extFn_fn;
for(var i = 0, len = settings.extFn.length; i < len; i++){
extFn_obj = settings.extFn[i].obj;
extFn_name = settings.extFn[i].name;
extFn_fn = settings.extFn[i].fn;
extFn_obj.off(extFn_name);//销毁旧的事件绑定
extFn_obj.on(extFn_name, extFn_fn);//添加新的事件绑定
}
}
/*其他方法及callback*/
}
当然，在销毁生成遮罩时，也应对应的销毁自定义绑定的扩展方法，这里就不叨叨了~
via:cnblogs.com/walls/p/4253663.html