JS簡單實現發布訂閱模式

2021-10-18 10:26:44 字數 1204 閱讀 4174

在發布訂閱模式裡,發布者,並不會直接通知訂閱者,換句話說,發布者和訂閱者,彼此互不相識。

那他們之間如何交流?

由乙個排程中心來做中間人,發布者更新(publish)主題,由主題(排程中心)來進行通知(noticy)訂閱者更新(update)。

參考網上class物件導向實現,相較於很多js event的實現便於理解

// 主題

class

dep// 新增訂閱者

addsub

(sub)

// 主題更新通知---呼叫訂閱者update,通知所有訂閱者

notify()

}// 訂閱者

class

subupdate

(callback)

}// 發布者

class

pub// 新增主題

adddep

(dep)

// 移除主題

removedep

(dep)

else

}// 更新主題

publish

(dep)

}// 新建主題,給主題中加訂閱者

let dep1 =

newdep

(item => item * item)

;dep1.

addsub

(new

sub(1)

).addsub

(new

sub(2)

).addsub

(new

sub(3)

);// 新建發布者

let pub =

newpub()

;// 新增主題

pub.

adddep

(dep1)

;// 發布者發布,通知這個主題的所有訂閱者更新

pub.

publish

(dep1)

;// 輸出結果

// 更新之後結果:1

// 更新之後結果:4

// 更新之後結果:9

js發布訂閱模式

再開始之前先簡單介紹下訂閱 發布模式,因為這種設計模式在vue 中起到比較關鍵的作用。首先,簡單來說訂閱 發布模式是一種定義一對多依賴關係的設計模式,當乙個物件狀態發生變化時候,所依賴於他的所有物件都將得到通知。舉個簡單例子 很多學生到書店買書,a同學定了一本 js高程 b同學定了一本 js設計模式...

js發布訂閱者模式

發布 訂閱模式可以用乙個全域性的 event 物件來實現,訂閱者不需要了解訊息來自哪個發布者,發布者也不知道訊息會推送給哪些訂閱者,event 作為乙個類似 中介者 的角色,把訂閱者和發布者聯絡起來。統一訊息管理,將訊息傳送給所有訂閱這個訊息型別的模組 採用 訂閱 發布 觀察者 這種設計模組式開發 ...

js 發布 訂閱者模式

發布 訂閱模式 bw 2020 07 29 const event on function name,method,target else this.regsiter name push emit function name off function name,target 移除事件 this.re...