站長阿川 · 09月18日

島嶼之間用瀏覽器原生事件溝通

不需要狀態管理，CustomEvent 就夠了。

用 islands 架構，一定會遇到這題：兩個互不相干的元件，要怎麼同步？

我的網站上，購物車狀態同時被三個地方用到：

導覽列右上角的數量角標
抽屜購物車
購物車頁

它們是三個獨立掛載的元件，彼此看不到對方。客戶在商品頁按「加入購物車」，這三個地方都得更新。

很多人到這裡就開始找 Redux、Zustand、或是自己寫一個 store。

不用。瀏覽器本來就有事件系統。

做法

購物車的每一次異動，都走同一個函式。成功之後，發一個事件：

window.dispatchEvent(new CustomEvent('cart:updated', { detail: data }));

想同步的人，自己訂閱：

window.addEventListener('cart:updated', (e) => {
    const count = e.detail.count || 0;
    badge.textContent = count;
    badge.classList.toggle('hidden', count === 0);
});

就這樣。角標不知道抽屜的存在，抽屜不知道購物車頁的存在，它們只認識 cart:updated 這個名字。

想打開抽屜也一樣，發個事件就好：

window.elaceiteCart.open();   // 內部就是 dispatchEvent('cart:open')

為什麼這樣夠用

因為島嶼之間的共用狀態很少。 我的整個網站只有兩個：購物車、還有 toast 通知。為了兩個狀態引進一套狀態管理函式庫，成本遠大於收益。

因為它不挑框架。 發事件的是一段普通的 <script>，接收的可以是 Preact 元件，也可以是一行原生 DOM 操作（角標就是）。不需要所有東西都活在同一個框架的世界裡。

因為它天然是單向的。 事件只能廣播，不能回傳。所以資料流永遠是「有人改了購物車 → 廣播 → 大家更新畫面」，不會變成元件之間互相呼叫的那種網。

一個實務細節

事件的 detail 我一律帶完整的最新狀態，不是帶「剛剛改了什麼」。

detail: data   // 後端回傳的完整購物車 payload

這樣訂閱者不需要自己累積狀態、不需要知道之前發生過什麼，拿到什麼就畫什麼。任何一個元件晚掛載、或是漏掉了一次事件，下一次事件來的時候會自動修正。

廣播完整狀態，不要廣播差異。 這是我在這裡學到最有用的一條。

站長阿川

⭐️ Shopify 網站開發服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

0個讚 0留言 2瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川

🏆 本月排行榜

🥇

站長阿川

📝45 💬1

643

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次