JavaScript：設計模式之觀察者模式

JavaScript：設計模式之觀察者模式
介紹

觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。

使用觀察者模式的好處：

1. 支援簡單的廣播通訊，自動通知所有已經訂閱過的對象。
2. 頁面載入後目標對象很容易與觀察者存在一種動態關聯，增加了靈活性。
3. 目標對象與觀察者之間的抽象耦合關係能夠單獨擴充以及重用。本文（版本一）

   JS裡對觀察者模式的實現是通過回調來實現的，我們來先定義一個pubsub對象，其內部包含了3個方法：訂閱、退訂、發布。

   var pubsub = {};(function (q) {    var topics = {}, // 回呼函數存放的數組        subUid = -1;    // 發布方法    q.publish = function (topic, args) {        if (!topics[topic]) {            return false;        }        setTimeout(function () {            var subscribers = topics[topic],                len = subscribers ? subscribers.length : 0;            while (len--) {                subscribers[len].func(topic, args);            }        }, 0);        return true;    };    //訂閱者法    q.subscribe = function (topic, func) {        if (!topics[topic]) {            topics[topic] = [];        }        var token = (++subUid).toString();        topics[topic].push({            token: token,            func: func        });        return token;    };    //退訂方法    q.unsubscribe = function (token) {        for (var m in topics) {            if (topics[m]) {                for (var i = 0, j = topics[m].length; i < j; i++) {                    if (topics[m][i].token === token) {                        topics[m].splice(i, 1);                        return token;                    }                }            }        }        return false;    };} (pubsub));

   使用方式如下：

   //來，訂閱一個pubsub.subscribe('example1', function (topics, data) {    console.log(topics + :  + data);});//發布通知pubsub.publish('example1', 'hello world!');pubsub.publish('example1', ['test', 'a', 'b', 'c']);pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

   怎麼樣？用起來是不是很爽？但是這種方式有個問題，就是沒辦法退訂訂閱，要退訂的話必須指定退訂的名稱，所以我們再來一個版本：

   //將訂閱賦值給一個變數，以便退訂var testSubscription = pubsub.subscribe('example1', function (topics, data) {    console.log(topics + :  + data);});//發布通知pubsub.publish('example1', 'hello world!');pubsub.publish('example1', ['test', 'a', 'b', 'c']);pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);//退訂setTimeout(function () {    pubsub.unsubscribe(testSubscription);}, 0);//再發布一次，驗證一下是否還能夠輸出資訊pubsub.publish('example1', 'hello again! (this will fail)');

   版本二

   我們也可以利用原型的特性實現一個觀察者模式，代碼如下：

   function Observer() {    this.fns = [];}Observer.prototype = {    subscribe: function (fn) {        this.fns.push(fn);    },    unsubscribe: function (fn) {        this.fns = this.fns.filter(                        function (el) {                            if (el !== fn) {                                return el;                            }                        }                    );    },    update: function (o, thisObj) {        var scope = thisObj || window;        this.fns.forEach(                        function (el) {                            el.call(scope, o);                        }                    );    }};//測試var o = new Observer;var f1 = function (data) {    console.log('Robbin: ' + data + ', 趕緊幹活了！');};var f2 = function (data) {    console.log('Randall: ' + data + ', 找他加點工資去！');};o.subscribe(f1);o.subscribe(f2);o.update(Tom回來了！)//退訂f1o.unsubscribe(f1);//再來驗證o.update(Tom回來了！);   

   如果提示找不到filter或者forEach函數，可能是因為你的瀏覽器還不夠新，暫時不支援新標準的函數，你可以使用如下方式自己定義：

   if (!Array.prototype.forEach) {    Array.prototype.forEach = function (fn, thisObj) {        var scope = thisObj || window;        for (var i = 0, j = this.length; i < j; ++i) {            fn.call(scope, this[i], i, this);        }    };}if (!Array.prototype.filter) {    Array.prototype.filter = function (fn, thisObj) {        var scope = thisObj || window;        var a = [];        for (var i = 0, j = this.length; i < j; ++i) {            if (!fn.call(scope, this[i], i, this)) {                continue;            }            a.push(this[i]);        }        return a;    };}

   版本三

   如果想讓多個對象都具有觀察者發布訂閱的功能，我們可以定義一個通用的函數，然後將該函數的功能應用到需要觀察者功能的對象上，代碼如下：

   //通用代碼var observer = {    //訂閱    addSubscriber: function (callback) {        this.subscribers[this.subscribers.length] = callback;    },    //退訂    removeSubscriber: function (callback) {        for (var i = 0; i < this.subscribers.length; i++) {            if (this.subscribers[i] === callback) {                delete (this.subscribers[i]);            }        }    },    //發布    publish: function (what) {        for (var i = 0; i < this.subscribers.length; i++) {            if (typeof this.subscribers[i] === 'function') {                this.subscribers[i](what);            }        }    },    // 將對象o具有觀察者功能    make: function (o) {         for (var i in this) {            o[i] = this[i];            o.subscribers = [];        }    }};

   然後訂閱2個對象blogger和user，使用observer.make方法將這2個對象具有觀察者功能，代碼如下：

   var blogger = {    recommend: function (id) {        var msg = 'dudu 推薦了的文章:' + id;        this.publish(msg);    }};var user = {    vote: function (id) {        var msg = '有人投票了!ID=' + id;        this.publish(msg);    }};observer.make(blogger);observer.make(user);

   使用方法就比較簡單了，訂閱不同的回呼函數，以便可以註冊到不同的觀察者對象裡（也可以同時註冊到多個觀察者對象裡）：

   var tom = {    read: function (what) {        console.log('Tom看到了如下資訊：' + what)    }};var mm = {    show: function (what) {        console.log('mm看到了如下資訊：' + what)    }};// 訂閱blogger.addSubscriber(tom.read);blogger.addSubscriber(mm.show);blogger.recommend(123); //調用發布//退訂blogger.removeSubscriber(mm.show);blogger.recommend(456); //調用發布//另外一個對象的訂閱user.addSubscriber(mm.show);user.vote(789); //調用發布

   jQuery版本

   根據jQuery1.7版新增的on/off功能，我們也可以定義jQuery版的觀察者：

   (function ($) {    var o = $({});    $.subscribe = function () {        o.on.apply(o, arguments);    };    $.unsubscribe = function () {        o.off.apply(o, arguments);    };    $.publish = function () {        o.trigger.apply(o, arguments);    };} (jQuery));

   調用方法比上面3個版本都簡單：

   //回呼函數function handle(e, a, b, c) {    // `e`是事件對象，不需要關注    console.log(a + b + c);};//訂閱$.subscribe(/some/topic, handle);//發布$.publish(/some/topic, [a, b, c]); // 輸出abc        $.unsubscribe(/some/topic, handle); // 退訂//訂閱$.subscribe(/some/topic, function (e, a, b, c) {    console.log(a + b + c);});$.publish(/some/topic, [a, b, c]); // 輸出abc//退訂（退訂使用的是/some/topic名稱，而不是回呼函數哦，和版本一的例子不一樣$.unsubscribe(/some/topic); 

   可以看到，他的訂閱和退訂使用的是字串名稱，而不是回呼函數名稱，所以即便傳入的是匿名函數，我們也是可以退訂的。

   總結

   觀察者的使用場合就是：當一個對象的改變需要同時改變其它對象，並且它不知道具體有多少對象需要改變的時候，就應該考慮使用觀察者模式。

   總的來說，觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴於抽象，而不是依賴於具體。從而使得各自的變化都不會影響到另一邊的變化。