JavaScript設計模式-- 觀察者(Observer)模式(又稱: 訂閱模式)

定義: 為一對多關係。也就是讓多個觀察者能同時監聽某一主題物件。一旦這個主題物件狀態有改變, 就馬上通知觀察者。最顯著的例子就是JavaScript的事件。

e.g.

var MessageCenter = {

    list: {},                                                       // 記錄有哪些用戶有訂閱事件, 以便之後送東西給用戶

    emit: function(type, message) {

        if (this.list[type]) {                             // 用字串判斷是否有"todo"或"test"屬性

            for (var i = 0; i < this.list[type].length; i++) {
                this.list[type][i](message);    // message把訊息傳入callback()

            }
        }
    },

    on: function(type, callback) {       // on這方法在做註冊的動作

        this.list[type] = this.list[type] || [];       //如已有陣列就保存目前陣列, 不然就初始化(給空陣列)
        this.list[type].push(callback);             // 用push()把callback()放入
    }

};

function User(messageCenter) {

    this.messageCenter = messageCenter;

}

User.prototype.addEvent = function(type, callback) {      // type是事件類型; callback是事件的callback()

    this.messageCenter.on(type, callback);

};

var UserA = new User(MessageCenter);

UserA.addEvent("todo", function(msg) {               // msg是取得事件發生時所傳入的參數

    console.log("UserA todo:" + msg);

});

UserA.addEvent("test", function(msg) {

    console.log("UserA test:" + msg);

});

var UserB = new User(MessageCenter);

UserB.addEvent("todo", function(msg) {

    console.log("UserB todo:" + msg);

});

var UserC = new User(MessageCenter);

UserC.addEvent("test", function(msg) {

    console.log("UserC test:" + msg);

});


MessageCenter.emit("todo", "News");                    //"News"是要傳入的訊息內容


程式碼結果: (因UserC沒有註冊todo事件類型, 所以沒被通知)

// UserA todo:News
// UserB todo:News


p.s. 把常見的JavaScript設計模式都介紹完囉!