觀察者模式
- 觀察者模式（Observe）是前端開發(fā)中常用的一種設(shè)計模式掘鄙，在各大框架中都有使用。
- 當對象間存在一對多關(guān)系時郊愧，則使用觀察者模式（Observer Pattern）晓铆。比如筷黔，當一個對象被修改時，則會自動通知它的依賴對象刊头。觀察者模式屬于行為型模式黍瞧。
- 它定義了一種一對多的關(guān)系，讓多個觀察者對象同時監(jiān)聽某一個主題對象原杂，這個主題對象的狀態(tài)發(fā)生變化時就會通知所有的觀察者對象印颤，使得它們能夠自動更新
原理（點菜過程） Observer代表我們自己 Subject代表餐廳
- 當我們要點菜時（創(chuàng)建觀察者） -- 創(chuàng)建Observer并傳入Subject和菜品名稱
- 餐廳處理 (被觀察者) -- Subject 將Observer存入到菜品列表中，并且提供相關(guān)的查詢接口（查詢當前菜品狀態(tài)污尉，修改菜品狀態(tài)膀哲，存儲菜品往产，觸發(fā)上菜品嘗）
- 上菜品嘗（修改被觀察者的菜品狀態(tài)） -- 當修改了菜品狀態(tài)時被碗，就會自動觸發(fā)Observer的品嘗函數(shù)
// 被觀察者（餐廳）提供各種方法
class Subject{
constructor(){
this.status = ''
this.observers = []
}
// 獲取當前狀態(tài)
getStatus () {
return this.status
}
// 設(shè)置狀態(tài)
setStatus (type) {
this.status = type
this.handle()
}
// 存儲觀察者到數(shù)組中
storage (observer) {
this.observers.push(observer)
}
// 循環(huán)執(zhí)行觀察者的函數(shù)
handle () {
this.observers.forEach(i => {
if (i.name === this.status) {
i.update()
}
})
}
}
// 觀察者 等待被觸發(fā)
class Observer{
constructor(name, subject){
this.name = name;
this.subject = subject
this.subject.storage(this) // 調(diào)用被觀察者的storage方法存儲當前觀察者
}
update () {
console.log(`${this.subject.getStatus()} 做好了，請品嘗`)
}
}
// 餐廳對象
let subject = new Subject()
// 點菜
new Observer('宮保雞丁', subject)
new Observer('酸辣白菜', subject)
// 修改狀態(tài)觸發(fā)當前觀察者的update
subject.setStatus('宮保雞丁')
觀察者模式和發(fā)布訂閱模式
這兩種模式本質(zhì)上區(qū)別并不大仿村，相比較觀察者模式發(fā)布訂閱模式多了一個訂閱中心锐朴，通過訂閱中心做事件處理
優(yōu)缺點
- 發(fā)布訂閱模式通過訂閱中心做事件處理就會降低代碼的耦合度
- 發(fā)布方和訂閱方，沒有任何關(guān)系蔼囊，沒有發(fā)布就可以訂閱焚志，沒有訂閱也可以發(fā)布
- 發(fā)布訂閱模式可擴展性比較強
- 觀察者模式相對比較輕量和簡單，占用內(nèi)存較少
