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>