摘要：發(fā)布者的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的訂閱者，使得它們能夠自動(dòng)更新自己。觀(guān)察者模式的中心思想就是促進(jìn)松散耦合，一為時(shí)間上的解耦，二為對(duì)象之間的解耦。參考設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐第章發(fā)布訂閱模式設(shè)計(jì)模式第章第節(jié)觀(guān)察者模式

觀(guān)察者模式又叫發(fā)布 - 訂閱模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀(guān)察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)目標(biāo)對(duì)象（為了方便理解，以下將觀(guān)察者對(duì)象叫做訂閱者，將目標(biāo)對(duì)象叫做發(fā)布者）。發(fā)布者的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的訂閱者，使得它們能夠自動(dòng)更新自己。

觀(guān)察者模式的使用場(chǎng)合就是：當(dāng)一個(gè)對(duì)象的改變需要同時(shí)改變其它對(duì)象，并且它不知道具體有多少對(duì)象需要改變的時(shí)候，就應(yīng)該考慮使用觀(guān)察者模式。

觀(guān)察者模式的中心思想就是促進(jìn)松散耦合，一為時(shí)間上的解耦，二為對(duì)象之間的解耦。讓耦合的雙方都依賴(lài)于抽象，而不是依賴(lài)于具體，從而使得各自的變化都不會(huì)影響到另一邊的變化。

(function (window, undefined) {
    var _subscribe = null,
        _publish = null,
        _unsubscribe = null,
        _shift = Array.prototype.shift, // 刪除數(shù)組的第一個(gè) 元素，并返回這個(gè)元素
        _unshift = Array.prototype.unshift, // 在數(shù)組的開(kāi)頭添加一個(gè)或者多個(gè)元素，并返回?cái)?shù)組新的length值
        namespaceCache = {},
        _create = null,
        each = function (ary, fn) {
            var ret = null;
            for (var i = 0, len = ary.length; i < len; i++) {
                var n = ary[i];
                ret = fn.call(n, i, n);
            }
            return ret;
        };

    // 訂閱消息
    _subscribe = function (key, fn, cache) {
        if (!cache[key]) {
            cache[key] = [];
        }
        cache[key].push(fn);
    };

    // 取消訂閱（取消全部或者指定消息）
    _unsubscribe = function (key, cache, fn) {
        if (cache[key]) {
            if (fn) {
                for (var i = cache[key].length; i >= 0; i--) {
                    if (cache[key][i] === fn) {
                        cache[key].splice(i, 1);
                    }
                }
            } else {
                cache[key] = [];
            }
        }
    };

    // 發(fā)布消息
    _publish = function () {
        var cache = _shift.call(arguments),
            key = _shift.call(arguments),
            args = arguments,
            _self = this,
            ret = null,
            stack = cache[key];

        if (!stack || !stack.length) {
            return;
        }

        return each(stack, function () {
            return this.apply(_self, args);
        });
    };

    // 創(chuàng)建命名空間
    _create = function (namespace) {
        var namespace = namespace || "default";
        var cache = {},
            offlineStack = {},    // 離線(xiàn)事件，用于先發(fā)布后訂閱，只執(zhí)行一次
            ret = {
                subscribe: function (key, fn, last) {
                    _subscribe(key, fn, cache);
                    if (!offlineStack[key]) {
                        offlineStack[key] = null;
                        return;
                    }
                    if (last === "last") { // 指定執(zhí)行離線(xiàn)隊(duì)列的最后一個(gè)函數(shù)，執(zhí)行完成之后刪除
                        offlineStack[key].length && offlineStack[key].pop()();  // [].pop => 刪除一個(gè)數(shù)組中的最后的一個(gè)元素，并且返回這個(gè)元素
                    } else {
                        each(offlineStack[key], function () {
                            this();
                        });
                    }
                    offlineStack[key] = null;
                },
                one: function (key, fn, last) {
                    _unsubscribe(key, cache);
                    this.subscribe(key, fn, last);
                },
                unsubscribe: function (key, fn) {
                    _unsubscribe(key, cache, fn);
                },
                publish: function () {
                    var fn = null,
                        args = null,
                        key = _shift.call(arguments),
                        _self = this;

                    _unshift.call(arguments, cache, key);
                    args = arguments;
                    fn = function () {
                        return _publish.apply(_self, args);
                    };

                    if (offlineStack && offlineStack[key] === undefined) {
                        offlineStack[key] = [];
                        return offlineStack[key].push(fn);
                    }
                    return fn();
                }
            };

        return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
    };

    window.pubsub = {
        create: _create, // 創(chuàng)建命名空間
        one: function (key, fn, last) { // 訂閱消息，只能單一對(duì)象訂閱
            var pubsub = this.create();
            pubsub.one(key, fn, last);
        },
        subscribe: function (key, fn, last) { // 訂閱消息，可多對(duì)象同時(shí)訂閱
            var pubsub = this.create();
            pubsub.subscribe(key, fn, last);
        },
        unsubscribe: function (key, fn) { // 取消訂閱，（取消全部或指定消息）
            var pubsub = this.create();
            pubsub.unsubscribe(key, fn);
        },
        publish: function () { // 發(fā)布消息
            var pubsub = this.create();
            pubsub.publish.apply(this, arguments);
        }
    };
})(window, undefined);

假如我們正在開(kāi)發(fā)一個(gè)商城網(wǎng)站，網(wǎng)站里有header頭部、nav導(dǎo)航、消息列表、購(gòu)物車(chē)等模塊。這幾個(gè)模塊的渲染有一個(gè)共同的前提條件，就是必須先用ajax異步請(qǐng)求獲取用戶(hù)的登錄信息。

