利用on和off方法编写高效的js代码

　　先说下将这个话题的起因：最近发现公司的功能代码，很多在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