直接上代码
js代码test.js
var xEvent=(function(){
function xEvent(){
this._events={};
}
xEvent.prototype={
emit:function(name,obj){
if(name in this._events){
for(var i=0;i<this._events[name].length;i++){
this._events[name][i](obj);
}
}
},
on:function(name,callback){
if(!(name in this._events)){
this._events[name]=[];
}
this._events[name].push(callback);
},
remove:function(name,callback){
this._events[name]?this._events[name].splice(this._events[name].indexOf(callback), 1) : void 0;
},
removeAll:function(name){
this._events[name]=[]
}
}
return xEvent;
})();
测试代码test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js发布/订阅模式</title>
</head>
<body>
<script src="./test.js">
</script>
<script>
var event=new xEvent();
var test0=function(res){
console.info('test0-----监听',res);
};
var test1=function(res){
console.info('test1-----监听',res);
};
console.info('test0--------------------------start');
event.on('test0',test0);
event.emit('test0',{
code:0,
msg:'test0---0',
data:null
});
console.info('test1-------------------移除监听测试');
event.on('test1',test1);
event.remove('test1');
event.emit('test1',{
code:1,
msg:'test1---1',
data:null
});
</script>
</body>
</html>
测试结果
test0--------------------------start
test.html:15 test0-----监听 {code: 0, msg: "test0---0", data: null}
test.html:31 test1-------------------移除监听测试