JavaScript - 觀察者模式

什麼是觀察者模式？

　　這是一種建立鬆散耦合代碼的技術。它定義對象間 一種一對多的依賴關係，當一個對象的狀態發生改變時，全部依賴於它的對象都將獲得通知。由主體和觀察者組成，主體負責發佈事件，同時觀察者經過訂閱這些事件來觀察該主體。主體並不知道觀察者的任何事情，觀察者知道主體並能註冊事件的回調函數。

觀察者的兩個要素

　　觀察者模式最重要的兩個要素是：發佈者、訂閱者（觀察者），發佈者發送消息，訂閱者訂閱/刪除特定消息並接受發佈者發送的消息。

發佈-訂閱模式的模式簡單實現

小明最近看上了一套房子，到了售樓處以後才被告知，該樓盤的房子早已售罄。好在售樓MM告訴小明，不久後還有一些尾盤推出，開發商正在辦理相關手續，手續辦好後就能夠購買。

// 定義售樓處
var salesOffices = {};
// 定義客戶花名冊
salesOffices.clientList = [];
// 定義訂閱方法
salesOffices.listen = function (key, fn) {
    // 花名冊登記哪些客戶訂閱哪些信息（根據key來區分）
    if (!this.clientList[key]) {
        this.clientList[key] = [];
    }
    this.clientList[key].push(fn);
}
salesOffices.trigger = function () {
    // 獲取key,獲取第一個參數
    var key = Array.prototype.shift.call(arguments);
    var fns = this.clientList[key];
    if (!fns || fns.length === 0) {
        return false;
    }
    for (var i = 0, fn; fn = fns[i++];) {
        fn.apply(this, arguments);
    }
}

// 小明定於88平米的樓盤
salesOffices.listen('squareMeter88', function (price) {
    console.log('price=' + price);
});
// 小紅定於100平米的樓盤
salesOffices.listen('squareMeter100', function (price) {
    console.log('price=' + price);
});

// 售樓處發佈樓盤信息
salesOffices.trigger('squareMeter88', 2000000);
salesOffices.trigger('squareMeter100', 3000000);

使用觀察者模式的好處：

1. 支持簡單的廣播通訊，自動通知全部已經訂閱過的對象。
2. 頁面載入後目標對象很容易與觀察者存在一種動態關聯，增長了靈活性。
3. 目標對象與觀察者之間的抽象耦合關係可以單獨擴展以及重用。