国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript設(shè)計模式之發(fā)布-訂閱模式(觀察者模式)-Part2

Charlie_Jade / 1079人閱讀

摘要:設(shè)計模式與開發(fā)實(shí)踐讀書筆記。看此文章前,建議先看設(shè)計模式之發(fā)布訂閱模式觀察者模式在中,已經(jīng)介紹了什么是發(fā)布訂閱模式,同時,也實(shí)現(xiàn)了發(fā)布訂閱模式。

《JavaScript設(shè)計模式與開發(fā)實(shí)踐》讀書筆記。

看此文章前,建議先看JavaScript設(shè)計模式之發(fā)布-訂閱模式(觀察者模式)-Part1

在Part1中,已經(jīng)介紹了什么是發(fā)布-訂閱模式,同時,也實(shí)現(xiàn)了發(fā)布-訂閱模式。但是,就Part1中實(shí)現(xiàn)的例子來說,還是存在了兩個小問題:

我們給每個發(fā)布者對象都添加了listen和trigger方法,以及一個緩存列表clientList,這其實(shí)是一種資源的浪費(fèi)。

訂閱者與發(fā)布者之間存在一定的耦合性,訂閱者至少要知道發(fā)布者對象的名字,才能順利訂閱。如下:

// 張三訂閱問題A, sgQuestionSystem是發(fā)布者的對象(問題系統(tǒng))
sgQuestionSystem.listen("questionA", 3, function(questionTitle, content) {
    console.log("張三您在早前訂閱了問題:questionA");
    console.log("現(xiàn)" + questionTitle + "有了新動態(tài)");
    console.log("內(nèi)容為:" + content);
});

如果張三還對其它東西感興趣,而發(fā)布者又不是同一個,那么,這意味著張三需要再對另一個發(fā)布者對象進(jìn)行訂閱。如下:

// 張三訂閱文章A動態(tài), sgArticleSystem是發(fā)布者的對象(文章系統(tǒng))
sgArticleSystem.listen("articleA", 3, function(articleTitle, content) { 
    console.log("張三您在早前訂閱了文章:articleA");
    console.log("現(xiàn)" + articleTitle+ "有了新動態(tài)");
    console.log("內(nèi)容為:" + content);
});

全局的發(fā)布-訂閱對象

相信大家都知道什么是中介公司吧,在現(xiàn)實(shí)生活中,我們只要把訂閱的請求交給中介公司,而各大發(fā)布者也只需要通過中介公司來發(fā)布信息。這樣一來,我們就無需關(guān)心消息是哪個發(fā)布者發(fā)布的,我們只需關(guān)心是否能順利收到消息。當(dāng)然,訂閱者與發(fā)布者都需要知道這個中介公司。

同樣,在程序中,我們可以用一個全局的 Event 對象來實(shí)現(xiàn)中介公司的作用。Event作為一個消息中心,把訂閱者和發(fā)布者聯(lián)系起來。見如下代碼:

