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

Noodles 發(fā)布于2019-08-21 16:48 / 3319人閱讀

摘要：發(fā)布訂閱模式介紹常被稱作觀察者模式，或者消息機制，定義了一種依賴關(guān)系，主要是用來解決對象之間的耦合用例實現(xiàn)數(shù)據(jù)的深度響應(yīng)，就用到了發(fā)布訂閱模式的原理，視圖訂閱了其依賴的數(shù)據(jù)，數(shù)據(jù)改變則會通過，通知視圖去刷新的事件機制，也是通過利用了發(fā)布訂閱

1.發(fā)布訂閱模式

介紹：常被稱作觀察者模式，或者消息機制，定義了一種依賴關(guān)系，主要是用來解決對象之間的耦合；

用例:

①Vue實現(xiàn)數(shù)據(jù)的深度響應(yīng)，就用到了發(fā)布訂閱模式的原理，視圖訂閱了其依賴的數(shù)據(jù)，數(shù)據(jù)改變則會通過notify，通知視圖去刷新；

②D3.js的事件機制dispatch，也是通過利用了發(fā)布訂閱模式；

特點：一般在全局中定義，保證在任何地方都可以發(fā)布和訂閱；

2.代碼：

on訂閱,fire發(fā)布,remove移除

class Observer {
     constructor() {
         this.subs = []
     }
      //注冊
     on(type, fn) {
         if (typeof this.subs[type] === "undefined") {
             this.subs[type] = [fn];
             return;
         }
         for (let i = 0, len = this.subs[type].length; i < len; i++) {
             if (this.subs[type][i] === fn)return;
         }
         this.subs[type].push(fn)
     }
     
     //觸發(fā)
     fire(type,args){
         if (typeof this.subs[type] === "undefined") {
             throw "type is undefined";
             return;
         }
         this.subs[type].forEach(sub=>{
             sub.call(this,args)
         })
     }
     
     //移除
     remove(type,fn){

         if (typeof this.subs[type] === "undefined") {
             throw "type is undefined";
         }
         this.subs[type] = this.subs[type].filter(sub=>sub !== fn)

     }
 }

測試

 let ob = new Observer();
  function fn1(agrs) {
      console.log("注冊成功第1次");
      console.log(agrs)
  }
  function fn2(agrs) {
      console.log("注冊成功第2次");
      console.log(agrs)
  }
  function fn3(agrs) {
      console.log("注冊成功第3次");
      console.log(agrs)
  }
  ob.on("click", fn1);
  ob.on("click", fn2);
  ob.on("click", fn3);
  ob.on("click", fn1);
  ob.on("click", fn2);
  ob.remove("click", fn2);
  function click1() {
      ob.fire("click", "傳參成功")
  }

GPU云服務(wù)器云服務(wù)器發(fā)布訂閱模式訂閱發(fā)布模式 DTS 訂閱發(fā)布模式訂閱模式

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

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

相關(guān)文章

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

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

bingo 2019-08-23 18:36 評論0 收藏0
訂閱發(fā)布模式和觀察者模式的區(qū)別

摘要：或許以前認(rèn)為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。參考文章訂閱發(fā)布模式和觀察者模式真的不一樣首選我們需要先了解兩者的定義和實現(xiàn)的方式，才能更好的區(qū)分兩者的不同點。或許以前認(rèn)為訂閱發(fā)布模式是觀察者模式的一種別稱，但是發(fā)展至今，概念已經(jīng)有了不少區(qū)別。訂閱發(fā)布模式在軟件架構(gòu)中，發(fā)布-訂閱是一種消息范式，消息的發(fā)送者（稱為發(fā)布者）不會將消息直接發(fā)送給特...

ysl_unh 2019-08-26 11:01 評論0 收藏0
發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

摘要：發(fā)布訂閱者模式中，訂閱者是不知道也不關(guān)心事件是為什么觸發(fā)，是由哪一個事件觸發(fā)，只知道事件觸發(fā)時候，會告訴自己。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發(fā)布訂閱者模式，是javascript甚至大多數(shù)語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調(diào)度中心，當(dāng)該事件觸發(fā)時候，發(fā)布者發(fā)布...

YanceyOfficial 2019-08-22 17:34 評論0 收藏0
發(fā)布訂閱模式實現(xiàn)及發(fā)布訂閱者模式與觀察者模式的不同

摘要：發(fā)布訂閱者模式中，訂閱者是不知道也不關(guān)心事件是為什么觸發(fā)，是由哪一個事件觸發(fā)，只知道事件觸發(fā)時候，會告訴自己。然而，在發(fā)布訂閱模式中，發(fā)布者和訂閱者不知道對方的存在。在發(fā)布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發(fā)布訂閱者模式，是javascript甚至大多數(shù)語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調(diào)度中心，當(dāng)該事件觸發(fā)時候，發(fā)布者發(fā)布...

Jensen 2019-08-02 10:32 評論0 收藏0
JavaScript 發(fā)布-訂閱模式

摘要：發(fā)布訂閱模式訂閱者把自己想訂閱的事件注冊到調(diào)度中心，當(dāng)發(fā)布者發(fā)布該事件到調(diào)度中心，也就是該事件觸發(fā)時，由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊到調(diào)度中心的處理代碼。發(fā)布-訂閱模式，看似陌生，其實不然。工作中經(jīng)常會用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他們都使用了發(fā)布-訂閱模式，讓開發(fā)變得更加高效方便。一...

13651657101 2019-08-26 13:53 評論0 收藏0
發(fā)布訂閱模式-實現(xiàn)公眾號訂閱/內(nèi)容發(fā)布/取消訂閱功能

摘要：問觀察者模式和發(fā)布訂閱模式的有什么區(qū)別答一下，相信都會有滿屏的結(jié)果告訴你什么是發(fā)布訂閱模式，但還是希望自己通過一些例子融入去實現(xiàn)概念理解創(chuàng)建一個對象存儲所有訂閱者與其調(diào)用添加訂閱者函數(shù)時入?yún)⒂?，將其存儲到調(diào)用發(fā)布訂閱信息函數(shù)時再根據(jù)入問：觀察者模式和發(fā)布訂閱模式的有什么區(qū)別？答：https://juejin.im/post/5a14e9... Google一下，相信都會有滿屏的結(jié)果...

XiNGRZ 2019-08-26 10:22 評論0 收藏0