設計模式之發佈訂閱模式（觀察者模式）

主要解決的問題

觀察者模式主要解決的問題是程序模塊間通訊問題，異步請求處理。發佈訂閱模式是一種代替異步編程中傳遞迴調函數的方案。可以有效的避免回調地獄的出現。

對應現實生活中的例子

在現實生活中的事件模型就是通知模型。想象這樣一個場景，一個房東要把房子掛到房產中介那裏去賣，若是沒有通知模型的話，房東須要每一打一個電話到中介去問一下房子賣出去沒有？沒過幾天中介的前臺就辭職不幹了。若是存在時間的通知機制的話，中介若是把房子賣出去了，就通知房東。這就是一個發佈訂閱模式。房東到中介那裏訂閱一個事件：「賣出去通知我」，中介在房子賣出去後發佈這個消息：「通知房東」，這就是一個完整的發佈訂閱模式。可以節省不少輪詢機制所帶來的程序性能的浪費。

瀏覽器中有基於DOM的原生的事件機制

常見的有：

document.body.addEventListener('click',function(){
    alert(1111);
},false);//負責監聽body上的click事件
document.body.click();  //觸發這個click事件

自定義全局事件機制

程序的結構：
1.定義一個大類EventPool，有3個方法。
2.register( )用於註冊一個監聽事件
3.dispatch( )用於觸發一個監聽事件
4.removeEvent( )用於移除一個已經註冊的監聽事件
5.namespace( )用於產生一個命名空間，防止出現事件名命名衝突

TS代碼

class EventPool{
    clientList:object = {}; //用於緩存添加進來的事件和監聽函數
    constructor(){}
    
//註冊一個監聽事件，並傳入一個回調函數    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);
            }
        });
    }
    //觸發一個已經註冊過的事件
    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}:該事件名在已註冊的事件列表中不存在`);
            }else{
                callbacks = callbacks.concat(scope[ item ]);
            }
        });
        callbacks.map((itemFunc)=>{
            itemFunc.call(this, ...callbackParms);
        });

    }
    //移除註冊過的事件
    removeEvent(eventName:string, callback:Function, scope=this.clientList){
        let cbs:Function[] = scope[eventName];
        if(!(eventName in scope)){
            throw new Error(`${eventName}-->這個事件名在事件列表中不存在`);
        }else{
            if(!cbs || cbs.length === 0) return false; //沒有訂閱過，或者沒有傳入過回調函數
            else{
                cbs.forEach((itemFunc,index)=>{
                    if( itemFunc === callback ){
                        scope[ eventName ].splice(index,1);
                    }
                });
            }
        }
    }
    /* 在全局事件對象上爲了防止發生事件的命名衝突，目前只實現了一層的命名空間 */
    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("吃飯",['參數1',1,[1,2,3]]);

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

console.log(ep.clientList);

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