Svelte 教程：动作的巧妙运用

前端

2024-01-31 06:51:03

Svelte 动作：让你的项目更具交互性

在 Svelte 中，动作是元素级生命周期函数，可以帮助你创建更具交互性和响应性的用户界面。它们可以用来处理各种事件，例如点击、悬停和滚动，并执行各种操作，例如更新数据、显示或隐藏元素，甚至触发动画。

何时使用动作

动作非常适合以下情况：

与第三方库接口
延迟加载图像
添加提示
添加自定义事件处理程序

创建自定义动作

要创建自定义动作，只需在你的 Svelte 组件中创建一个名为 on[EventName] 的函数。例如，要创建一个在元素上触发 click 事件时运行的动作，你可以编写以下代码：

<script>
  function onClick(event) {
    // 做一些事情
  }
</script>

<button on:click={onClick}>点击我</button>

使用动作

一旦你创建了一个动作，你就可以在你的 Svelte 组件中使用它。只需在要应用动作的元素上添加 on:[EventName] 属性，并将其值设置为动作的名称。例如，要将 onClick 动作应用于按钮，你可以编写以下代码：

<button on:click={onClick}>点击我</button>

延迟加载图像

动作还可以用来延迟加载图像。这可以帮助你提高应用程序的性能，特别是当你有许多图像需要加载时。

要延迟加载图像，你可以使用 IntersectionObserver API。这个 API 可以让你监听元素何时进入或离开视口。你可以使用这个信息来决定是否加载图像。

以下是使用 IntersectionObserver API 延迟加载图像的示例：

<script>
  import { onMount } from 'svelte';

  function createIntersectionObserver(element, callback) {
    const observer = new IntersectionObserver(callback, {
      rootMargin: '100px'
    });

    observer.observe(element);

    return {
      destroy() {
        observer.unobserve(element);
      }
    };
  }

  function onMount() {
    const images = document.querySelectorAll('img[data-src]');

    images.forEach(image => {
      const src = image.getAttribute('data-src');

      createIntersectionObserver(image, ([entry]) => {
        if (entry.isIntersecting) {
          image.src = src;
        }
      });
    });
  }
</script>

<body on:mount={onMount}>
  <img data-src="image.jpg" alt="Image">
</body>