pubSub-js观察者模式订阅触发实现原理
先上实现代码:
function PubSub() { this.handlers = {}; } PubSub.prototype = { // 订阅事件(定义的key值,绑定的函数) on: function(eventType, handler){ var self = this; if(!(eventType in self.handlers)) { self.handlers[eventType] = []; } self.handlers[eventType].push(handler); return this; }, // 触发事件(定义的key值) 后一个参数建议传递对象 emit: function(eventType){ var self = this; var handlerArgs = Array.prototype.slice.call(arguments,1);//触发传递的数据 for(var i = 0; i < self.handlers[eventType].length; i++) { self.handlers[eventType][i].apply(self,handlerArgs);//将传过来的对象绑定于函数中 apply立即执行 } return self; }, // 删除订阅事件(定义的key值,绑定的函数(一般传个函数变量)) off: function(eventType, handler){ var currentEvent = this.handlers[eventType];//返回PubSub被绑定的函数 var len = 0; if (currentEvent) { len = currentEvent.length; for (var i = len - 1; i >= 0; i--){ if (currentEvent[i] === handler){ currentEvent.splice(i, 1);//PubSub对象中的函数被删除 splice用于删除项目 } } } return this; } }
on订阅事件,可将事件传入到PubSub对象的handlers对象中。
emit触发事件,将传入的对象绑定到订阅的函数中,apply改变传入的参数的指向为指定函数,并立即执行。
off删除订阅,将PubSub对象的指定key的事件删除。
使用方法:
var pubsub = new PubSub(); //订阅事件A // pubsub.on('A', function(data){ // console.log(1, data); // }); pubsub.on('A', a2=function(data){ console.log(2 , data); }); //触发事件A pubsub.emit('A', {a:2}); //删除事件A的订阅源a2 pubsub.off('A', a2);
博客园作者:herry菌朋友,看到这里,关注作者的公众号吧,不漏掉更新哦