如果你也常被「狀態改了要通知誰」這題追著跑，別急著塞更多 if/else。把思路換成 Observer：有人變動，就廣播一聲；誰在意，誰自己訂閱。

這樣模組之間不需要彼此認識，換元件、拆頁面也不會牽一髮動全身。本文用 JavaScript 從零寫出可訂閱、可退訂、可排序、可非同步的主體，搭配 WebSocket、表單驗證、全域小型 store 的實例，幫你看懂什麼時候用、什麼時候不用。

最後還整理一份踩雷清單，像是重複訂閱、事件風暴、回呼出錯等，一次補齊。輕鬆讀完，就會用。希望本篇文章可以幫助到需要的您。

// Minimal Observable/Subject
class Observable {
  #observers = new Set();

  subscribe(fn) {
    if (typeof fn !== 'function') throw new TypeError('Observer must be a function');
    this.#observers.add(fn);
    // 回傳退訂函式，方便隨手清理
    return () => this.#observers.delete(fn);
  }

  next(value) {
    // 複製一份，避免迭代中被移除影響遍歷
    for (const fn of [...this.#observers]) {
      try {
        fn(value);
      } catch (err) {
        // 不讓單一觀察者的錯誤中斷其他觀察者
        console.error('[Observer error]', err);
      }
    }
  }

  clear() {
    this.#observers.clear();
  }

  get size() {
    return this.#observers.size;
  }
}

// 使用示例
const price$ = new Observable();

const unsubLog = price$.subscribe((p) => console.log('最新價格：', p));
const unsubWarn = price$.subscribe((p) => { if (p < 10) console.warn('跌破 10！'); });

price$.next(12);
price$.next(8);

unsubWarn(); // 不再關心
price$.next(15);

要點：

用 Set 去重，避免重複訂閱（也能快速刪除）。

通知時先「展開成陣列」，避免遍歷中集合被修改造成不穩定。

任何觀察者拋錯都要被捕捉，不要讓它影響其他觀察者。

事件型 Subject（多通道、多次性、once/priority）

很多時候我們需要「事件名稱」→「回呼清單」這種 Pub/Sub 風格：

class Subject {
  #map = new Map(); // event -> Set<fn>

  on(event, fn, { priority = 0 } = {}) {
    if (!this.#map.has(event)) this.#map.set(event, new Set());
    const entry = { fn, priority };
    const bucket = this.#map.get(event);
    bucket.add(entry);

    // 回傳退訂
    return () => bucket.delete(entry);
  }

  once(event, fn) {
    const off = this.on(event, (payload) => {
      off();
      fn(payload);
    });
    return off;
  }

  emit(event, payload, { async = false } = {}) {
    const bucket = this.#map.get(event);
    if (!bucket || bucket.size === 0) return;

    // 依 priority 由大到小排序（高優先先執行）
    const queue = [...bucket].sort((a, b) => b.priority - a.priority);

    const runner = () => {
      for (const { fn } of queue) {
        try {
          fn(payload);
        } catch (err) {
          console.error(`[${event}] observer error`, err);
        }
      }
    };

    if (async) {
      queueMicrotask(runner); // 微任務：不阻塞目前同步流程
    } else {
      runner();
    }
  }

  off(event, fn) {
    const bucket = this.#map.get(event);
    if (!bucket) return;
    for (const entry of bucket) {
      if (entry.fn === fn) {
        bucket.delete(entry);
        break;
      }
    }
  }

  clear(event) {
    if (event) this.#map.delete(event);
    else this.#map.clear();
  }
}

// 使用示例
const bus = new Subject();

bus.on('login', (user) => console.log('歡迎', user.name), { priority: 10 });
bus.on('login', (user) => localStorage.setItem('token', user.token));
bus.once('login', () => console.log('這句只會出現一次'));

bus.emit('login', { name: 'Ava', token: 'abc123' });
bus.emit('login', { name: 'Ben', token: 'xyz789' });

要點：

priority 幫你掌控先後（例如：先驗證、再渲染）。

once 適合只需要一次的初始化邏輯。

async 讓通知進入微任務，避免阻塞 UI。

實戰範例 1：表單驗證管線（多個觀察者協作）

場景：使用者輸入 Email，我們要同步檢查格式、非同步檢查是否已被註冊、並且提示 UI。

const email$ = new Observable();

// 規則：格式檢查（同步）
email$.subscribe((value) => {
  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  document.querySelector('#emailMsg').textContent = ok ? '' : 'Email 格式錯誤';
});

// 規則：占用檢查（非同步，注意節流）
let lastCheck = 0;
email$.subscribe(async (value) => {
  const now = Date.now();
  if (now - lastCheck < 350) return; // 簡單節流
  lastCheck = now;

  try {
    const taken = await fakeRemoteCheck(value); // 用你的 API 替換
    document.querySelector('#emailMsg2').textContent = taken ? 'Email 已被註冊' : '';
  } catch (e) {
    console.error(e);
  }
});

// UI 綁定
document.querySelector('#email').addEventListener('input', (e) => {
  email$.next(e.target.value.trim());
});

function fakeRemoteCheck(email) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(email.endsWith('@taken.com')), 200);
  });
}

