모듈 컨텍스트를 사용하여 Svelte 구성 요소 인스턴스 간에 코드 공유

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 모듈 컨텍스트를 사용하여 구성 요소 인스턴스 간에 변수를 공유하는 방법을 살펴보겠습니다.

모듈 컨텍스트

Svelte 구성 요소에는 여러 구성 요소 인스턴스 간에 공유되는 코드가 포함될 수 있습니다.

이를 위해 context='module'  를 사용하여 스크립트 블록을 선언할 수 있습니다. 내부 코드는 구성 요소가 인스턴스화될 때가 아니라 모듈이 처음 평가될 때 한 번 실행됩니다.

예를 들어 다음과 같이 재생되지 않는 오디오 요소를 중지하여 한 번에 하나의 오디오 요소만 재생할 수 있는 여러 오디오 요소를 만드는 데 사용할 수 있습니다.
App.svelte  :

<script>
  import AudioPlayer from "./AudioPlayer.svelte";
</script>

<AudioPlayer
  src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"
/>

<AudioPlayer
  src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3"
/>

<AudioPlayer
  src="http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3"
/>

AudioPlayer.svelts  :

<script context="module">
  let current;
</script>

<script>
  export let src;

  let audio;
  let paused = true;

  const stopOthers = () =>{
    if (current && current !== audio) current.pause();
    current = audio;
  }
</script>

<article>
  <audio
    bind:this={audio}
    bind:paused
    on:play={stopOthers}
    controls
    {src}
  ></audio>
</article>

위의 코드에는 다음의 모든 인스턴스 간에 공유되는 코드가 있는 AudioPlayer 구성 요소가 있습니다.

<script context="module">
  let current;
</script>

이것은 우리가 pause 함수에서 했던 것처럼 재생되고 있지 않은 오디오 요소의 모든 인스턴스에서 stopOthers를 호출할 수 있게 해줍니다. stopOthers는 오디오 요소에서 재생을 클릭하면 실행됩니다.

그런 다음 AudioPlayer 구성 요소에 App.svelte 인스턴스를 포함했습니다.

따라서 오디오 요소 중 하나에서 재생을 클릭하면 다른 요소가 일시 중지됩니다.

수출

context='module' 스크립트 블록에서 내보낸 모든 것은 모듈 자체의 내보내기가 됩니다. 예를 들어 다음과 같이 현재 재생 중인 AudioPlayer의 모든 오디오 요소를 중지하는 버튼을 만들 수 있습니다.
App.svelte  :

<script>
  import AudioPlayer, { stopAll } from "./AudioPlayer.svelte";
</script>

<button on:click={stopAll}>Stop All</button>

<AudioPlayer
  src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"
/>

<AudioPlayer
  src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3"
/>

<AudioPlayer
  src="http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3"
/>

AudioPlayer.svelte  :

<script context="module">
  let elements = new Set();

  export const stopAll = () => {
    elements.forEach(element => {
      element.pause();
    });
  };
</script>

<script>
  import { onMount } from 'svelte';
  export let src;
  let audio;

  onMount(() => {
    elements.add(audio);
    return () => elements.delete(audio);
  });
</script>

<article>
  <audio
    bind:this={audio}
    controls
    {src}
  ></audio>
</article>

위의 코드에서 각 elements 컴포넌트가 마운트될 때 contex='module' 블록에서 생성한 AudioPlayer 세트에 모든 오디오 요소 인스턴스를 추가합니다.

그런 다음 stopAll 의 모든 오디오 요소 인스턴스가 있는 elements 함수를 내보내고   루프를 돌고 pause 를 호출하여 모든 인스턴스에 대해 pause를 호출합니다.
App.svelte  에서는 stopAll에서 AudioPlayer 함수를 가져온 다음 모두 중지 버튼을 클릭할 때 호출합니다.

그런 다음 하나 이상의 오디오 요소에서 재생을 클릭하면 모두 중지 버튼을 클릭하면 모두 일시 중지됩니다.

구성 요소가 기본 내보내기이기 때문에 기본 내보내기를 가질 수 없습니다.

결론

모듈 컨텍스트 스크립트 블록을 사용하여 구성 요소의 모든 인스턴스 간에 공유되는 스크립트 블록을 추가할 수 있습니다.

모듈 컨텍스트 스크립트 블록 내에서 함수를 내보내면 함수를 가져온 다음 호출할 수 있습니다.