至于ajax請(qǐng)求什么時(shí)候能成功返回用戶(hù)信息，這點(diǎn)我們沒(méi)有辦法確定。更重要的一點(diǎn)是，我們不知道除了header頭部、nav導(dǎo)航、消息列表、購(gòu)物車(chē)之外，將來(lái)還有哪些模塊需要使用這些用戶(hù)信息。如果它們和用戶(hù)信息模塊產(chǎn)生了強(qiáng)耦合，比如下面這樣的形式：

login.succ(function (data) {
    header.setAvatar(data.avatar); // 設(shè)置header模塊的頭像
    nav.setAvatar(data.avatar); // 設(shè)置導(dǎo)航模塊的頭像
    message.refresh(); // 刷新消息列表
    cart.refresh(); // 刷新購(gòu)物車(chē)列表
});

現(xiàn)在登錄模塊是由你負(fù)責(zé)編寫(xiě)的，但我們還必須了解header模塊里設(shè)置頭像的方法叫setAvatar、購(gòu)物車(chē)模塊里刷新的方法叫refresh，這種耦合性會(huì)使程序變得僵硬，header模塊不能隨意再改變setAvatar的方法名。這是針對(duì)具體實(shí)現(xiàn)編程的典型例子，針對(duì)具體實(shí)現(xiàn)編程是不被贊同的。

等到有一天，項(xiàng)目中又新增了一個(gè)收貨地址管理的模塊，這個(gè)模塊是由另一個(gè)同事所寫(xiě)的，此時(shí)他就必須找到你，讓你登錄之后刷新一下收貨地址列表。于是你又翻開(kāi)你3個(gè)月前寫(xiě)的登錄模塊，在最后部分加上這行代碼：

login.succ(function (data) {
    header.setAvatar(data.avatar);
    nav.setAvatar(data.avatar);
    message.refresh();
    cart.refresh();
    address.refresh(); // 增加這行代碼
});

我們就會(huì)越來(lái)越疲于應(yīng)付這些突如其來(lái)的業(yè)務(wù)要求，不停地重構(gòu)這些代碼。

用觀(guān)察者模式重寫(xiě)之后，對(duì)用戶(hù)信息感興趣的業(yè)務(wù)模塊將自行訂閱登錄成功的消息事件。當(dāng)?shù)卿洺晒r(shí)，登錄模塊只需要發(fā)布登錄成功的消息，而業(yè)務(wù)方接受到消息之后，就會(huì)開(kāi)始進(jìn)行各自的業(yè)務(wù)處理，登錄模塊并不關(guān)心業(yè)務(wù)方究竟要做什么，也不想去了解它們的內(nèi)部細(xì)節(jié)。改善后的代碼如下：

$.ajax("http:// xxx.com?login", function(data) { // 登錄成功
    pubsub.publish("loginSucc", data); // 發(fā)布登錄成功的消息
});

// 各模塊監(jiān)聽(tīng)登錄成功的消息：

var header = (function () { // header模塊
    pubsub.subscribe("loginSucc", function(data) {
        header.setAvatar(data.avatar);
    });
    return {
        setAvatar: function(data){
            console.log("設(shè)置header模塊的頭像");
        }
    };
})();

var nav = (function () { // nav模塊
    pubsub.subscribe("loginSucc", function(data) {
        nav.setAvatar(data.avatar);
    });
    return {
        setAvatar: function(avatar) {
            console.log("設(shè)置nav模塊的頭像");
        }
    };
})();

如上所述，我們隨時(shí)可以把setAvatar的方法名改成setTouxiang。如果有一天在登錄完成之后，又增加一個(gè)刷新收貨地址列表的行為，那么只要在收貨地址模塊里加上監(jiān)聽(tīng)消息的方法即可，而這可以讓開(kāi)發(fā)該模塊的同事自己完成，你作為登錄模塊的開(kāi)發(fā)者，永遠(yuǎn)不用再關(guān)心這些行為了。代碼如下：

var address = (function () { // 地址模塊
    pubsub.subscribe("loginSucc", function(obj) {
        address.refresh(obj);
    });
    return {
        refresh: function(avatar) {
            console.log("刷新收貨地址列表");
        }
    };
})();

支持簡(jiǎn)單的廣播通信，自動(dòng)通知所有已經(jīng)訂閱過(guò)的對(duì)象；

頁(yè)面載入后發(fā)布者很容易與訂閱者存在一種動(dòng)態(tài)關(guān)聯(lián)，增加了靈活性；

發(fā)布者與訂閱者之間的抽象耦合關(guān)系能夠多帶帶擴(kuò)展以及重用。

創(chuàng)建訂閱者本身要消耗一定的時(shí)間和內(nèi)存，而且當(dāng)你訂閱一個(gè)消息后，也許此消息最后都未發(fā)生，但這個(gè)訂閱者會(huì)始終存在于內(nèi)存中；

雖然可以弱化對(duì)象之間的聯(lián)系，但如果過(guò)度使用的話(huà)，對(duì)象和對(duì)象之間的必要聯(lián)系也將被深埋在背后，會(huì)導(dǎo)致程序難以跟蹤維護(hù)和理解。

《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》 第 8 章 發(fā)布—訂閱模式

《JavaScript設(shè)計(jì)模式》 第 9 章 第 5 節(jié) Observer（觀(guān)察者）模式

http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html