var Event = (function(){
    var clientList = {}, // 緩存列表
        listen,
        trigger,
        remove;
    
    listen = function(key, id, fn){
        if(!clientList[key]){
            clientList[key] = [];    // 初始化
        }
        clientList[key].push({      // 將訂閱的id, 回調(diào)函數(shù)添加到對應(yīng)的消息列表里
            id: id,                         
            fn: fn                          
        });
    };
    
    trigger = function() {
        var key = Array.prototype.shift.call(arguments),
            fns = clientList[key];
        if(!fns || fns.length == 0) {
            return false;
        }
        for(var i = 0; i < fns.length; i++) {
            fns[i].fn.apply(this, arguments);
        }
    };
    
    remove = function(key, id) {
        var fns = clientList[key];
        
        if(!fns) {                // 如果key對應(yīng)的消息沒人訂閱,直接返回
            return false;
        }
        
        if(!id) {           // 如果沒傳具體的唯一標(biāo)識,則取消key的所有對應(yīng)消息
            fns && (fns.length = 0);
        } else {
            for(var l = fns.length - 1; l >=0; l--) {
                var _id = fns[l].id;
                if(_id == id) {
                    fns.splice(l, 1);    // 刪除訂閱者的回調(diào)函數(shù)
                }
            }
        }
    };
    
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen("questA", 1, function(content) {
    console.log("內(nèi)容為:" + content);
});

Event.trigger("questA", "王五回答了該問題");

必須先訂閱再發(fā)布嗎?

我們所了解的發(fā)布-訂閱模式,都是訂閱者必須先訂閱一個消息,隨后才能接收到發(fā)布者發(fā)布的消息。如果把順序反過來,發(fā)布者先發(fā)布一個消息,而在此之前并沒有對象來訂閱它,那么這條消息就消失在宇宙中了。

而在實(shí)際項(xiàng)目在,先發(fā)布后訂閱是存在的。例如在商城網(wǎng)站中,獲取到用戶信息之后才能渲染用戶導(dǎo)航模塊,而獲取用戶信息的操作是一個異步請求。當(dāng)請求成功返回之后才能發(fā)布一個事件,在此之前訂閱了此事件的用戶導(dǎo)航模塊才能接收到這個信息。

然而,因?yàn)楫惒降脑颍覀儾荒鼙WCajax請求的事件,可能用戶的導(dǎo)航模塊還沒加載好(即還沒訂閱消息),請求就返回(即發(fā)布消息)。因此,我們需要讓我們的發(fā)布-訂閱對象擁有先發(fā)布-后訂閱的能力。

具體的實(shí)現(xiàn)請看后續(xù)最終代碼。

全局事件的命名沖突

全局的發(fā)布-訂閱對象里只有一個clientList來存放消息名和回調(diào)函數(shù),大家都通過它來訂閱-發(fā)布各種消息,久而久之,難免會出現(xiàn)事件名沖突,所以我們還可以給Event對象提供創(chuàng)建命名空間的功能。

最終代碼如下:

var Event = (function(){
    var global = this,
        Event,
        _default = "default";
   
    Event = function(){
        var _listen,
            _trigger,
            _remove,
            _slice = Array.prototype.slice,
            _shift = Array.prototype.shift,
            _unshift = Array.prototype.unshift,
            namespaceCache = {},
            _creat,
            find,
            each = function(ary, fn){
                var ret;
                for(var i = 0, l = ary.length; i < l; i++) {
                    var n = ary[i];
                    ret = fn.call(n, i, n);
                }
                return ret;
            };
            
            _listen = function(key, fn, cache) {
                if(!cache[key]) {
                    cache[key] = [];
                }
                cache[key].push(fn);
            };
            
            _remove = 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 {    // 若沒有fn,表示全部清空
                        cache[key] = [];
                    }    
                }
            };
            
            _trigger = function() {
                var cache = _shift.call(arguments),
                      key = _shift.call(arguments),
                      args = arguments,
                      _self= this,
                      ret,
                      stack = cache[key];
                 
                 if(!stack || !stack.length) {
                     return;
                 }
                 
                 return each(stack, function(){
                     return this.apply(_self, args);
                 })
            };
            
            _create = function(namespace) {
                var namespace = namespace || _default;
                var cache = {},
                    offlineStack = [],
                    ret = {
                        listen: function(key, fn, last) {
                            _listen(key, fn, cache);
                            if(offlineStack == null) {
                                return;
                            }
                            if(last == "last") {
                                offlineStack.length && offlineStack.pop()();
                            } else {
                                each(offlineStack, function() {
                                    this();
                                });
                            }
                            offlineStack = null;
                        },
                        one: function(key, fn, last) {
                            _remove(key, cache);
                            this.listen(key, fn, last);
                        },
                        remove: function(key, fn) {
                            _remove(key, cache, fn);
                        },
                        trigger: function() {
                            var fn,
                                args,
                                _self = this;
                            
                             _unshift.call(arguments, cache);
                             args = arguments;
                             fn = function() {
                                 return _trigger.apply(_self, args);
                             };
                             if(offlineStack) {
                                 return offlineStack.push(fn);
                             }
                             return fn();
                        }
                    };
                    
                    return namespace? (namespaceCache[namespace] ? namespaceCache[namespace]: namespaceCache[namespace] = ret) : ret;
            };
            return {
                create: _create,
                one: function(key, fn, last) {
                    var event = this.create();
                    event.one(key, fn, last);
                },
                remove: function(key, fn){
                    var event = this.create();
                    event.one(key, fn);
                },
                listen: function(key, fn, last){
                    var event = this.create();
                    event.listen(key, fn, last);
                },
                trigger: function(){
                    var event = this.create();
                    event.trigger.apply(this, arguments);
                }
            };
            
    }();
    return Event;
})();

