Vue 發布 訂閱 與 觀察者模式

2021-10-13 09:53:33 字數 1265 閱讀 9210

發布/訂閱模式

發布/訂閱模包含:

假設你要買房子,但是你有沒有**資訊,那麼你會找到誰?你肯定會去問房屋中介,那麼這個房屋中介就是乙個訊號中心。那麼這個房子的主人也就是房東是乙個發布者(publish),你或者其他需要買房的人就是訂閱者(subscribe)。

那麼在vue是如何實現的呢?

// vue 中使用方法

let vm = new vue()

// 訂閱者

vm.$on('change', () => )

// 訂閱者

vm.$on('change', () => )

// 發布者

vm.$emit('change')

以上就是 vue 中使用的方法,通過$on方法來訂閱change事件,通過$emit方法來發布change事件,那麼訂閱者獲取到事件之後就會執行相對應的方法。這就是發布/訂閱模式(publish-subscribe pattern)。接下來我們老模擬實現乙個發布/訂閱模式來加深印象

首選我們來分析下訂閱/發布模式是如何實現的

定義乙個類vue(也可以是其他名稱)

類裡面有兩個方法$on(訂閱者)和$emit(發布者)

$on方法裡接受兩個引數,乙個是事件型別,另乙個是執行的方法

$emit方法裡接受乙個引數,事件型別

接下來根據我們分析的情況通過**來模擬實現如下:

// 事件中心

class vue

this.subs = object.create(null)

}// 定義$on方法(訂閱者)event: 事件名稱 handler: 需要執行的方法

$on (event, handler)

// 定義$emit方法(發布者)

$emit(event) )}}

}// 測試

let vm = new vue()

vm.$on('change', () => )

vm.$emit('change')

瀏覽器執行以上**會發現控制台列印出'change',以上就是發布/訂閱模式的實現方式

關注我後續我會繼續更新觀察者模式

觀察者模式 與 發布訂閱模式

兩個模式的實現結構 觀察者模式 觀察者 observer 直接訂閱 subscribe 主題 subject 而當主題被啟用的時候,會觸發 fire event 觀察者裡的事件。觀察者模式定義了物件間的一種一對多的依賴關係,當乙個物件的狀態發生改變時,所有依賴於它的物件都將得到通知,並自動更新。觀察...

觀察者模式(發布訂閱模式)

簡介 觀察者模式 又被稱為發布 訂閱 public subscribe 模式,屬於行為型模式的一種,它定義了一種一對多的依賴關係,讓多個觀察者物件同時監聽某乙個主題物件。這個主題物件再狀態變化時,會通知所有的觀察者物件,使他們能夠自動更新自己。塊 public 發布動態 button 觀察者 粉絲 ...

觀察者模式 訂閱發布模式

觀察者模式是一種物件間的一對多依賴關係,當乙個物件的狀態發生變化時,所有依賴他的物件都將得到通知。通常運用在物件之間的訊息通訊中。比如現在有一群學生,可以組成小組,可以尋求幫助 class students askforhelp subject 向大家尋求幫助 this.tasks.foreach ...