快捷導(dǎo)航

javascript 發(fā)布-訂閱模式實(shí)例詳解

更新時間：2023年06月28日 09:06:24 作者：flying_huixia

這篇文章主要介紹了javascript 發(fā)布-訂閱模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript發(fā)布-訂閱模式基本功能、原理、實(shí)現(xiàn)方法與相關(guān)使用技巧,需要的朋友可以參考下

一、核心概述

發(fā)布訂閱模式主要包含三大塊：緩存數(shù)組、訂閱、發(fā)布

緩存數(shù)組	一個數(shù)組[]
訂閱	往數(shù)組里面壓入函數(shù)fn
發(fā)布	里面循環(huán)遍歷數(shù)組，然后執(zhí)行數(shù)組中的函數(shù)。

二、簡單代碼實(shí)現(xiàn)及改進(jìn)

（1）實(shí)現(xiàn)

  var subpub = {};
  subpub.cache = [];
  subpub.subscribe = function(fn){
       this.cache.push(fn)
  }
  subpub.publish = function(){
  for(var i in this.cache){
         this.cache[i].apply(this,arguments)
       }
  }
   //test
   subpub.subscribe(function(price,square){
         console.log("price:"+price)
         console.log(square)
   })
   subpub.publish(200,102);
   subpub.publish(300,153)

（2）改進(jìn) --- 主要針對訂閱者不需要接收到所有的發(fā)布事件---key

 var subpub = {};
        subpub.cache = {}; //是一個數(shù)組對象
        subpub.subscribe = function (key, fn) {
            if (!this.cache[key]) { //訂閱的事情在緩存里面沒有，則添加到緩存
                this.cache[key] = [];
            }
            this.cache[key].push(fn);
        }
        subpub.publish = function () {
            //傳入?yún)?shù)的第一個是指訂閱的類型
            var key =  Array.prototype.splice.apply(arguments,[0,1]);
            for (var i in this.cache[key]) {
                this.cache[key][i].apply(this, arguments)
            }
        }
        //test
        subpub.subscribe('lowPrice',function (price, square) { //A訂閱價格低于300的
            console.log("price:" + price)
            console.log(square)
        })
        subpub.subscribe('highPrice',function (price, square) { //B訂閱價格高于300的
            console.log("price:" + price)
            console.log(square)
        })
        subpub.publish('lowPrice',200, 102);
        subpub.publish('highPrice',400, 153)

取消訂閱的事件

subpub.subscribe('lowPrice', fn1 = function (price, square) { //A訂閱價格低于300的
            console.log(square)
        })
        subpub.subscribe('lowPrice', fn11 = function (price, square) { //A訂閱價格低于300的
            console.log("price1:" + price)
            console.log(square)
        })
        subpub.subscribe('highPrice', fn2 = function (price, square) { //B訂閱價格高于300的
            console.log("price:" + price)
            console.log(square)
        })
        //取消訂閱的事件
        subpub.remove = function (key, fn) {
            if (!this.cache[key]) { //如果key對應(yīng)的消息沒有被訂閱，則直接返回
                return false
            }
            if(!fn){  //如果沒有傳入fn，則移除key對應(yīng)的所有消息
                this.cache[key] && (this.cache[key].length=0)
            } else {
                this.cache[key] = this.cache[key].filter(function (cur, index) {
                    return cur !== fn
                })
            }
        }
        subpub.remove('lowPrice',fn1)
        subpub.publish('lowPrice', 200, 102);

取消的時候，注意區(qū)分不同情況。上述使用了filter函數(shù)用來過濾需要取消訂閱的事件

三、現(xiàn)實(shí)項(xiàng)目需求

網(wǎng)站登錄====》登錄以后需要在各處顯示客戶的信息。不能在用戶登陸后去依次調(diào)用模塊的刷新或或其他相關(guān)函數(shù)，要監(jiān)聽登錄這一次操作。

  //封裝一下
        var event = {
            cache: {},
            subscribe: function (key, fn) {
                if (!this.cache[key]) { //訂閱的事情在緩存里面沒有，則添加到緩存
                    this.cache[key] = [];
                }
                this.cache[key].push(fn);
            },
            publish: function () {
                //傳入?yún)?shù)的第一個是指訂閱的類型
                var key = Array.prototype.splice.apply(arguments, [0, 1]);
                for (var i in this.cache[key]) {
                    this.cache[key][i].apply(this, arguments)
                }
            },
            remove: function (key, fn) {
                if (!this.cache[key]) { //如果key對應(yīng)的消息沒有被訂閱，則直接返回
                    return false
                }
                if (!fn) { //如果沒有傳入fn，則移除key對應(yīng)的所有消息
                    this.cache[key] && (this.cache[key].length = 0)
                } else {
                    this.cache[key] = this.cache[key].filter(function (cur, index) {
                        return cur !== fn
                    })
                }
            }
        };
        var eventForPub = function (obj) {
            for (var i in event) {
                obj[i] = event[i]
            }
        }
        var login = {};
        eventForPub(login)
        var headItem = (function () {
            login.subscribe('login', function (data) {
                headItem.setAvatar(data.avatar)
            })
            return {
                setAvatar: function (data) {
                    console.log("頭部顯示客戶信息")
                }
            }
        })();
        var buyItem = (function () {
            login.subscribe('login', function (data) {
                buyItem.setAvatar(data.avatar)
            })
            return {
                setAvatar: function (data) {
                    console.log("購物車顯示客戶信息")
                }
            }
        })();
        var data={avatar:'qqqq'}
        login.publish('login',data);

運(yùn)行結(jié)果如下：