這是〈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 內的成員(變數、函式等)也可以對外暴露,供父元件使用