簡單理解邏輯:
A發(fā)布一個消息 ,如果B,C,D都訂閱了這個事件,則會將所有訂閱著訂閱的消息依此執(zhí)行。
常見的使用場景:
vuejs框架數(shù)據(jù)修改,視圖直接改變,這里就是采用的觀察者模式。
開始:
首先要編寫注冊/發(fā)布/注銷三個函數(shù)
var Demo=function(){
? ? var _message={};
? ? var that=this;
? ? //注冊
? ? that.regist=function(type,fn){
? ? ? ? ? if(typeof _message[type]==="undefined"){
? ? ? ? ? ? ? ? ? ? _message[type]=[fn]
? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? _message[type].push(fn)
? ? ? ? }
? ?}
? ? //發(fā)布
? ? that.fire=function(type,args){
? ? ? ? if(!_message[type]){return;}
? ? ? ? var i=0,len=_message.[type].length;
? ? ? ? for(;i<len;i++){
? ? ? ? ? ? ? ? _message[type][i].call(this,args);//觸發(fā)regist的時候存入到_message[type]的回調(diào)函數(shù)
? ? ? ? }
? ? }
? ? //注銷
? ? that.remove=function(type,fn){
? ? ? ? ? ? if(_message[type] instanceof Array){
? ? ? ? ? ? ? ? ? ? ? var i=_message[type]length-1;
? ? ? ? ? ? ? ? ? ? ? for(;i>=0;i--){
? ? ? ? ? ? ? ? ? ? ? ? ? ? _message[type][i]===fn && _message[type].splice(i,1)
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ?}
}
使用:
var observer=new Demo();
//訂閱
observer.regist("test",function(e){e()});
observer.regist("test",function(e){console.log("這個訂閱也會觸發(fā)")});
//發(fā)布
observer.fire("test",function(){
? ? ? alert("這里是業(yè)務(wù)邏輯")
})
當(dāng)fire發(fā)布test,則訂閱test的消息會依次執(zhí)行;