專案做到一半，你是不是也遇過這種情況：表單一改「國家」，「城市」就要清空；清單在載入，按鈕要鎖；API 慢半拍回來，又把新結果覆蓋掉。

元件彼此拉線、互相喊話，最後整個頁面像糾結的耳機線。其實，很多痛苦不是功能難，而是「溝通」散落各處。

Mediator（仲裁者）模式做的事很單純：把互動規則收攏到一個中樞，讓元件各司其職、透過中樞對話。這篇不講玄學，我會用貼近實務的例子（聊天室、表單協作、搜尋流程）帶你看清它怎麼落地、怎麼測、哪裡會踩雷，寫起來更安靜，維護也不再焦慮。希望本篇文章能夠幫助到需要的您。

// 參與者
class User {
  constructor(name, mediator) {
    this.name = name;
    this.mediator = mediator;
    mediator.register(this);
  }
  send(to, text) {
    this.mediator.route({ from: this.name, to, text, ts: Date.now() });
  }
  receive({ from, text, ts }) {
    console.log(`[${new Date(ts).toLocaleTimeString()}] ${from} → ${this.name}: ${text}`);
  }
}

// 仲裁者
class ChatRoomMediator {
  constructor() {
    this.users = new Map();
  }
  register(user) {
    if (this.users.has(user.name)) throw new Error(`User ${user.name} already exists`);
    this.users.set(user.name, user);
  }
  route(msg) {
    if (msg.to === '*') {
      // 廣播
      for (const [name, u] of this.users) {
        if (name !== msg.from) u.receive(msg);
      }
    } else {
      const target = this.users.get(msg.to);
      if (!target) return console.warn(`User ${msg.to} not found.`);
      target.receive(msg);
    }
  }
}

// 使用
const room = new ChatRoomMediator();
const alice = new User('Alice', room);
const bob = new User('Bob', room);
alice.send('Bob', 'Hi!');
bob.send('*', 'Hello everyone!');

重點：User 不知道對方的引用，只知道 mediator。路由邏輯集中在 ChatRoomMediator，好測試、好擴充（如禁言、審核、記錄）。

實作二：前端表單協作（用 EventTarget/CustomEvent 當中介）

瀏覽器原生提供 EventTarget 與 CustomEvent，可作為輕量 Mediator：

各元件向「仲裁者」派發事件；

仲裁者判斷目前狀態後分發動作；

好處：不需額外套件，原生跨瀏覽器支援好（IE 例外）。

場景：地址輸入表單

改「國家」→ 重置「城市」與「郵遞區號」

欄位齊全 → 啟用送出按鈕

// 輕量仲裁者：繼承 EventTarget
class FormMediator extends EventTarget {
  constructor() {
    super();
    this.state = { country: '', city: '', zip: '' };

    // 收敘各字段變更
    this.addEventListener('field:change', (e) => {
      const { name, value } = e.detail;
      this.state[name] = value;

      // 規則集中：改國家 → 清空城市與郵遞區號
      if (name === 'country') {
        this.state.city = '';
        this.state.zip = '';
        this.dispatchEvent(new CustomEvent('ui:update', { detail: { reset: ['city', 'zip'] } }));
      }

      // 規則集中：是否可送出？
      const ready = this.state.country && this.state.city && this.state.zip;
      this.dispatchEvent(new CustomEvent('form:ready', { detail: { ready } }));
    });
  }
}

// 視圖元件只負責回報與接收，不保規則
function bindField(id, name, mediator) {
  const el = document.getElementById(id);
  el.addEventListener('input', () => {
    mediator.dispatchEvent(new CustomEvent('field:change', { detail: { name, value: el.value } }));
  });
  mediator.addEventListener('ui:update', (e) => {
    if (e.detail.reset?.includes(name)) el.value = '';
  });
}

function bindSubmit(buttonId, mediator) {
  const btn = document.getElementById(buttonId);
  mediator.addEventListener('form:ready', (e) => (btn.disabled = !e.detail.ready));
}

// 啟動
const mediator = new FormMediator();
bindField('country', 'country', mediator);
bindField('city', 'city', mediator);
bindField('zip', 'zip', mediator);
bindSubmit('submitBtn', mediator);

上例把「誰該被重置、何時能送出」集中在 FormMediator。CustomEvent.detail 能攜帶自訂資料，事件分發與監聽使用 EventTarget 的 dispatchEvent／addEventListener。

實作三：搜尋流程協調器（API、載入指示、結果清單統一調度）

目標：輸入框、結果清單、載入指示器、API 模組互不耦合，由 SearchMediator 編排完整流程（去抖、併發控制、狀態收斂）。

class SearchMediator {
  constructor({ input, resultsView, spinner, api }) {
    this.input = input;
    this.resultsView = resultsView;
    this.spinner = spinner;
    this.api = api;

    this.timer = null;
    this.latestQuery = '';
    this.inflightToken = 0;

    this.input.onQuery = (q) => this.handleQuery(q);
  }

  handleQuery(q) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => this.search(q), 250); // 簡易 debounce
  }

  async search(q) {
    this.latestQuery = q.trim();
    if (!this.latestQuery) {
      this.resultsView.render([]);
      return;
    }
    const token = ++this.inflightToken; // 標記最新請求
    this.spinner.show();
    try {
      const list = await this.api.search(this.latestQuery);
      if (token !== this.inflightToken) return; // 舊結果丟棄
      this.resultsView.render(list);
    } catch (err) {
      if (token !== this.inflightToken) return;
      this.resultsView.error(err);
    } finally {
      if (token === this.inflightToken) this.spinner.hide();
    }
  }
}

// --- 假元件 ---
const input = {
  onQuery: null,
  bind(el) { el.addEventListener('input', () => this.onQuery?.(el.value)); }
};

const resultsView = {
  render(list) { /* 更新結果區 */ },
  error(e) { /* 顯示錯誤 */ }
};

const spinner = { show(){/*...*/}, hide(){/*...*/} };
const api = { search: (q) => fetch(`/api/search?q=${encodeURIComponent(q)}`).then(r => r.json()) };

// 啟動
const mediator = new SearchMediator({ input, resultsView, spinner, api });
input.bind(document.getElementById('q'));

亮點：

規則（去抖、取消舊請求、Loading 顯示時機）全部在 Mediator；

input/resultsView/spinner/api 都是瘦元件；

測試時可以替換 api 為 mock，或檢查 mediator 的流程是否正確。