快捷導(dǎo)航

JavaScript中發(fā)布/訂閱模式的簡單實例

更新時間：2014年11月05日 12:01:17 投稿：junjie

這篇文章主要介紹了JavaScript中發(fā)布/訂閱模式的簡單實例,本文給出了一個簡單易懂的實現(xiàn)代碼,比較容易理解,需要的朋友可以參考下

上次研究觀察者模式，很多文章說它也叫Subscribe/Publish(發(fā)布/訂閱模式)?？稍凇禞avascript設(shè)計模式》一書中，這兩種模式還是有些區(qū)別的。書中原話如下：

1.Observer模式要求希望接收到主題通知者的觀察者必須訂閱內(nèi)容改變的事件。

2.Subscribe/Publish模式使用了一個主題/事件通道，這個通道介于訂閱者和發(fā)布者之間。該事件系統(tǒng)允許代碼定義應(yīng)用程序的特定事件，該事件可以傳遞自定義參數(shù)，自定義參數(shù)包含訂閱者所需要的值。其目的是避免訂閱者和發(fā)布者產(chǎn)生依賴關(guān)系。

與Observer模式不同之處在于它允許任何訂閱者執(zhí)行適當(dāng)?shù)氖录幚沓绦騺碜院徒邮瞻l(fā)布者發(fā)出的通知。

好吧，不明覺厲。下面是我的理解：

1.觀察者模式中，目標(biāo)對象負(fù)責(zé)維護(hù)觀察者。發(fā)布/訂閱模式中發(fā)布者不關(guān)心訂閱者，只負(fù)責(zé)把消息丟出去就不管了。

2.觀察者模式中，觀察者要提供一個接口，然后當(dāng)目標(biāo)對象發(fā)生改變時調(diào)用此接口使自身狀態(tài)和目標(biāo)狀態(tài)保持一致。即所有的觀察者都要有一個統(tǒng)一的接口(比如上文中寫的update方法，大家的方法都要叫這個名字)。而發(fā)布/訂閱模式中，訂閱者事件的觸發(fā)不是依靠這樣一個接口，而是訂閱者通過監(jiān)聽一個特定的消息(這個消息一般包含名稱和訂閱者所需要的參數(shù))來觸發(fā)的。可以理解為訂閱者監(jiān)聽的不是發(fā)布者，而是消息池，只要消息池里有它關(guān)心的消息，即觸發(fā)事件，不管這個消息是誰發(fā)布過去的。發(fā)布者和訂閱者是解耦的。

下面是js中發(fā)布/訂閱模式的實現(xiàn)，復(fù)制粘貼到console里面試一試就明白了：

復(fù)制代碼代碼如下:

var pubsub = (function(){

    var q = {}

        topics = {},

        subUid = -1;

    //發(fā)布消息

    q.publish = function(topic, args) {

        if(!topics[topic]) {return;}

        var subs = topics[topic],

            len = subs.length;

        while(len--) {

            subs[len].func(topic, args);

        }

        return this;

    };

    //訂閱事件

    q.subscribe = function(topic, func) {

        topics[topic] = topics[topic] ? topics[topic] : [];

        var token = (++subUid).toString();

        topics[topic].push({

            token : token,

            func : func

        });

        return token;

    };

    return q;

    //取消訂閱就不寫了，遍歷topics，然后通過保存前面返回token，刪除指定元素

})();

//觸發(fā)的事件

var logmsg = function(topics, data) {

    console.log("logging:" + topics + ":" + data);

}

//監(jiān)聽指定的消息'msgName'

var sub = pubsub.subscribe('msgName', logmsg);

//發(fā)布消息'msgName'

pubsub.publish('msgName', 'hello world');

//發(fā)布無人監(jiān)聽的消息'msgName1'

pubsub.publish('anotherMsgName', 'me too!');