發布訂閱模式實現

Noodles 發布于2019-08-21 16:48 / 3329人閱讀

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

1.發布訂閱模式

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

用例:

①Vue實現數據的深度響應，就用到了發布訂閱模式的原理，視圖訂閱了其依賴的數據，數據改變則會通過notify，通知視圖去刷新；

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

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

2.代碼：

on訂閱,fire發布,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)
     }
     
     //觸發
     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云服務器云服務器發布訂閱模式訂閱發布模式 DTS 訂閱發布模式訂閱模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88735.html

JavaScript 設計模式（六）：觀察者模式與發布訂閱模式

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

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

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

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

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

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

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

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

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

13651657101 2019-08-26 13:53 評論0 收藏0
發布訂閱模式-實現公眾號訂閱/內容發布/取消訂閱功能

摘要：問觀察者模式和發布訂閱模式的有什么區別答一下，相信都會有滿屏的結果告訴你什么是發布訂閱模式，但還是希望自己通過一些例子融入去實現概念理解創建一個對象存儲所有訂閱者與其調用添加訂閱者函數時入參有，將其存儲到調用發布訂閱信息函數時再根據入問：觀察者模式和發布訂閱模式的有什么區別？答：https://juejin.im/post/5a14e9... Google一下，相信都會有滿屏的結果...

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