利用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