Javascript活躍在事件驅動的環境中，例如滑鼠的回應、事件的回呼、網路的請求等，觀察者模式又稱發佈者-訂閱者（publisher-subscriber）模式,是處理物件及其行為和狀態之間的關係，管理人與任務之間的關係。
1. 最常見的觀察者模式
1.1 事件監聽器
document.body.addEventListener('click', function () {
console.log('you clicked me, poor guy!')
});登入後複製
這是最簡單、最普通的觀察者模式，除此click 以外還有load、blur、drag、focus、mouseover、等。事件監聽器（listener）有別於事件處理器（handler），在事件監聽器中，一個事件可以關聯多個監聽器，每個監聽器獨立處理監聽到的訊息；事件處理器是執行處理事件發生後的關聯函數，一個事件是能有一個處理函數：
var dom = $('.dom');
var listener1 = function(e){
//do one thing
}
var listener2 = function(e){
//do another thing
}
addEvent(dom,'click',listener1);
addEvent(dom,'click',listener2);登入後複製
在這個事件監聽器的例子中，listener1和listener2 都是dom元素的監聽器，當dom被點擊時，都會執行各自的函數；
var dom = document.getElementById('dom');
var handler1 = function(e){
//do one thing
}
var handler2 = function(e){
//do another thing
}
dom.onclick = handler1;
dom.onclick = handler2;登入後複製
在這個事件處理器的例子中，handler1不會被執行，只執行handler2 ，是一次賦值的操作。
1.2 動畫
在動畫中廣泛使用了觀察者模式，動畫的開始、完成、暫停等，都需要觀察者來確定物體的行為和狀態。
//定义动画
var Animation = function(){
this.onStart = new Publisher; //关于Publisher的设计将在1.3节介绍
this.onComplete = new Publisher;
this.onTween = new Publisher;
}
//定义一个原型方法
Animation.prototype.look = function(){
this.onStart.deliver('animation started!');
this.onTween.deliver('animation is going on!');
this.onComplete.deliver('animation completed!');
};
//实例一个box对象
var box = new Animation();
//定义三个函数作为subscribers
var openBox = function(msg){
console.log(msg)
}
var checkBox = function(msg){
console.log(msg)
}
var closeBox = function(msg){
console.log(msg)
}
//订阅事件
openBox.subscribe(box.onStart);
checkBox.subscribe(box.onTween);
closeBox.subscribe(box.onComplete);
//调用方法
box.look()
//animation started!
//animation is going on!
//animation completed!登入後複製
1.3 觀察者的建構
首先，需要一個發布者。先定義一個建構函數，為其定義一個數組，用以保存訂閱者資訊：
function Publisher(){
this.subscribes = [];
}登入後複製
發布者俱有發布訊息的功能，定義一個deliver的原型函數：
Publisher.prototype.deliver = function(data){
this.subscribes.forEach(function(fn){
fn(data);
});
return this;
}登入後複製
接下來建構訂閱方法：
Function.prototype.subscribe = function(publisher){
var that = this;
var alreadyExists = publisher.subscribes.some(function(el){
return el === that;
});
if(!alreadyExists){
publisher.subscribes.push(this);
}
return this;
}登入後複製
直接在Function的prototype加入subscribe方法，讓所有函式都可以呼叫這個方法。這樣就建構完畢了，使用方法參考1.2動畫的用例。
比較直覺的解釋（以onStart為例）：當box物件執行look方法時，執行 onStart.deliver(),將onStart事件發佈出去，廣播通知'animation started!',這個時候，一直在監聽onStart#的openBox監聽到該事件發布的訊息，列印出來。
1.4 另一種建構觀察者的方式
這種方式模仿了nodejs的事件處理機制，程式碼也比較簡潔：
var scope = (function() {
//消息列表
var events = {};
return {
//订阅消息
on:function(name,hander){
var index = 0; //记录消息时间的索引
if(events[name]){
//消息名已存在，将处理函数放到该消息的事件队列中
index = events[name].push(hander) - 1;
}else{
events[name] = [hander];
}
//返回当前消息处理事件的移除函数
return function(){
events[name].splice(index,1);
}
},
//关闭消息
off:function(name){
if(!events[name]) return;
//消息存在，删除消息
delete events[name];
},
//消息发布
emit:function(name,msg){
//消息不存在，不处理
if(!events[name]) return;
//消息存在，将该事件处理队列中每一个函数都执行一次
events[name].forEach(function(v,i){
v(msg);
});
}
}
})();
var sayHello = scope.on('greeting',function(msg){
console.log('订阅消息：' + msg);
});
var greeting = function(msg){
console.log('发布消息：' + msg);
scope.emit('greeting', msg);
}
greeting('hello Panfen!')登入後複製
1.5 nodejs中觀察者模式的實作方案
nodejs中有events模組來實作觀察者模式,可參考Nodejs API-Events 談觀察者模式，大多數的模組都整合了events模組，所以可以直接使用emit發射事件和on監聽事件，或像下面這樣先定義一下;
var EventEmitter = require('events').EventEmitter;
var life = new EventEmitter();
life.setMaxListeners(11); //设置最大监听数，默认10
//发布和订阅sendName
life.on('sendName',function(name){
console.log('say hello to '+name);
});
life.emit('sendName','jeff');
//发布和订阅sendName2
function sayBeautiful(name){
console.log(name + ' is beautiful');
}
life.on('sendName2',sayBeautiful);
life.emit('sendName2','jeff');登入後複製
常用方法：
hasConfortListener ：用來判斷發射的事件是否有監聽器
#removeListener ：移除監聽器
listenerCount ：此事件所有監聽器的總數
removeAllListeners ：移除事件所有（或某個）的監聽器
1.6 總結
觀察者模式建立了推送和收聽的邏輯，適用於希望把人的行為和應用程式的行為分開的場合。舉個例子來說：使用者點擊導覽列的一個tab時，會打開包含更多選項的子選單，一般會選擇在知道哪個元素的情況下直接監聽這個click事件，這樣做的弊端在於實現了與click事件直接綁在一起。更好的做法是：創建一個可觀察的onTabChange對象，關聯若干觀察者實現。
相關文章：
詳解JavaScript設計模式經典之策略模式
JavaScript設計模式經典之簡單工廠模式程式碼實例
JavaScript設計模式經典之單例模式詳解
以上是javascript設計模式之觀察者模式詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
