最近在研究webRTC的封装库，在阅读其源码的过程中，对js原生的自定义事件封装与调用机制有了新的认识，记录下来分享给有需要的人。
正文开始：
JS的事件是基于“监听和回调”机制的，回调函数负责对事件的处理。这种监听与回调机制同样可以应用在模块、对象封装中。通过自定义触发事件，并且声明回调函数，在恰当的时候对自定义事件进行触发。这种事件模式可以代替函数调用机制，增强代码的语义化；同时也可以将事件触发看成一个模块的对外接口，适合逻辑复杂的代码的解耦，尤其利于js的逻辑操作部分与DOM操作部分的解耦。
Talking is cheap，let's show you the code!
首先我们定义一个事件模型，该模型脱胎于Nodejs的EventEmit：
functionEventEmitter() {
this.events= {};
}
//绑定事件函数
EventEmitter.prototype.on=function(eventName, callback) {
this.events[eventName] =this.events[eventName] || [];
this.events[eventName].push(callback);
};
//触发事件函数
EventEmitter.prototype.emit=function(eventName, _) {
varevents=this.events[eventName],
args= Array.prototype.slice.call(arguments,1),
i,m;
if(!events) {
return;
}
for(i=0,m=events.length;i
events[i].apply(null,args);
}
}
在该事件对象中，定义了两个方法on和emit，on作为事件的监听函数，第一个参数是事件名称，第二个参数是事件的回调函数；emit是触发方法，其参数将作为回调函数中的参数。
这里我们任意定义一个对象：
const Obj=function(){
}
Obj.prototype=new EventEmitter()//继承EventEmit
对象继承EventEmit；
在button上绑定click事件，作为dom层的事件触发，并在其中触发自定义事件
const table=newTable();
document.querySelector("button").addEventListener("click",function(){ table.emit("addRow");})
在逻辑处理部分，监听addRow事件，并定义回调函数：
functionTable(){
}
Table.prototype=newEventEmitter();
Table.prototype.on("addRow",function(){
console.log("addRow");
})
在dom层可以进行与页面元素的相关操作，将页面数据传递以事件触发的形式传递给js的逻辑层，这样一来实现了dom操作与逻辑的分离，代码更加干净。
目前大部分的业务逻辑都可以通过vue或者angular这样的框架实现，单纯的dom操作越来越少，但还是认为多多接触一些模式与面向对象的知识可以加深我们对代码的认识，加快学习速度，以上。
后记：
通篇写下来，发现与观察者模式有些相像，看来还是需要加强学习，以后我与会分享前端开发过程中的认识与感想；webRTC的相关知识也会记录下来。
希望这篇分享对大家有所帮助！
网友评论