Svelte/Sapper 中各个页面的脚本标记范围如何？

Question

Sapper 中一个页面的脚本标签中导入库（ScrollMagic）的实例，当导航到其他页面时该实例保持存在。

我尝试在 ondestroy 中销毁它，但我无法引用引用实例的变量（在 oncreate 中创建）。

如何将脚本标记的范围限定到单个页面，或者在离开页面时销毁实例？

Answer 1

您可以通过两种方式访问 ondestroy 中创建于 oncreate 中的内容。第一种是将它们添加为组件的属性：

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      this.controller = new ScrollMagic.Controller(...);
      this.scene = new ScrollMagic.Scene(...);
    },

    ondestroy() {
      this.controller.destroy();
      this.scene.destroy();
    }
  };
</script>

第二种是使用this.on("destroy", ...)形式：

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      const controller = new ScrollMagic.Controller(...);
      const scene = new ScrollMagic.Scene(...);

      this.on('destroy', () => {
        controller.destroy();
        scene.destroy();
      });
    }
  };
</script>

Svelte/Sapper 中各个页面的脚本标记范围如何？

How is the script tag scoped for individual pages in Svelte/Sapper?

svelte