設(shè)計(jì)模式之發(fā)布訂閱模式（觀察者模式）

kyanag 發(fā)布于2019-08-21 17:47 / 959人閱讀

摘要：主要解決的問題觀察者模式主要解決的問題是程序模塊間通信問題，異步請(qǐng)求處理。發(fā)布訂閱模式是一種代替異步編程中傳遞回調(diào)函數(shù)的方案。房東到中介那里訂閱一個(gè)事件賣出去通知我，中介在房子賣出去后發(fā)布這個(gè)消息通知房東，這就是一個(gè)完整的發(fā)布訂閱模式。

主要解決的問題

觀察者模式主要解決的問題是程序模塊間通信問題，異步請(qǐng)求處理。發(fā)布訂閱模式是一種代替異步編程中傳遞回調(diào)函數(shù)的方案。能夠有效的避免回調(diào)地獄的出現(xiàn)。

對(duì)應(yīng)現(xiàn)實(shí)生活中的例子

在現(xiàn)實(shí)生活中的事件模型就是通知模型。想象這樣一個(gè)場(chǎng)景，一個(gè)房東要把房子掛到房產(chǎn)中介那里去賣，如果沒有通知模型的話，房東需要每一打一個(gè)電話到中介去問一下房子賣出去沒有？沒過幾天中介的前臺(tái)就辭職不干了。如果存在時(shí)間的通知機(jī)制的話，中介如果把房子賣出去了，就通知房東。這就是一個(gè)發(fā)布訂閱模式。房東到中介那里訂閱一個(gè)事件：“賣出去通知我”，中介在房子賣出去后發(fā)布這個(gè)消息：“通知房東”，這就是一個(gè)完整的發(fā)布訂閱模式。能夠節(jié)省很多輪詢機(jī)制所帶來的程序性能的浪費(fèi)。

瀏覽器中有基于DOM的原生的事件機(jī)制

常見的有：

document.body.addEventListener("click",function(){
    alert(1111);
},false);//負(fù)責(zé)監(jiān)聽body上的click事件
document.body.click();  //觸發(fā)這個(gè)click事件

自定義全局事件機(jī)制

程序的結(jié)構(gòu)：
1.定義一個(gè)大類EventPool，有3個(gè)方法。
2.register( )用于注冊(cè)一個(gè)監(jiān)聽事件
3.dispatch( )用于觸發(fā)一個(gè)監(jiān)聽事件
4.removeEvent( )用于移除一個(gè)已經(jīng)注冊(cè)的監(jiān)聽事件
5.namespace( )用于產(chǎn)生一個(gè)命名空間，防止出現(xiàn)事件名命名沖突

TS代碼

class EventPool{
    clientList:object = {}; //用于緩存添加進(jìn)來的事件和監(jiān)聽函數(shù)
    constructor(){}
    
//注冊(cè)一個(gè)監(jiān)聽事件，并傳入一個(gè)回調(diào)函數(shù)    register(eventName:string,callback:Function,scope=this.clientList){
        let kinds:string[] = eventName.split(" ");
        kinds.map((itemEvent)=>{
            if( itemEvent!==""){
                if (!(itemEvent in scope)) {
                    scope[itemEvent] = [];
                }
                scope[itemEvent].push(callback);
            }
        });
    }
    //觸發(fā)一個(gè)已經(jīng)注冊(cè)過的事件
    dispatch(eventName: string, callbackParms: any[]=[], scope=this.clientList){
        let events: string[] = eventName.split(" ").filter((item) => item !== "" ? true : false);
        let callbacks:Function[]=[];
        events.map((item)=>{
            if(!(item in scope)){
                throw new Error(`${item}:該事件名在已注冊(cè)的事件列表中不存在`);
            }else{
                callbacks = callbacks.concat(scope[ item ]);
            }
        });
        callbacks.map((itemFunc)=>{
            itemFunc.call(this, ...callbackParms);
        });

    }
    //移除注冊(cè)過的事件
    removeEvent(eventName:string, callback:Function, scope=this.clientList){
        let cbs:Function[] = scope[eventName];
        if(!(eventName in scope)){
            throw new Error(`${eventName}-->這個(gè)事件名在事件列表中不存在`);
        }else{
            if(!cbs || cbs.length === 0) return false; //沒有訂閱過，或者沒有傳入過回調(diào)函數(shù)
            else{
                cbs.forEach((itemFunc,index)=>{
                    if( itemFunc === callback ){
                        scope[ eventName ].splice(index,1);
                    }
                });
            }
        }
    }
    /* 在全局事件對(duì)象上為了防止發(fā)生事件的命名沖突，目前只實(shí)現(xiàn)了一層的命名空間 */
    namespace(namespace:string){
        let list = this.clientList;
        if( !(namespace in list) ){
            list[namespace] = {};
        }
        if ( !(list[namespace] instanceof Array) ){
            return {
                register: (eventName: string, callback: Function, scope = this.clientList[namespace]) => {
                    this.register(eventName, callback, scope);
                },
                dispatch: (eventName: string, callbackParms: any[]=[], scope = this.clientList[namespace])=>{
                    this.dispatch(eventName,callbackParms,scope);
                },
                removeEvent: (eventName: string, callback: Function, scope = this.clientList[namespace])=>{
                    this.removeEvent(eventName,callback,scope);
                }
            }
        }
    }
}


/* Test */
let ep = new EventPool();
let f = (...args) => {
    console.log("知道了");
    console.log(args);
}
ep.register("吃飯",f);

ep.dispatch("吃飯",["參數(shù)1",1,[1,2,3]]);

ep.removeEvent("吃飯",f);

console.log(ep.clientList);

ep.dispatch("吃飯", ["參數(shù)1", 1, [1, 2, 3]]);