pubSub-js觀察者模式訂閱觸發實現原理
阿新 • • 發佈:2020-09-16
先上實現程式碼:
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; },on訂閱事件,可將事件傳入到PubSub物件的handlers物件中。 emit觸發事件,將傳入的物件繫結到訂閱的函式中,並立即執行。 off刪除訂閱,將PubSub物件的指定key的事件刪除。// 觸發事件(定義的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; } }
使用方法:
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);