javascript自定义事宜浅析

2019年8月30日 166次阅读 来源: Horve大叔

在团队合作的许多情况下，某个js的函数会依据不停增添的需求进而不停增添功用，假如功用需求积累过量，我们就很难把控本身在这个函数中新定义的变量会不会掩盖掉之前的定义。如：

function action(){
    console.log(1);
    console.log(2);//新增需求1
    console.log(3);//新增需求2
    ......//一向增添就很难保证下面的代码不会与之前的代码发生争执
}

而假如我们为新增的需求从新定义一个同名的js要领，那厥后定义的要领又会将之前定义的要领掩盖，这固然也不是我们想要的效果。如：

function action(){console.log(1);}
function action(){console.log(2);}//新增需求1
function action(){console.log(3);}//新增需求2

实行效果：3

那末有无什么方法可以让我们的函数离别实行，而且互不影响呢？是的，你肯定想到了js事宜。

<!–more–>

说到js的事宜，我们立马就会想到原生js中对事宜的完成。在规范DOM浏览器中的addEventListener、removeEventListener和在IE中的attachEvent、detachEvent这些已为我们熟知，而且绑定在同一个DOM中的雷同的事宜相互不会被掩盖，比方，你在某个div中绑定了3个click事宜，在实行时它们会顺次实行，而不会只实行末了一次绑定：

//下面的例子仅完成规范DOM浏览器
oDiv.addEventListener("click",function(){console.log(1);},false);
oDiv.addEventListener("click",function(){console.log(2);},false);
oDiv.addEventListener("click",function(){console.log(3);},false);

实行效果：1 2 3

看起来恰好处理了我们的种种挂念，零丁定义，互不影响，很有利于团队合作，然则这些内置的事宜绑定体式格局却依旧没法直接处理我们的题目。

好吧，既然没法直接处理，那我们就应用页面事宜绑定的头脑来本身探究，这就是我们本日要引见的自定义事宜。

起首来看看什么是自定义事宜：让函数可以具有事宜的某些特征。

实在自定义事宜在一些主流的类库中都有完成，后续会理会详细的完成要领。本日，我们就先用简朴的例子来完成自定义事宜的功用。

回到最先的时刻我们提出的需求：让函数离别实行，而且互不影响。这就彷佛我们要根据清单从藏书楼借5本书，走出藏书楼的时刻，我们手里拿到的应该是想借的5本，而不是清单上的末了一本。

遵照js的事宜绑定体式格局来理会一下这几本书和藏书楼之间的关联：

《javascript自定义事宜浅析》

个中，藏书楼就是我们要绑定事宜的对象，也就是我们借书的对象，“click”就是我们绑定事宜的种别，也就是我们想要借的书的分类，而function回调就是我们要实行的函数，也就是我们想借的详细某本书。理清了对应关联，我们就可以从一个藏书楼内差别的分类书架上拿到差别的书。

把这个对应的关联映射到自定义事宜上就是：在某个对象上绑定差别种别的一个或多个要领，而且让它们离别实行。接下来我们就来完成一下这类关联。起首来看一下自定义事宜的绑定完成：

//绑定
function on(obj,events,fn){//参数离别是：对象/自定义事宜种别/要领
    //初始化自定义监听对象，假如存在继承运用，不存在就建立新对象
    obj.listeners = obj.listeners || {};
    obj.listeners[events] = obj.listeners[events] || [];//初始化监听的自定义事宜列表
    obj.listeners[events].push(fn);//将要实行的要领离别存放到对应事宜的列表中
}

如许，我们就把想要实行的一系列要领绑定到了某个页面对象对应的自定义事宜种别上。要领绑定好了以后，怎样去触发呢？看下面的代码完成：

//触发
function fire(obj,events){//参数离别是：对象/自定义事宜种别
    for(var i = 0; i &lt; obj.listeners[events].length; i++){//遍历某个事宜种别下一切的要领
        obj.listeners[events][i]();//顺次实行遍历到的一切的要领
    }
}

如许，我们定义的想要去实行的每一个要领都能被实行，而且它们之间互不影响。看个现实的例子：

var eventHandle = {
    on: function(obj,events,fn){
        obj.listeners = obj.listeners || {};
        obj.listeners[events] = obj.listeners[events] || [];
        obj.listeners[events].push(fn);
    },
    fire: function(obj,events){
        for(var i = 0, n = obj.listeners[events].length; i &lt; n; i++){
            console.log(obj.listeners[events]);
            obj.listeners[events][i] && obj.listeners[events][i]();
        }
    },
    off: function(obj,events){
        for(var i = 0, n = obj.listeners[events].length; i &lt; n; i++){
            obj.listeners[events][i] = null;
        }
    }
};

//绑定自定义事宜，
eventHandle.on(oDiv,"eventType1",function(){console.log(1);});//预备实行要领1
eventHandle.on(oDiv,"eventType1",function(){console.log(2);});//预备实行要领2
eventHandle.on(oDiv,"eventType1",function(){console.log(3);});//预备实行要领3
eventHandle.on(oDiv,"eventType2",function(){console.log(4);});//预备实行要领4

//触发实行
eventHandle.fire(oDiv,"eventType1");//实行eventType1下的一切要领

实行效果：1 2 3

不实行要领4是因为，eventType2下的要领4仅仅被绑定，并没有被触发。

    原文作者：Horve大叔
    原文地址: https://segmentfault.com/a/1190000003979548
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