摘要：最常見的觀察者模式事件監(jiān)聽器這是最簡(jiǎn)單最普通的一種觀察者模式，除此以外還有等。動(dòng)畫在動(dòng)畫中廣泛使用了觀察者模式，動(dòng)畫的開始完成暫停等，都需要觀察者來(lái)確定物體的行為和狀態(tài)。參考資料設(shè)計(jì)模式發(fā)布訂閱模式

Javascript活躍在事件驅(qū)動(dòng)的環(huán)境中，比如鼠標(biāo)的響應(yīng)、事件的回調(diào)、網(wǎng)絡(luò)的請(qǐng)求等，觀察者模式又稱發(fā)布者-訂閱者（publisher-subscriber）模式,是處理對(duì)象及其行為和狀態(tài)之間的關(guān)系，管理人與任務(wù)之間的關(guān)系。

1.1 事件監(jiān)聽器

document.body.addEventListener("click", function () {
    console.log("you clicked me, poor guy!")
});

這是最簡(jiǎn)單最普通的一種觀察者模式，除此click 以外還有load、blur、drag、focus、mouseover、等。事件監(jiān)聽器（listener）有別于事件處理器（handler），在事件監(jiān)聽器中，一個(gè)事件可以關(guān)聯(lián)多個(gè)監(jiān)聽器，每個(gè)監(jiān)聽器獨(dú)立處理監(jiān)聽到的消息；事件處理器是執(zhí)行處理事件發(fā)生后的關(guān)聯(lián)函數(shù)，一種事件是能有一個(gè)處理函數(shù)：

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);

在這個(gè)事件監(jiān)聽器的例子中，listener1和listener2 都是dom元素的監(jiān)聽器，當(dāng)dom被點(diǎn)擊時(shí)，都會(huì)執(zhí)行各自的函數(shù)；

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;

在這個(gè)事件處理器的例子中，handler1不會(huì)被執(zhí)行，只執(zhí)行handler2，是一次賦值的操作。

在動(dòng)畫中廣泛使用了觀察者模式，動(dòng)畫的開始、完成、暫停等，都需要觀察者來(lái)確定物體的行為和狀態(tài)。

//定義動(dòng)畫
var Animation = function(){
    this.onStart = new Publisher;  //關(guān)于Publisher的設(shè)計(jì)將在1.3節(jié)介紹
    this.onComplete = new Publisher;
    this.onTween = new Publisher;
}
//定義一個(gè)原型方法
Animation.prototype.look = function(){
    this.onStart.deliver("animation started!");
    this.onTween.deliver("animation is going on!");
    this.onComplete.deliver("animation completed!");  
};

//實(shí)例一個(gè)box對(duì)象
var box = new Animation();

//定義三個(gè)函數(shù)作為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);

//調(diào)用方法
box.look()

//animation started!
//animation is going on!
//animation completed!

首先，需要一個(gè)發(fā)布者。先定義一個(gè)構(gòu)造函數(shù)，為其定義一個(gè)數(shù)組，用以保存訂閱者信息：

function Publisher(){
    this.subscribes = [];
}

發(fā)布者具有發(fā)布消息的功能，定義一個(gè)deliver的原型函數(shù)：

Publisher.prototype.deliver = function(data){
    this.subscribes.forEach(function(fn){
        fn(data);
    });
    return this;
}

接下來(lái)構(gòu)造訂閱方法：

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方法，這樣所有函數(shù)都可以調(diào)用該方法。這樣就構(gòu)建完畢了，使用方法參看1.2動(dòng)畫的用例。
比較直觀的解釋（以onStart為例）：當(dāng)box對(duì)象執(zhí)行look方法時(shí)，執(zhí)行onStart.deliver(),將onStart事件發(fā)布出去，廣播通知"animation started!",這個(gè)時(shí)候，一直在監(jiān)聽onStart的openBox監(jiān)聽到該事件發(fā)布的信息，打印出來(lái)。

這種方式模仿了nodejs的事件處理機(jī)制，代碼也比較簡(jiǎn)潔：

    var scope = (function() {
    //消息列表
    var events = {};
    return {
        //訂閱消息
        on:function(name,hander){
            var index = 0;  //記錄消息時(shí)間的索引
            if(events[name]){  
                //消息名已存在，將處理函數(shù)放到該消息的事件隊(duì)列中
                index = events[name].push(hander) - 1; 
            }else{
                events[name] = [hander];
            }
            //返回當(dāng)前消息處理事件的移除函數(shù)
            return function(){
                events[name].splice(index,1);
            }
        },
        //關(guān)閉消息
        off:function(name){
            if(!events[name]) return;
            //消息存在，刪除消息
            delete events[name];
        },
        //消息發(fā)布
        emit:function(name,msg){
            //消息不存在，不處理
            if(!events[name]) return;
            //消息存在，將該事件處理隊(duì)列中每一個(gè)函數(shù)都執(zhí)行一次
            events[name].forEach(function(v,i){
                v(msg);
            });
        }
    }
})();

var sayHello = scope.on("greeting",function(msg){
    console.log("訂閱消息：" + msg);
});

var greeting = function(msg){
    console.log("發(fā)布消息：" + msg);
    scope.emit("greeting", msg);
}

greeting("hello Panfen!") 

nodejs中有events模塊來(lái)實(shí)現(xiàn)觀察者模式,可參考Nodejs API-Events 談?dòng)^察者模式，大多數(shù)的模塊都集成了events模塊，所以可以直接使用emit發(fā)射事件和on監(jiān)聽事件，或者像下面這樣先定義一下;

var EventEmitter = require("events").EventEmitter;
var life = new EventEmitter();
life.setMaxListeners(11);       //設(shè)置最大監(jiān)聽數(shù)，默認(rèn)10

//發(fā)布和訂閱sendName
life.on("sendName",function(name){
    console.log("say hello to "+name);
});
life.emit("sendName","jeff");

//發(fā)布和訂閱sendName2
function sayBeautiful(name){
    console.log(name + " is beautiful");
}
life.on("sendName2",sayBeautiful);
life.emit("sendName2","jeff");

常用方法：

hasConfortListener ：用于判斷發(fā)射的事件是否有監(jiān)聽器

removeListener ：移除監(jiān)聽器

listenerCount ：該事件所有監(jiān)聽器的總數(shù)

removeAllListeners ：移除事件所有（或某個(gè)）的監(jiān)聽器

觀察者模式建立了推送和收聽的邏輯，適用于希望把人的行為和應(yīng)用程序的行為分開的場(chǎng)合。舉個(gè)例子來(lái)說：用戶點(diǎn)擊導(dǎo)航欄的一個(gè)tab時(shí)，會(huì)打開包含更多選項(xiàng)的子菜單，一般會(huì)選擇在知道哪個(gè)元素的情況下直接監(jiān)聽這個(gè)click事件，這樣做的弊端在于實(shí)現(xiàn)了與click事件直接綁在一起。更好的做法是：創(chuàng)建一個(gè)可觀察的onTabChange對(duì)象，關(guān)聯(lián)若干觀察者實(shí)現(xiàn)。

《Javascript設(shè)計(jì)模式》

發(fā)布（Publish）/ 訂閱（Subscribe）模式