/********** 先發(fā)布后訂閱 ***********/
Event.trigger("click", 1);
Event.listen("click", function(a){
    console.log(a)
});

/********** 使用命名空間 ***********/
Event.create("namespace1").listen("click", function(a){ 
    console.log(a);
});
Event.create("namespace1").trigger("click", 1);

附:
JavaScript數(shù)據(jù)結(jié)構(gòu)和算法系列:
JS 棧
JS 隊(duì)列-優(yōu)先隊(duì)列、循環(huán)隊(duì)列

JavaScript設(shè)計模式系列:
JavaScript設(shè)計模式之策略模式

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81229.html

相關(guān)文章

  • JavaScript設(shè)計模式發(fā)布-訂閱模式察者模式)-Part2

    摘要:設(shè)計模式與開發(fā)實(shí)踐讀書筆記。看此文章前,建議先看設(shè)計模式之發(fā)布訂閱模式觀察者模式在中,已經(jīng)介紹了什么是發(fā)布訂閱模式,同時,也實(shí)現(xiàn)了發(fā)布訂閱模式。 《JavaScript設(shè)計模式與開發(fā)實(shí)踐》讀書筆記。 看此文章前,建議先看JavaScript設(shè)計模式之發(fā)布-訂閱模式(觀察者模式)-Part1 在Part1中,已經(jīng)介紹了什么是發(fā)布-訂閱模式,同時,也實(shí)現(xiàn)了發(fā)布-訂閱模式。但是,就Part1...

    chemzqm 評論0 收藏0
  • JavaScript設(shè)計模式發(fā)布-訂閱模式察者模式)-Part1

    摘要:設(shè)計模式與開發(fā)實(shí)踐讀書筆記。發(fā)布訂閱模式又叫觀察者模式,它定義了對象之間的一種一對多的依賴關(guān)系。附設(shè)計模式之發(fā)布訂閱模式觀察者模式數(shù)據(jù)結(jié)構(gòu)和算法系列棧隊(duì)列優(yōu)先隊(duì)列循環(huán)隊(duì)列設(shè)計模式系列設(shè)計模式之策略模式 《JavaScript設(shè)計模式與開發(fā)實(shí)踐》讀書筆記。 發(fā)布-訂閱模式又叫觀察者模式,它定義了對象之間的一種一對多的依賴關(guān)系。當(dāng)一個對象的狀態(tài)發(fā)生改變時,所有依賴它的對象都將得到通知。 例...

    muzhuyu 評論0 收藏0
  • 設(shè)計模式察者發(fā)布/訂閱模式

    摘要:發(fā)布訂閱模式又叫觀察者模式,它定義對象間的一種一對多的依賴關(guān)系。事件觀察者模式應(yīng)該是最常用的模式之一。總之,當(dāng)消息一發(fā)布,所有的訂閱者都會收到消息。發(fā)布訂閱模式還可以用來幫助實(shí)現(xiàn)一些別的設(shè)計模式,比如中介者模式。 發(fā)布/訂閱模式又叫觀察者模式,它定義對象間的一種一對多的依賴關(guān)系。當(dāng)一個對象的狀態(tài)(發(fā)布者)發(fā)生改變時,所有依賴于它的對象都將得到通知。在 JavaScript 開發(fā)中,我們...

    dreamGong 評論0 收藏0

發(fā)表評論

0條評論

Charlie_Jade

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<