设计模式之发布订阅模式（观察者模式）

主要解决的问题

观察者模式主要解决的问题是程序模块间通信问题，异步请求处理。发布订阅模式是一种代替异步编程中传递回调函数的方案。能够有效的避免回调地狱的出现。

对应现实生活中的例子

在现实生活中的事件模型就是通知模型。想象这样一个场景，一个房东要把房子挂到房产中介那里去卖，如果没有通知模型的话，房东需要每一打一个电话到中介去问一下房子卖出去没有？没过几天中介的前台就辞职不干了。如果存在时间的通知机制的话，中介如果把房子卖出去了，就通知房东。这就是一个发布订阅模式。房东到中介那里订阅一个事件：“卖出去通知我”，中介在房子卖出去后发布这个消息：“通知房东”，这就是一个完整的发布订阅模式。能够节省很多轮询机制所带来的程序性能的浪费。

浏览器中有基于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]]);