阿里工程师教你使用 Svelte 构建阅读列表的小技巧

velte 在过去两年中获得了很多赞誉，远非“只是另一个前端框架”。它在 2019 年 JS 调查中获得了“年度突破奖”，随后在 2020 年的满意度评分中名列前茅。它还在 Stack Overflow 2021 调查中被评为最受喜爱的 Web 框架。

Svelte 以其小包大小、非常好的性能和易用性的组合吸引了开发人员。同时，它还装满了很多好东西。已经提供了一个简单的状态管理解决方案，以及现成的过渡和动画。本介绍性教程将阐明 Svelte 如何实现这一目标。本系列中的以下教程将更详细地介绍如何使用 Svelte 提供的各种可能性来使用 Svelte 实现应用程序。

苗条的背景故事

但首先，关于 Svelte 的一些背景故事。虽然它在 2020 年代初才进入主流，但 Svelte 的存在的时间要长得多。

对 GitHub 的第一次提交是在 2016 年底。它的创建者是 Rich Harris，一个开源向导，他最著名的其他发明是现代打包工具 Rollup。里奇哈里斯当时在新闻杂志《卫报》担任图形编辑。他的日常工作是为网站创建交互式可视化，他希望有一个工具可以让他轻松编写这些，而不会影响网站大小或速度。同时，他想要一些平易近人的东西，以便其他不太懂技术的同事能够快速创建可视化。

出于这些需求，Svelte 诞生了。从新闻编辑室开始，Svelte 迅速在开源社区聚集了一小部分追随者。但直到 2019 年 4 月，Svelte 才真正为世人所知。这个日期标志着版本 3 的发布，这是一个完全重写的版本，重点是开发人员的体验和可接近性。从那以后，Svelte 的人气大涨，更多的维护者加入了团队，Rich Harris 甚至加入了 Vercel 全职从事 Svelte 的工作。

有关 Svelte 的深入教程，以及它与 React 和 Vue 的区别

建立一个简单的书单

让我们深入了解 Svelte！我们将建立一个小书单，允许我们在阅读列表中添加和删除书籍。最终结果将类似于下图。

我们将从项目模板中搭建我们的项目开始。我们将使用官方的Svelte 模板。替代方案是使用Vite 驱动的模板或使用SvelteKit，这是一个基于 Svelte 的框架，用于构建具有内置路由的成熟应用程序——但我们将在本教程中尽可能保持它为准系统。

下载模板后，切换到它的文件夹并运行npm install，它会下载我们需要的所有包。然后我们将切换到App.svelte，我们将在其中将内容替换为纯 HTML 版本以布置我们想要的视觉效果：

Add Book

My Books

  
A book

我们可以直接在 Svelte 文件的最顶层编写上面的代码；我们不需要添加任何包装元素。Svelte 的语法是 HTML 的超集，因此任何在 HTML 文件中有效的内容在 Svelte 文件总是有效的。

现在的问题是如何将动态部分放入其中。我们将首先向脚本添加一个静态列表并通过循环呈现它：

  
Add Book
  

