前言

hello world歡迎來到前端的新世界

---

😜當前文章系列專欄：前端設計模式
🐱?👓博主在前端領域還有很多知識和技術需要掌握，正在不斷努力填補技術短板。(如果出現(xiàn)錯誤，感謝大家指出)🌹
💖感謝大家支持！您的觀看就是作者創(chuàng)作的動力

介紹

觀察者模式又稱發(fā)布-訂閱模式（Publish/Subscribe Pattern），是我們經(jīng)常接觸到的設計模式，日常生活中的應用也比比皆是，比如你訂閱了某個博主的頻道，當有內容更新時會收到推送；又比如JavaScript中的事件訂閱響應機制。觀察者模式的思想用一句話描述就是：被觀察對象（subject）維護一組觀察者（observer），當被觀察對象狀態(tài)改變時，通過調用觀察者的某個方法將這些變化通知到觀察者。

實現(xiàn)

觀察者模式中Subject對象一般需要實現(xiàn)以下API：

• subscribe(): 接收一個觀察者observer對象，使其訂閱自己
• unsubscribe(): 接收一個觀察者observer對象，使其取消訂閱自己
• fire(): 觸發(fā)事件，通知到所有觀察者

// 被觀察者
function Subject() {this.observers = [];
}Subject.prototype = {// 訂閱subscribe: function (observer) {this.observers.push(observer);},// 取消訂閱`在這里插入代碼片`unsubscribe: function (observerToRemove) {this.observers = this.observers.filter(observer => {return observer !== observerToRemove;})},// 事件觸發(fā)fire: function () {this.observers.forEach(observer => {observer.call();});}
}

驗證是否訂閱成功

const subject = new Subject();function observer1() {console.log('Observer 1 Firing!');
}function observer2() {console.log('Observer 2 Firing!');
}subject.subscribe(observer1);
subject.subscribe(observer2);
subject.fire();//輸出：
Observer 1 Firing! 
Observer 2 Firing!

驗證一下取消訂閱是否成功：

subject.unsubscribe(observer2);
subject.fire();//輸出：
Observer 1 Firing!

優(yōu)缺點

優(yōu)點

• 支持簡單的廣播通信，自動通知所有已經(jīng)訂閱過的對象
• 目標對象與觀察者之間的抽象耦合關系能單獨擴展以及重用
• 增加了靈活性
• 觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。

缺點

過度使用會導致對象與對象之間的聯(lián)系弱化，會導致程序難以跟蹤維護和理解

應用場景

• DOM事件

document.body.addEventListener('click', function() {console.log('hello world!');
});
document.body.click()

后言

創(chuàng)作不易，要是本文章對廣大讀者有那么一點點幫助 不妨三連支持一下，您的鼓勵就是博主創(chuàng)作的動力