這篇文章主要介紹javascript發(fā)布訂閱模式的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10余年的康巴什網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整康巴什建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“康巴什網(wǎng)站設(shè)計(jì)”,“康巴什網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

發(fā)布訂閱模式

事件發(fā)布/訂閱模式 (PubSub) 在異步編程中幫助我們完成更松的解耦，甚至在 MVC、MVVC 的架構(gòu)中以及設(shè)計(jì)模式中也少不了發(fā)布-訂閱模式的參與。

優(yōu)點(diǎn)：在異步編程中實(shí)現(xiàn)更深的解耦

缺點(diǎn)：如果過多的使用發(fā)布訂閱模式，會(huì)增加維護(hù)的難度

實(shí)現(xiàn)發(fā)布訂閱模式

var Event = function() {
    this.obj = {}
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
}

Event.prototype.emit = function() {
    // 取第一個(gè)參數(shù)，作為eventType
    var eventType = Array.prototype.shift.call(arguments);
    //  獲取事件數(shù)組
    var arr = this.obj[eventType];
    var len = arr.length;
    // 循環(huán)數(shù)組，一次執(zhí)行其中的函數(shù)
    for(var i=0;i
以上代碼只能實(shí)現(xiàn)先訂閱，再發(fā)布。直接發(fā)布就會(huì)報(bào)錯(cuò)。如何實(shí)現(xiàn)可以先發(fā)布，然后訂閱？
var Event = function() {
    this.obj = {}；
    this.cacheList = [];
}

Event.prototype.emit = function() {
    const args = arguments;  //函數(shù)參數(shù)
    const that = this;  //this指向,保持cache函數(shù)的this指向
    function cache() {
        var eventType = Array.prototype.shift.call(arg)
        var arr = that.obj[eventType]
        for (let i = 0; i < arr.length; i++) {
          arr[i].apply(arr[i], arg)
        }
    }
    this.cacheList.push(cache)  // 采用閉包，保持對emit函數(shù)中參數(shù)和that的引用
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
    // 在訂閱函數(shù)中執(zhí)行emit函數(shù)中緩存的函數(shù)
    for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]()
    }
}
改成這樣后就實(shí)現(xiàn)了先發(fā)布函數(shù)，再訂閱的過程。但是也只能先發(fā)布，然后再訂閱，反過來就行不通。
以上是“javascript發(fā)布訂閱模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            本文標(biāo)題：javascript發(fā)布訂閱模式的示例分析            

            當(dāng)前URL：http://weahome.cn/article/gjeohh.html