這是〈Svelte 從小白到入門〉系列的第十五集，各集連結如下：

在此之前我們對某個 Svelte 元件的每一次調用，都是生成一個獨立的物件，儘管他們有相同的程式邏輯，但在物件的內部狀態並不共享，除非用 store 或 context 等的資料交換機制。如果我們想讓所有的實例都有共享的狀態，那得用上 Svelte 的 module context。

共享區塊

Module context 是個由 <script context="module"> 所構成的區塊，Svelte 元件內的 module context 程式碼僅會在首次調用時執行，後面再次調用就不會再執行一次，定義在 module context 內的變數是可以被同一個元件的不同實體調用的，並且這樣的資料共享機制是不需要透過外部 API 實現的。

在下面的例子裡，有多個 AudioPlayer 元件存在，他們共享著一個 current 變數，透過變數的切換，我們可以做到對〈The Blue Danube Waltz〉按下播放時，其他正在播放中的樂曲自動暫停這樣人性化的特性：

在 AudioPlayer 元件中，current 為當下播放的物件，並且是所有 AudioPlayer 物件共享的，當對一首曲按播放，除了觸發預設的播放行為外，也觸發了 stopOthers()，此函式將原有的 current 暫停，並將自身播放器賦值給 current。

暴露共享區塊

放在 module context 區塊內的成員也可以對外暴露！

在下面的範例中，所有的播放器物件都蒐集在 elements 這個 set 內，並且暴露了一個 stopAll() 的函式：

在父元件 app 中，我們引入並調用 AudioPlayer 暴露出來的 stopAll()，讓按鈕觸發它。

小結

本集重點整理：

  • Module context 是元件中可跨物件（實體、實例）共享的區塊，此區塊只在該元件初次調用時執行，所以不會不斷的被新元件重新初始化
  • Module context 區塊由 <script context="module"> 所包圍
  • Module context 內的成員（變數、函式等）也可以對外暴露，供父元件使用