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

資訊專欄INFORMATION COLUMN

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

LeexMuller / 1388人閱讀

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

發(fā)布訂閱模式

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

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

缺點: 如果過多的使用發(fā)布訂閱模式, 會增加維護的難度

實現(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) //這邊方法函數(shù)放進去
}
Event.prototype.emit =function() {
 var eventType = Array.prototype.shift.call(arguments)
 var arr = this.obj[eventType]  //這邊方法函數(shù)取出來
 for(let i =0;i
訂閱函數(shù)邏輯一定要優(yōu)先于發(fā)布函數(shù)嗎

考慮以下場景:


$.ajax("", () => {
  // 異步訂閱函數(shù)邏輯
})

// 在其他地方執(zhí)行發(fā)布函數(shù), 此時并不能保證執(zhí)行發(fā)布函數(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里面儲存的函數(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ā), 從而實現(xiàn)發(fā)布函數(shù)先于訂閱函數(shù)執(zhí)行
    }
    var ev = new Event()
    ev.emit("click", 5)  //這個使用的前提是 一定是先觸發(fā)訂閱  
    //然后等待 發(fā)布函數(shù)中的cacheList[i]()方法執(zhí)行
    ev.on("click", function (a) {
      console.log(a)
    })

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

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

相關(guān)文章

  • JavaScript設(shè)計模式與開發(fā)實踐 - 觀察者模式

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

    xiangzhihong 評論0 收藏0

  • 觀察者設(shè)計模式

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

    kviccn 評論0 收藏0

  • JavaScript 設(shè)計模式（六）：觀察者模式與發(fā)布訂閱模式

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

    bingo 評論0 收藏0

  • 觀察者模式與發(fā)布/訂閱模式

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

    tabalt 評論0 收藏0

  • 設(shè)計一個基于svg的涂鴉組件（一）

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

    cartoon 評論0 收藏0

發(fā)表評論

0條評論

LeexMuller

男|高級講師

TA的文章

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