主要解决的问题
观察者模式主要解决的问题是程序模块间通信问题，异步请求处理。发布订阅模式是一种代替异步编程中传递回调函数的方案。能够有效的避免回调地狱的出现。
对应现实生活中的例子
在现实生活中的事件模型就是通知模型。想象这样一个场景，一个房东要把房子挂到房产中介那里去卖，如果没有通知模型的话，房东需要每一打一个电话到中介去问一下房子卖出去没有？没过几天中介的前台就辞职不干了。如果存在时间的通知机制的话，中介如果把房子卖出去了，就通知房东。这就是一个发布订阅模式。房东到中介那里订阅一个事件：“卖出去通知我”，中介在房子卖出去后发布这个消息：“通知房东”，这就是一个完整的发布订阅模式。能够节省很多轮询机制所带来的程序性能的浪费。
浏览器中有基于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]]);
