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 版本以布置我们想要的视觉效果：
<h4>Add Book</h4>
<input type="text" />
<h4>My Books</h4>
<ul>
<li>A book</li>
</ul>
我们可以直接在 Svelte 文件的最顶层编写上面的代码；我们不需要添加任何包装元素。Svelte 的语法是 HTML 的超集，因此任何在 HTML 文件中有效的内容在 Svelte 文件总是有效的。
现在的问题是如何将动态部分放入其中。我们将首先向脚本添加一个静态列表并通过循环呈现它：
<script>
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
</script>
<label>
<h4>Add Book</h4>
<input type="text" />
</label>
<h4>My Books</h4>
<ul>
{#each books as book}
<li>{book}</li>
{/each}
</ul>
我们添加了一个script标签，在其中放置了与组件相关的 JavaScript 逻辑。每次安装组件时都会执行该逻辑。我们还使用特殊的 Svelte 语法增强了 HTML，以创建循环并打印每本书的标题。如您所见，Svelte 对控制流块有不同的语法，与 Vue 或 Angular 不同，后者以特殊属性的形式添加此类功能。这使代码更具可读性，因为您可以更轻松地发现它。如果您想在控制流块中包含多个顶级项目，它还使得无需创建包装器元素。
通过用花括号将变量括起来输出书名。通常，每当您在模板中遇到花括号时，您就知道您正在输入与 Svelte 相关的内容。我们将在本教程系列的第 2 部分中更详细地研究模板语法。
对用户输入做出反应
books我们现在可以渲染由我们的变量定义的任意书名列表。添加一本新书怎么样？为此，我们需要增强<script>标签中的逻辑并将其连接到<input>元素：
<script>
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
let newBook = '';
function addBook(evt) {
if (evt.key === 'Enter') {
books = [...books, newBook];
newBook = '';
}
}
</script>
<label>
<h4>Add Book</h4>
<input type="text" bind:value={newBook} on:keydown={addBook} />
</label>
<h4>My Books</h4>
<ul>
{#each books as book}
<li>{book}</li>
{/each}
</ul>
我们添加了一个名为 的新变量newBook，它应该反映输入值。为此，我们将其绑定到<input>by writing bind:value={newBook}。这样就建立了双向绑定，所以每次用户在标签中输入文本时<input>，都会newBook更新，如果newBook在<script>标签中更新，则显示的值会<input>发生变化。我们可以对简单的动态属性做同样的事情，但是这样可以节省一些代码——这是您在 Svelte 中间经常遇到的一种思维模式。
当用户按下enter时，我们希望将新书名添加到列表中。为此，我们添加了一个 DOM 事件侦听器。为了告诉 Svelte 挂钩事件，我们只需on在事件名称和其余事件名称之间添加一个冒号——所以在这种情况下它是on:keydown. 之后，我们使用花括号并将函数的名称放在里面。每次事件触发时都会调用该函数。有关此模板语法的更多信息，请参阅本教程系列的第 2 部分。
在这种情况下调用的函数是addBook，我们在其中检查键盘事件，如果用户确实按下enter了 ，我们更新books变量。请注意缺少thisAngular 或 Vue 2 中间的上下文，或者缺少 Vue 3 中的特殊值对象，或者setStateReact 中缺少。在这种情况下，Svelte 不需要额外的语法即可知道变量是否更新。这可能让人觉得很神奇，但同时也像是“简单的 JavaScript”。
要了解 Svelte 是如何做到这一点的，我们需要深入了解一下。Svelte 实际上对.svelte文件做了什么，它什么时候处理它？答案：Svelte 实际上是一个编译器！它甚至在您的代码加载到浏览器中之前就完成了大部分工作。Svelte 解析代码并将其转换为常规 JavaScript。在解析过程中，它可以看到newBook模板中使用了类似的变量，因此对其进行赋值会导致重新渲染。因此，编译输出将通过调用来包装这些分配$$invalidate函数，它将为下一次浏览器绘制安排重新渲染这个确切的组件。这就是 Svelte 出色性能的秘诀：它预先知道哪些部分可以触发重新渲染，然后只需要在这些确切的地方工作，通过手术更新 DOM。这也是 Svelte 应用程序的包大小如此之小的原因：不需要的所有内容都不会成为输出的一部分，因此 Svelte 可以省略其微小运行过程中不需要的所有部分。一个苗条的你好世界！应用程序的捆绑包大小仅为 2.5KB！
唯一需要注意的是，Svelte 只寻找任务。这就是为什么我们需要做books = [...books, newBook];or books.push(newBook); books = books;。否则，Svelte 不会知道它books已经更新。
收尾工作
我们做到了！我们现在可以查看书籍并将其添加到我们的列表中！不过，它看起来并不那么漂亮，所以让我们对我们的 UI 做一些最后的润色。首先，我们将添加一些 CSS 来为我们的元素设置样式：
<!-- script and html code... -->
<style>
input {
padding: 5px 10px;
}
li {
list-style: none;
}
ul {
padding: 5px 0;
}
</style>
如您所见，我们只是在文件中添加了一个<style>标签，.svelte并继续在其中编写常规 CSS。如果您担心上面的代码会为整个应用程序中的 all或标签设置样式<input>，请确保它不会。默认情况下，Svelte 范围样式，因此它们仅适用于定义它们的组件。如果您想全局定义某些内容，请使用函数包装选择器。例如，如果您想为应用程序中的所有 s 设置样式，则代码将为.<li><ul>:global<input>:global(input) { padding: 5px 10px; }
现在的造型好多了。让我们用一个过渡来完成它以获得更好的用户体验：我们希望新的列表元素淡入。为此，我们只需要使用 Svelte 的内置过渡和动画之一并应用它们：
<script>
import { fade } from 'svelte/transition';
// ..
</script>
<!-- input ... -->
<h4>My Books</h4>
<ul>
{#each books as book}
<li transition:fade>{book}</li>
{/each}
</ul>
<!-- styling ... -->
就是这样！只需导入其中一个内置过渡并通过添加transition:fade到元素来应用它，我们就可以获得平滑的淡入过渡。我们的迷你应用程序现已完成。这还不包含顶栏和背景渐变，但现在您也应该很容易添加它。这是最终结果：
<script>
import { fade } from 'svelte/transition';
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
let newBook = '';
function addBook(evt) {
if (evt.key === 'Enter') {
books = [...books, newBook];
newBook = '';
}
}
</script>
<label>
<h4>Add Book</h4>
<input type="text" bind:value={newBook} on:keydown={addBook} />
</label>
<h4>My Books</h4>
<ul>
{#each books as book}
<li transition:fade>{book}</li>
{/each}
</ul>
<style>
input {
padding: 5px 10px;
}
li {
list-style: none;
}
ul {
padding: 5px 0;
}
</style>
架构考虑
我们已经看到了如何用 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 课件，源码，安装包等等
