Svelte发布新功能“附件”以增强DOM的交互性和响应性

2025年06月17日由佚名发表 35 0

Svelte的最新版本引入了一个名为“附件”的新功能它通过增强Web应用程序的交互性和响应性来提升DOM的性能。Svelte的附件功能取代了之前的Svelte动作。

与Svelte动作类似，开发者可以使用附件来提供代码，以便在组件或DOM元素挂载或卸载时执行操作。通常，提供的代码会为感兴趣的事件设置监听器，并在附件目标卸载时移除该监听器。附件还可以与需要目标DOM元素的第三方库结合使用。依赖于响应值的附件将在这些值变化时重新运行。

以下是一个示例使用ScrambleTextPlugin来自GSAP动画库：

<script>

  import { gsap } from 'gsap'

  import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin'



  gsap.registerPlugin(ScrambleTextPlugin)



  // ⚠️ attachments live inside of `$effect`

  function scramble(text, options) {

    return (element) => {

      gsap.to(element, {

        duration: 2,

        scrambleText: text,

        ...options

      })

    }

  }



  let text = $state('Svelte')

</script>



<!-- tracking context -->

<input type="text" bind:value={text} />

<div {@attach scramble(text)}></div>

当DOM首次挂载时，文本'Svelte'将被打乱。此外，对文本值的任何进一步更改也将导致文本被打乱。开发者可以在Svelte游乐场中试验这个示例。

因此，Svelte的附件功能扩展了Svelte动作，后者没有为其参数提供类似的响应性。此外，Svelte附件可以在Svelte组件上设置，而Svelte动作只能在DOM元素上声明。该版本提供了一种从动作创建附件的机制，从而允许开发者重用现有的动作库。

附件可以用于将行为与标记分开封装（如在其他UI框架中所做的，例如React中的钩子）。已经作为动作实现并现在可以从附件功能中受益的行为示例包括剪贴板复制，将剪贴板粘贴到元素中，捕获元素外的点击，掩盖用户输入，动画化元素，指针拖动滚动行为，提供快捷键，使元素可滑动，点击下载，等等。

文章来源：https://www.infoq.com/news/2025/06/svelte-releases-attachments/

标签：

人工智能

0 评论

欢迎关注ATYUN官方公众号

商务合作及内容投稿请联系邮箱:bd@atyun.com

上一篇 OpenAI与微软关系的裂痕据报道正在扩大

下一篇 “人工智能教父”警告超级智能机器可能通过生物战消灭人类

评论登录

要发表评论，您必须先登录。

jonatasgrosman/wav2vec2-large-xlsr-53-english facebook/dino-vitb16 bert-base-uncased xlm-roberta-large xlm-roberta-base gpt2 microsoft/resnet-50 facebook/dino-vits8

AGENTIC AI如何塑造未来