要點：

同步與非同步觀察者可以共存。

對非同步檢查做節流/防抖，避免每字都打 API。

観察者內部錯誤不應影響其他觀察者。

實戰範例 2：WebSocket 報價分發（多消費者）

class QuoteHub extends Observable {
  constructor(url) {
    super();
    this.ws = new WebSocket(url);
    this.ws.onmessage = (evt) => {
      try {
        const data = JSON.parse(evt.data); // { symbol, price, ts }
        this.next(data); // 分發給所有觀察者
      } catch (e) {
        console.error('WS parse error', e);
      }
    };
    this.ws.onerror = (e) => console.error('WS error', e);
  }
}

const hub = new QuoteHub('wss://example.com/quote');

// UI1：即時表格
const offTable = hub.subscribe(({ symbol, price }) => {
  updateTableCell(symbol, price);
});

// UI2：大圖走勢
const offChart = hub.subscribe(({ symbol, price, ts }) => {
  if (symbol === 'AAPL') pushChartPoint(ts, price);
});

// 需要時關閉觀察者，避免記憶體洩漏
window.addEventListener('beforeunload', () => {
  offTable();
  offChart();
});

要點：

Observable 成為分發中心，多個 UI/邏輯共享同一串流。

策略：頁面切換或元件卸載時務必退訂。

實戰範例 3：輕量全域狀態（無框架）

用觀察者維持一個最小的「可觀察狀態」，類似小型 store：

function createStore(initialState) {
  const state = { ...initialState };
  const change$ = new Observable();

  return {
    getState: () => ({ ...state }), // 避免外部直接改動
    set(patch) {
      const changed = Object.assign(state, patch);
      change$.next({ state: { ...state }, patch });
      return changed;
    },
    subscribe: (fn) => change$.subscribe(fn)
  };
}

const store = createStore({ theme: 'light', count: 0 });

const offHeader = store.subscribe(({ state }) => {
  document.documentElement.dataset.theme = state.theme;
});

const offCounter = store.subscribe(({ state }) => {
  document.querySelector('#counter').textContent = state.count;
});

document.querySelector('#inc').onclick = () => store.set({ count: store.getState().count + 1 });
document.querySelector('#toggleTheme').onclick = () =>
  store.set({ theme: store.getState().theme === 'light' ? 'dark' : 'light' });

要點：

getState 回傳拷貝，避免外部直接 mutate。

set 後發出狀態與 patch，利於細粒度更新。

Observer vs Pub/Sub vs Promise：別混了

Observer（觀察者）：主體知道誰在聽（保有引用），直接通知；偏「推播」。

Pub/Sub（發佈/訂閱）：透過中介的「事件匯流排」，發佈者與訂閱者彼此完全不認識；更鬆耦合。

Promise：一次性、單值、完成後不會再改變；適合「請求-回應」。

Observable/RxJS：多值、可取消、可組合；適合資料流處理（防抖、緩衝、切換）。

實務上你會同時用到：DOM 事件（觀察）、EventBus（Pub/Sub）、API 回應（Promise）。

常見錯誤與雷點

1. 未退訂導致記憶體洩漏

現象：頁面切換後，回呼還在跑，重複綁定越來越多。

對策：訂閱時就存下 off；在 componentWillUnmount/cleanup 或 beforeunload 統一清理。DOM 事件同理。

2. 在通知中修改主體，造成遞迴或抖動

現象：next() 觸發觀察者，觀察者又 next()，陷入循環或頻繁觸發。

對策：在觀察者中避免直接回寫主體；若必要，加入節流/防抖或狀態鎖。

3. 同步與非同步混用，順序難以掌控

現象：有的觀察者同步改 UI，有的等 API；呈現短暫不一致。

對策：明確規範：全部同步或全部進微任務（queueMicrotask/setTimeout 0）；或在通知後導入批量渲染。

4. 觀察者拋錯導致整個通知中斷

對策：try/catch 包住每個回呼，錯誤只記錄不影響其他觀察者。

5. 重複訂閱

現象：同一函式被加了多次，通知重複執行。