My Books

  {#each books as book}
    
{book}
  {/each}

我们添加了一个script标签，在其中放置了与组件相关的 JavaScript 逻辑。每次安装组件时都会执行该逻辑。我们还使用特殊的 Svelte 语法增强了 HTML，以创建循环并打印每本书的标题。如您所见，Svelte 对控制流块有不同的语法，与 Vue 或 Angular 不同，后者以特殊属性的形式添加此类功能。这使代码更具可读性，因为您可以更轻松地发现它。如果您想在控制流块中包含多个顶级项目，它还使得无需创建包装器元素。

通过用花括号将变量括起来输出书名。通常，每当您在模板中遇到花括号时，您就知道您正在输入与 Svelte 相关的内容。我们将在本教程系列的第 2 部分中更详细地研究模板语法。

对用户输入做出反应

books我们现在可以渲染由我们的变量定义的任意书名列表。添加一本新书怎么样？为此，我们需要增强

Add Book

My Books

{#each books as book}
• {book}
{/each}

我们添加了一个名为 的新变量newBook，它应该反映输入值。为此，我们将其绑定到by writing bind:value={newBook}。这样就建立了双向绑定，所以每次用户在标签中输入文本时，都会newBook更新，如果newBook在

My Books

{#each books as book}
• {book}
{/each}

就是这样！只需导入其中一个内置过渡并通过添加transition:fade到元素来应用它，我们就可以获得平滑的淡入过渡。我们的迷你应用程序现已完成。这还不包含顶栏和背景渐变，但现在您也应该很容易添加它。这是最终结果：

  
Add Book
  

My Books

  {#each books as book}
    
{book}
  {/each}

架构考虑

我们已经看到了如何用 Svelte 编写一个只用 32 行代码的小应用程序。当然，我们只触及了表面。一个成熟的应用程序需要某种状态管理、多个组件以及将这些组件相互集成的方法。

例如，将一个待办事项的显示拆分为一个单独的组件是有意义的，因为我们将添加诸如就地编辑名称或将其标记为已完成等功能。随着时间的推移，将这一切整合到一个组件中将变得难以维护。幸运的是，使用其他组件就像从另一个 Svelte 文件中导入它作为默认导入一样简单，并以与我们已经看到的常规 DOM 元素类似的方式与之交互。我们将在本系列的第 5 部分中更详细地研究组件交互。

另一个例子是待办事项的管理。现在，它们在组件内部进行处理，并且没有与后端的连接。如果我们要添加 API 调用，我们会将 UI 逻辑与后端交互混合在一起，这通常在组件之外更好地处理，以便更好地分离关注点。为此，我们可以使用 Svelte 商店，我们将在第 4 部分中介绍。

如您所见，Svelte 提供了满足我们所有要求的解决方案，我们将在本系列课程中对它们进行研究。

准备好，设置……苗条？

那么，在您的下一个项目中使用 Svelte 是否安全？你的经理可能会问，Svelte 是否会在未来几年内出现，或者会像以前的前端框架明星一样精疲力尽。没有一家大公司像 Angular 和 React 那样支持 Svelte 的整个开发，但 Vue 已经证明这不是问题。此外，如开头所述，Svelte 的创建者 Rich Harris 现在正在全职工作。随着 Svelte 的受欢迎程度不断上升，在未来几年没有任何迹象表明它会流行。

选择框架的另一个方面是生态系统及其工具。与 React 相比，生态系统仍然很小，但是每天都有新的库出现，并且已经有一些非常好的组件库。同时，由于 Svelte 非常接近原生 HTML 和 JavaScript，因此很容易将任何现有的常规 HTML/JavaScript 库集成到您的代码库中，而无需包装库。

关于工具，Svelte 看起来相当不错。有一个积极维护的官方 VS Code 扩展，以及一个可供许多其他 IDE 用于集成 Intellisense 的底层语言服务器。IntelliJ 还为 Svelte 提供了一个插件，最近聘请了它背后的创建者在 JetBrains 工作。还有各种工具可用于将 Svelte 与各种捆绑器集成。是的，您还可以将 TypeScript 与 Svelte 一起使用。

如果您正在寻找构建一个成熟的网站或网络应用程序，您可能也有兴趣查看SvelteKit（请参阅我们的 SvelteKit 初学者指南）。它提供了一流的开发体验，并带有一个灵活的基于文件系统的路由器。它还使您能够部署到许多不同的平台，例如 Vercel、Netlify、您自己的 Node 服务器，或者只是一个好的旧静态文件服务器，具体取决于您的应用程序的功能和需求。

Svelte 速览

简而言之，以下是关于 Svelte 需要记住的要点：

• 它有一个全职维护者
• 它有很好的工具
• 它的特点是稳定的
• 它的生态系统正在增长
• SvelteKit 可用于快速构建应用程序

如果本文对你有帮助，别忘记给我个3连问 ，点赞，转发，评论，，咱们下期见。

收藏 等于白嫖，点赞才是真情。

学习更多JAVA知识与技巧，关注与私信博主

免费学习领取JAVA 课件，源码，安装包等等