定義 觀察者模式屬於行為型模式,它定義了對象間的一種一對多的依賴關係,當一個對象的狀態發生改變時,所有依賴於它的對象都將得到通知,並自動更新。 一種一對多的關係中一稱為被觀察者也叫目標對象Subject而多則稱為觀察者對象Observer 觀察者模式中通常有兩個模型,一個觀察者(observer)和 ...
定義
觀察者模式屬於行為型模式,它定義了對象間的一種一對多的依賴關係,當一個對象的狀態發生改變時,所有依賴於它的對象都將得到通知,並自動更新。
一種一對多的關係中一稱為被觀察者也叫目標對象Subject
而多則稱為觀察者對象Observer
觀察者模式中通常有兩個模型,一個觀察者(observer)和一個被觀察者(Observed)。從字面意思上理解,即被觀察者發生某些行為或者變化時,會通知觀察者,觀察者根據此行為或者變化做出處理。
特征:
-
- 一個目標者對象
Subject
,擁有方法:添加、刪除、通知 Observer; - 多個觀察者對象
Observer
,擁有方法:接收 Subject 狀態變更通知並處理; - 目標對象
Subject
狀態變更時,通知所有Observer
。
- 一個目標者對象
生活中的例子
如我們關註了某某訂閱號,當訂閱號有新的文章時,我們都收到了推文,這個就是最簡單的觀察者模式。
模擬觀察者模式
/*
定義:
觀察者模式是一種對象行為模式。
它定義對象間的一種一對多的依賴關係,當一個對象的狀態發生改變時,所有依賴於它的對象都得到通知並被自動更新。
js 沒有抽象類、介面 所以一般結構如下:
subject 目標 or 被觀察者:
add: 把觀察者註冊進來
remove: 移除觀察者
notify: 遍歷註冊進來的觀察者,調用他們的update
Observer 觀察者:
update: 自己提供的更新方法
*/
// 被觀者、目標
class Subject {
constructor (data) {
this.observers = []
this.data = data
}
addObserver (data) {
this.observers.push(data)
}
removeObserver (data) {
this.observers = this.observers.filter(t => t !== data)
}
notify (...data) {
this.observers.forEach(observer => observer.update(...data))
}
// 你的業務代碼
setData (data) {
this.data= data;
this.notify(data)
}
}
// 觀察者
class Observer {
constructor (name) {
this.name = name
}
update (data) {
console.log(`${this.name}, 我執行了,${data}發生了變化`)
}
}
const sub = new Subject('我是被觀察')
const ob1 = new Observer('我是ob1')
const ob2 = new Observer('我是ob2')
const ob3 = new Observer('我是ob3')
sub.addObserver(ob1)
sub.addObserver(ob2)
sub.addObserver(ob3)
sub.notify('現在開始發送第一個通知')
console.log('**************看看ob1 是不是沒有收到第二個通知**************')
sub.removeObserver(ob1)
sub.notify('現在開始發送第二個通知')
小結
- 觀察者模式用來解決對象之間存在一對多關係的交互行為
- 觀察者模式中,被觀察者與觀察者解藕沒有很徹底,且在被觀察者中觀察者要提供統一的更新方法,當然這也是要看具體的應用場景,在某些模塊本身就是存在關聯,那用觀察者模式也沒問題。
- 發佈訂閱雖然與觀察者模式解決的問題的思路差不多,但是這兩個還是有區別的。