web前端中觀察者模式的示例分析

這篇文章給大家分享的是有關web前端中觀察者模式的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

觀察者模式（Observer Pattern）

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

觀察者模式中Subject對象一般需要實現以下API：

• subscribe(): 接收一個觀察者observer對象，使其訂閱自己

• unsubscribe(): 接收一個觀察者observer對象，使其取消訂閱自己

• fire(): 觸發事件，通知到所有觀察者

用JavaScript手動實現觀察者模式：

// 被觀察者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;
    })
  },
  // 事件觸發
  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!

場景

• DOM事件

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

• vue 響應式

優點

• 支持簡單的廣播通信，自動通知所有已經訂閱過的對象

• 目標對象與觀察者之間的抽象耦合關系能單獨擴展以及重用

• 增加了靈活性

• 觀察者模式所做的工作就是在解耦，讓耦合的雙方都依賴于抽象，而不是依賴于具體。從而使得各自的變化都不會影響到另一邊的變化。

缺點

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

感謝各位的閱讀！關于“web前端中觀察者模式的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！