發(fā)布訂閱模式（PubSub 以javascript的形式實(shí)現(xiàn)）

LeexMuller 發(fā)布于2019-08-26 10:41 / 1439人閱讀

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

發(fā)布訂閱模式

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

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

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

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

var Event = function() {
  this.obj = {}
}
Event.prototype.on = function(eventType,fn){
  if(!this.obj[eventType]) {
    this.obj[eventType]=[]
  }
   this.obj[eventType].push(fn) //這邊方法函數(shù)放進(jìn)去
}
Event.prototype.emit =function() {
 var eventType = Array.prototype.shift.call(arguments)
 var arr = this.obj[eventType]  //這邊方法函數(shù)取出來(lái)
 for(let i =0;i
訂閱函數(shù)邏輯一定要優(yōu)先于發(fā)布函數(shù)嗎
考慮以下場(chǎng)景:
$.ajax("", () => {
  // 異步訂閱函數(shù)邏輯
})

// 在其他地方執(zhí)行發(fā)布函數(shù), 此時(shí)并不能保證執(zhí)行發(fā)布函數(shù)的時(shí)候, 訂閱函數(shù)已經(jīng)執(zhí)行
那么就應(yīng)該這樣做
  var Event = function () {
      this.obj = {}
      this.cacheList = []
    }
    Event.prototype.on = function (eventType, fn) {
      if (!this.obj[eventType]) {
        this.obj[eventType] = []
      }
      this.obj[eventType].push(fn)
      for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]() //on中觸發(fā)cacheList里面儲(chǔ)存的函數(shù)
      }
    }
    Event.prototype.emit = function () {
      var arg = arguments
      var that = 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觸發(fā)的函數(shù)保存到cacheList中 
      //轉(zhuǎn)交給on中去觸發(fā), 從而實(shí)現(xiàn)發(fā)布函數(shù)先于訂閱函數(shù)執(zhí)行
    }
    var ev = new Event()
    ev.emit("click", 5)  //這個(gè)使用的前提是 一定是先觸發(fā)訂閱  
    //然后等待 發(fā)布函數(shù)中的cacheList[i]()方法執(zhí)行
    ev.on("click", function (a) {
      console.log(a)
    })

云服務(wù)器 GPU云服務(wù)器發(fā)布訂閱模式訂閱發(fā)布模式 DTS 訂閱發(fā)布模式以數(shù)據(jù)形式存儲(chǔ)在計(jì)算機(jī)中的信息數(shù)據(jù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106612.html

相關(guān)文章

JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐 - 觀察者模式

摘要：發(fā)布者的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有的訂閱者，使得它們能夠自動(dòng)更新自己。觀察者模式的中心思想就是促進(jìn)松散耦合，一為時(shí)間上的解耦，二為對(duì)象之間的解耦。參考設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐第章發(fā)布訂閱模式設(shè)計(jì)模式第章第節(jié)觀察者模式概述觀察者模式又叫發(fā)布 - 訂閱模式（Publish/Subscribe），它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)目標(biāo)對(duì)象（為了方便理解，以下將觀察者對(duì)象叫...

xiangzhihong 2019-08-21 17:32 評(píng)論0 收藏0
觀察者設(shè)計(jì)模式

摘要：定義觀察者設(shè)計(jì)模式中有一個(gè)對(duì)象被稱為根據(jù)觀察者維護(hù)一個(gè)對(duì)象列表，自動(dòng)通知它們對(duì)狀態(tài)的任何修改。與觀察者模式不同，它允許任何訂閱者實(shí)現(xiàn)一個(gè)適當(dāng)?shù)氖录幚沓绦騺?lái)注冊(cè)并接收發(fā)布者發(fā)布的主題通知。觀察者設(shè)計(jì)模式是一個(gè)好的設(shè)計(jì)模式，這個(gè)模式我們?cè)陂_(kāi)發(fā)中比較常見(jiàn)，尤其是它的變形模式訂閱/發(fā)布者模式我們更是很熟悉，在我們所熟悉jQuery庫(kù)和vue.js框架中我們都有體現(xiàn)。我在面試中也曾經(jīng)被問(wèn)到o...

kviccn 2019-08-21 18:32 評(píng)論0 收藏0
JavaScript 設(shè)計(jì)模式（六）：觀察者模式與發(fā)布訂閱模式

摘要：觀察者模式維護(hù)單一事件對(duì)應(yīng)多個(gè)依賴該事件的對(duì)象關(guān)系發(fā)布訂閱維護(hù)多個(gè)事件主題及依賴各事件主題的對(duì)象之間的關(guān)系觀察者模式是目標(biāo)對(duì)象直接觸發(fā)通知全部通知，觀察對(duì)象被迫接收通知。觀察者模式（Observer）觀察者模式：定義了對(duì)象間一種一對(duì)多的依賴關(guān)系，當(dāng)目標(biāo)對(duì)象 Subject 的狀態(tài)發(fā)生改變時(shí)，所有依賴它的對(duì)象 Observer 都會(huì)得到通知。簡(jiǎn)單點(diǎn)：女神有男朋友了，朋友圈曬個(gè)圖，甜...

bingo 2019-08-23 18:36 評(píng)論0 收藏0
觀察者模式與發(fā)布/訂閱模式

摘要：觀察者模式與發(fā)布訂閱模式觀察者模式概念一個(gè)被觀察者的對(duì)象，通過(guò)注冊(cè)的方式維護(hù)一組觀察者對(duì)象。當(dāng)被觀察者發(fā)生變化，就會(huì)產(chǎn)生一個(gè)通知，通過(guò)廣播的方式發(fā)送出去，最后調(diào)用每個(gè)觀察者的更新方法。觀察者模式與發(fā)布/訂閱模式觀察者模式概念一個(gè)被觀察者的對(duì)象，通過(guò)注冊(cè)的方式維護(hù)一組觀察者對(duì)象。當(dāng)被觀察者發(fā)生變化，就會(huì)產(chǎn)生一個(gè)通知，通過(guò)廣播的方式發(fā)送出去，最后調(diào)用每個(gè)觀察者的更新方法。當(dāng)觀察者不...

tabalt 2019-08-26 13:47 評(píng)論0 收藏0
設(shè)計(jì)一個(gè)基于svg的涂鴉組件（一）

摘要：基于寫(xiě)了一個(gè)涂鴉組件，說(shuō)項(xiàng)目之前先附上幾張效果圖項(xiàng)目地址由于篇幅問(wèn)題，本文先總體介紹一下項(xiàng)目的大概情況，重點(diǎn)介紹一下組件間的通信方式。一項(xiàng)目說(shuō)明該項(xiàng)目是基于構(gòu)建的多頁(yè)應(yīng)用，使用開(kāi)發(fā)，以組件的方式組織代碼。基于svg寫(xiě)了一個(gè)涂鴉組件，說(shuō)項(xiàng)目之前先附上幾張效果圖：項(xiàng)目地址：SVGraffiti showImg(https://segmentfault.com/img/bVbassI?w...

cartoon 2019-08-22 17:13 評(píng)論0 收藏0