JS設計模式（觀察者模式）

蒟蒻級玩家發表於2020-10-27
JS設計模式

觀察者模式

介紹

  • 釋出 & 訂閱（將某件事說好之後只需等待，如：訂報紙，訂牛奶）
  • 一對多

演示

UML類圖

在這裡插入圖片描述
在這裡插入圖片描述

場景

  1. 網頁時間繫結

在這裡插入圖片描述

  1. Promise
    在這裡插入圖片描述
    在這裡插入圖片描述

  2. jQuery callback
    在這裡插入圖片描述

  3. nodejs自定義事件
    在這裡插入圖片描述
    在這裡插入圖片描述
    在node的stream中用到了自定義事件
    在這裡插入圖片描述
    readline 中也用到了自定義事件
    在這裡插入圖片描述

  4. 其他場景
    1、nodejs中：處理http請求；多程式通訊
    在這裡插入圖片描述

    2、vue 和 react 元件生命週期觸發
    在這裡插入圖片描述

    3、vue watch
    在這裡插入圖片描述

總結

  • 主題和觀察者分離，不是主動觸發而是被動監聽，兩者解耦
  • 符合開放封閉原則

相關文章