摘要：概念觀察者模式被廣泛地應(yīng)用于客戶端編程中。所有的瀏覽器事件，等都是使用觀察者模式的例子。在觀察者模式中，一個(gè)對(duì)象訂閱另一個(gè)對(duì)象的指定活動(dòng)并得到通知，而不是調(diào)用另一個(gè)對(duì)象的方法。此外，觀察者模式還可用于實(shí)現(xiàn)數(shù)據(jù)綁定。

觀察者模式被廣泛地應(yīng)用于JavaScript客戶端編程中。所有的瀏覽器事件（mouseover，keypress等）都是使用觀察者模式的例子。這種模式的另一個(gè)名字叫“自定義事件”，意思是這些事件是被編寫(xiě)出來(lái)的，和瀏覽器觸發(fā)的事件相對(duì)。它還有另外一個(gè)名字叫“訂閱者/發(fā)布者”模式。
使用這個(gè)模式的最主要目的就是促進(jìn)代碼觸解耦。在觀察者模式中，一個(gè)對(duì)象訂閱另一個(gè)對(duì)象的指定活動(dòng)并得到通知，而不是調(diào)用另一個(gè)對(duì)象的方法。訂閱者也被叫作觀察者，被觀察的對(duì)象叫作發(fā)布者或者被觀察者（譯注：subject，不知道如何翻譯，第一次的時(shí)候譯為“主體”，第二次譯時(shí)覺(jué)得不妥，還是直接叫被觀察者好了）。當(dāng)一個(gè)特定的事件發(fā)生的時(shí)候，發(fā)布者會(huì)通知（調(diào)用）所有的訂閱者，同時(shí)還可能以事件對(duì)象的形式傳遞一些消息。 （摘自javascript 模式一書(shū)）

維基百科定義：在軟件架構(gòu)中，發(fā)布-訂閱是一種消息范式，消息的發(fā)送者（稱(chēng)為發(fā)布者）不會(huì)將消息直接發(fā)送給特定的接收者（稱(chēng)為訂閱者）。而是將發(fā)布的消息分為不同的類(lèi)別，無(wú)需了解哪些訂閱者（如果有的話）可能存在。同樣的，訂閱者可以表達(dá)對(duì)一個(gè)或多個(gè)類(lèi)別的興趣，只接收感興趣的消息，無(wú)需了解哪些發(fā)布者（如果有的話）存在。

摘自 http://www.cnblogs.com/tugenh...

JS傳統(tǒng)事件就是一個(gè)觀察者模式，之所以要有觀察者模式，是因?yàn)橛袝r(shí)候和傳統(tǒng)事件無(wú)關(guān)的事件，比如：2個(gè)或者更多模塊的直接通信問(wèn)題，比如說(shuō)我有個(gè)index.html頁(yè)面，我有很多JS文件，比如：

a.js: function a(){}; b.js: function b(){}; c.js function c(){}; 等等。后面還有許多這樣的JS，那么我要在index.html初始化這些函數(shù)的話，我需要這樣調(diào)用a();b();c()等等，也就是說(shuō)頁(yè)面調(diào)用的時(shí)候 我要這樣調(diào)用，增加了依賴性，我要知道有多少個(gè)函數(shù)要這樣初始化調(diào)用，但是如果我們現(xiàn)在用觀察者模式就不需要知道有哪些訂閱者，比如一個(gè)模塊(或者多個(gè)模塊)訂閱了一個(gè)主題(或者事件)，另一個(gè)模塊發(fā)布這個(gè)主題時(shí)候，訂閱這個(gè)主題模塊就可以執(zhí)行了，觀察者主要讓訂閱者與發(fā)布者解耦，發(fā)布者不需要知道哪些模塊訂閱了這個(gè)主題，它只管發(fā)布這個(gè)主題就可以了，同樣訂閱者也無(wú)需知道那個(gè)模塊會(huì)發(fā)布這個(gè)主題，它只管訂閱這個(gè)主題就可以了。這樣2個(gè)模塊(或更多模塊)就實(shí)現(xiàn)了關(guān)聯(lián)了。而不需要和上面代碼一樣，我要知道哪些模塊要初始化，我要怎樣初始化。這只是一個(gè)簡(jiǎn)單的列子解釋觀察者模式要使用在什么地方，我也看過(guò)很多博客關(guān)于這方面的資料，但是很多人寫(xiě)博客只是講了如何實(shí)現(xiàn)觀察者模式及觀察者模式的好處，并沒(méi)有講我們什么時(shí)候該使用觀察者模式，所以我列舉了上面的列子，就是多個(gè)不同業(yè)務(wù)模塊需要相互關(guān)聯(lián)的時(shí)候，可以使用觀察者模式。就好比requireJS，seaJS，KISSY解決依賴的問(wèn)題一樣(比如A依賴于B，B依賴于C，只要一個(gè)解決入口文件，其他都會(huì)異步加載出來(lái)一樣)。也就是說(shuō)各個(gè)模塊之間的關(guān)聯(lián)性可以使用觀察者模式來(lái)設(shè)計(jì)。

代碼實(shí)現(xiàn)：在該篇博客(https://www.cnblogs.com/Lucky...。

(function(){
    var Event = {
        on: function (type, handler) {
            if (!this.handlers) {
                // this.handlers = {};    
                Object.defineProperty(this, "handlers", {
                    value: {},
                    enumerable: false,  // important 避免拷貝Event時(shí)污染handlers
                    configurable: true,
                    writable: true
                })
            }   
            if (typeof this.handlers[type] === "undefined") {
                this.handlers[type] = [];
            }
            this.handlers[type].push(handler);
        },
        emit: function (eventName) {
            if (this.handlers[arguments[0]] instanceof Array) {
                var handlers = this.handlers[arguments[0]];
                for (var i=0; i
可在我的github上下載上述代碼（https://github.com/ylzsmallsu...），并包含JavaScript模式中觀察者模式例子。
此外，觀察者模式還可用于實(shí)現(xiàn)數(shù)據(jù)綁定。
思想：使用數(shù)據(jù)特性來(lái)為 HTML 代碼進(jìn)行綁定，所有被綁定在一起的 JavaScript 對(duì)象和 DOM 元素都會(huì)訂閱一個(gè) PubSub 對(duì)象。只要 JavaScript 對(duì)象或者一個(gè) HTML 輸入元素監(jiān)聽(tīng)到數(shù)據(jù)的變化時(shí)，就會(huì)觸發(fā)綁定到 PubSub 對(duì)象上的事件，從而其他綁定的對(duì)象和元素都會(huì)做出相應(yīng)的變化。
參考文章

談?wù)凧S的觀察者模式（自定義事件）：https://www.cnblogs.com/Lucky...

數(shù)據(jù)雙向綁定的分析和簡(jiǎn)單實(shí)現(xiàn)：https://zhuanlan.zhihu.com/p/...

JavaScript 實(shí)現(xiàn)簡(jiǎn)單的雙向數(shù)據(jù)綁定（譯）：http://zqianduan.com/2016/03/...

理解javascript觀察者模式(訂閱者與發(fā)布者)：http://www.cnblogs.com/tugenh...


本篇文章主要是對(duì)查閱的幾篇文檔集中梳理，有興趣的可以翻閱以上參考文章。