對策：用 Set 去重；或在訂閱前先 off。

6. 迭代時修改集合

現象：遍歷中 off() 導致指標錯亂、遺漏通知。

對策：通知前把集合展平成陣列快照：for (const fn of [...set]) { ... }

7. 阻塞主執行緒

現象：觀察者做重計算，導致卡頓。

對策：把重任務移到 Web Worker，或切片處理（分批 setTimeout/requestIdleCallback）。

8. 無回放（Replay）需求卻硬要自做

現象：新的觀察者需要拿到「最新一筆」，但主體沒有記錄。

對策：若常需要回放，主體保留最近值並在 subscribe 立刻推一次；或導入 RxJS ReplaySubject/BehaviorSubject。

9. DOM 元素卸載後未解除事件監聽

對策：銜接框架生命週期，或建立「集中註冊/集中清理」的管理器。

10. this 綁定錯誤

對策：用箭頭函式或 fn.bind(context)；別在回呼中依賴動態 this。

11. 事件名稱拼寫/命名碰撞（對事件型 Subject）

對策：集中定義事件常數或 Symbol，避免魔法字串散落。

12. 跨頁面或長連線未考慮可取消

對策：提供通用 unsubscribe；對 fetch 用 AbortController；WebSocket 關閉時移除所有觀察者。

最佳實務清單

每個訂閱一定要有退訂：API design 上直接回傳 off 是最省事的模式。

錯誤隔離：任何觀察者的錯都不應阻止其他觀察者運作。

同步策略一致：要嘛全同步，要嘛全微任務，避免顯示閃爍。

避免在通知中「回寫主體」：若要回寫，使用節流/狀態鎖。

通道分離：不同性質的事件分開頻道，別用一個「萬用事件」。

測試觀察行為：用假函式（spy）驗證通知次數、順序、參數。

文件化事件表：列出能 emit 的事件與 payload 格式，減少隱性耦合。

效能：大規模觀察者時，審視是否真的都需要同頻率通知；必要時做取樣或批次。

進階：微型 Event Bus（Pub/Sub 口味）

雖然主題是 Observer，但實務常需要一個「不帶狀態」的事件匯流排，中介發佈者與訂閱者：

function createEventBus() {
  const map = new Map(); // event -> Set<fn>
  return {
    on(event, fn) {
      if (!map.has(event)) map.set(event, new Set());
      const set = map.get(event);
      set.add(fn);
      return () => set.delete(fn);
    },
    emit(event, payload) {
      const set = map.get(event);
      if (!set) return;
      for (const fn of [...set]) {
        try { fn(payload); } catch (e) { console.error(e); }
      }
    },
    clear(event) {
      if (event) map.delete(event);
      else map.clear();
    }
  };
}

// 使用
const bus = createEventBus();
const off = bus.on('toast', (msg) => showToast(msg));
bus.emit('toast', { type: 'success', text: '已儲存' });
off();

這種寫法在模組間穿梭很實用，但請記得：更鬆耦合 → 更難追蹤資料流，務必維護「事件清單」。

附加：帶回放的 Behavior 主體

常見需求：「新訂閱者要立刻拿到最新值」。做個簡版 BehaviorSubject：

class BehaviorSubject extends Observable {
  #current;
  constructor(initialValue) {
    super();
    this.#current = initialValue;
  }
  subscribe(fn) {
    const off = super.subscribe(fn);
    // 訂閱立刻回放一次
    try { fn(this.#current); } catch (e) { console.error(e); }
    return off;
  }
  next(value) {
    this.#current = value;
    super.next(value);
  }
  get value() {
    return this.#current;
  }
}

// 使用
const theme$ = new BehaviorSubject('light');
theme$.subscribe(v => console.log('主題：', v)); // 立刻收到 'light'
theme$.next('dark');

測試觀念：如何驗證通知正確

以 Vitest/Jest 為例的概念（示意）：

test('observer should receive values in order', () => {
  const ob$ = new Observable();
  const fn = vi.fn();
  ob$.subscribe(fn);

  ob$.next(1);
  ob$.next(2);

  expect(fn).toHaveBeenCalledTimes(2);
  expect(fn).toHaveBeenNthCalledWith(1, 1);
  expect(fn).toHaveBeenNthCalledWith(2, 2);
});

test('unsubscribe should stop receiving', () => {
  const ob$ = new Observable();
  const fn = vi.fn();
  const off = ob$.subscribe(fn);

  ob$.next('a');
  off();
  ob$.next('b');

  expect(fn).toHaveBeenCalledTimes(1);
  expect(fn).toHaveBeenLastCalledWith('a');
});

重點測：次數、順序、參數與退訂行為。