前言

hello world歡迎來(lái)到前端的新世界

---

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

介紹

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

實(shí)現(xiàn)

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

• subscribe(): 接收一個(gè)觀察者observer對(duì)象，使其訂閱自己
• unsubscribe(): 接收一個(gè)觀察者observer對(duì)象，使其取消訂閱自己
• 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();});}
}

驗(yàn)證是否訂閱成功

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!

驗(yàn)證一下取消訂閱是否成功：

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

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

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

缺點(diǎn)

過(guò)度使用會(huì)導(dǎo)致對(duì)象與對(duì)象之間的聯(lián)系弱化，會(huì)導(dǎo)致程序難以跟蹤維護(hù)和理解

應(yīng)用場(chǎng)景

• DOM事件

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

后言

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