主要解決的問題
觀察者模式主要解決的問題是程序模塊間通信問題，異步請求處理莽使。發(fā)布訂閱模式是一種代替異步編程中傳遞回調函數的方案锐极。能夠有效的避免回調地獄的出現。
對應現實生活中的例子
在現實生活中的事件模型就是通知模型芳肌。想象這樣一個場景灵再，一個房東要把房子掛到房產中介那里去賣肋层，如果沒有通知模型的話，房東需要每一打一個電話到中介去問一下房子賣出去沒有翎迁？沒過幾天中介的前臺就辭職不干了栋猖。如果存在時間的通知機制的話，中介如果把房子賣出去了汪榔，就通知房東蒲拉。這就是一個發(fā)布訂閱模式。房東到中介那里訂閱一個事件：“賣出去通知我”痴腌，中介在房子賣出去后發(fā)布這個消息：“通知房東”雌团，這就是一個完整的發(fā)布訂閱模式。能夠節(jié)省很多輪詢機制所帶來的程序性能的浪費士聪。
瀏覽器中有基于DOM的原生的事件機制
常見的有：
document.body.addEventListener('click',function(){
alert(1111);
},false);//負責監(jiān)聽body上的click事件
document.body.click(); //觸發(fā)這個click事件
自定義全局事件機制
程序的結構：
1.定義一個大類EventPool锦援，有3個方法。
2.register( )用于注冊一個監(jiān)聽事件
3.dispatch( )用于觸發(fā)一個監(jiān)聽事件
4.removeEvent( )用于移除一個已經注冊的監(jiān)聽事件
5.namespace( )用于產生一個命名空間戚嗅，防止出現事件名命名沖突
TS代碼
class EventPool{
clientList:object = {}; //用于緩存添加進來的事件和監(jiān)聽函數
constructor(){}
//注冊一個監(jiān)聽事件雨涛，并傳入一個回調函數 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ā)一個已經注冊過的事件
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);
}
});
}
}
}
/* 在全局事件對象上為了防止發(fā)生事件的命名沖突懦胞，目前只實現了一層的命名空間 */
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]]);
