JS中的觀察者模式DEMO

觀察者模式：

這是一種建立鬆散耦合程式碼的技術。它定義物件間 一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都將得到通知。由主體和觀察者組成，主體負責釋出事件，同時觀察者透過訂閱這些事件來觀察該主體。主體並不知道觀察者的任何事情，觀察者知道主體並能註冊事件的回撥函式。

例子：

假如我們正在開發一個商城網站，網站裡有header頭部、nav導航、訊息列表、購物車等模組。這幾個模組的渲染有一個共同的前提條件，就是必須先用ajax非同步請求獲取使用者的登入資訊。這是很正常的，比如使用者的名字和頭像要顯示在header模組裡，而這兩個欄位都來自使用者登入後返回的資訊。這個時候，我們就可以把這幾個模組的渲染事件都放到一個陣列裡面，然後待登入成功之後再遍歷這個陣列並且呼叫每一個方法。

var Event = {
// 透過on介面監聽事件eventName
// 如果事件eventName被觸發，則執行callback回撥函式
on: function (eventName, callback) {
//我的程式碼
if(!this.handles){
this.handles={};
}
if(!this.handles[eventName]){
this.handles[eventName]=[];
}
this.handles[eventName].push(callback);
},
// 觸發事件 eventName
emit: function (eventName) {
//你的程式碼
//console.info('eventName', eventName);
// console.info('this.handles', this.handles);
if(this.handles[arguments[0]]){
for(var i=0;i this.handles[arguments[0]];
}
}
}
};

// 繫結事件

Event.on('test', function (result) {
   console.log(result);
});
Event.on('test', function () {
   console.log('test');
});
Event.emit('test', 'hello world'); // 輸出 'hello world' 和 'test'