SvelteJS：下一个大型 UI 框架

SvelteJS：下一个大型 UI 框架

SvelteJS：下一个大型 UI 框架

SvelteJS 是全新的 UI 框架。然而，Svelte 在很多方面都与 Svelte 截然不同，尤其是在 UI 框架的运作方式以及如何解决用户界面编写问题的理念上。在本文中，我们将通过构建一个待办事项应用（一如既往😃）来探索如何开始使用 SvelteJS。同时，我们还会了解 Svelte 的功能及其工作原理。

TL:DR

SvelteJS 是一个编译器 UI 框架，它的一些特性如下：

• 真正的反应式框架
• 易于学习
• 辅助功能支持
• 超快且捆绑尺寸小
• 作用域 CSS
• 功能齐全的框架，配有大型工具箱，有助于更快地开发。

请继续关注，我们将在本文中探讨所有这些内容以及更多内容。

什么是 Svelte？

Svelte 是一个用于构建用户界面的框架，类似于 Vue 或 React。关键区别在于，Svelte 是一个编译器，而 React 或 Vue 则运行在浏览器中。这一关键区别，加上 Svelte 是一个真正的响应式框架（我认为 React 和 Vue 不是），为我们带来了许多机会，我们将在本文中进行探讨。

在 Svelte 中，我们以与 React 或 VueJS 相同的声明式方式编写代码。我们确实注意到，UI 框架本身就是一个编译器，这一点我们也会在后面的示例中看到。

我们如何开始？

最简单的入门方法是从 npx 下载样板模板，或在 codesandbox 中创建一个项目。创建样板模板的步骤如下：

npx degit sveltejs/template my-todo-app
cd my-todo-app/

npm install
npm run dev

简直易如反掌。现在我们已经准备好 SvelteJS 的配置，可以开始编码了。这个项目是用 rollup 设置的，它是一个打包工具，类似于 webpack，但更简洁。

使用 SvelteJS 的样板模板

乍一看，该项目结构与从头开始从 React 或 Vue 获得的结构非常相似。

注意，我们有一个main.js文件，它的作用与其他 UI 框架基本相同，即将创建的 js 包注入到 HTML 元素中。以上就是设置的全部内容，让我们来看看代码。

Svelte 组件

SvelteJS 组件类似于 HTML 文件，但顶部添加了许多语法糖。JavaScript 代码放在 script 标签中，CSS 代码放在 style 标签中。其余部分则被解释为 HTML。以下是模板自带的 App.svelte 组件：

<script>
  export let name;
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>Hello {name}!</h1>

它打印了从 main.js 传入的 name 变量。这是我们首先看到的语法上的不同。Props是那些在 script 标签中导出的属性。

通过分配反应性

但我们想创建一个待办事项应用，所以让我们开始做一些修改。我们先添加一个输入框，并将其与一个变量连接起来。

与 React 或 Vue 非常相似，但样板代码少得多。我们有一个 todo 变量，当输入字段中的值发生变化时，它会更新。

请注意，我们使用了赋值运算符。赋值运算符是 SvelteJS 响应式系统的重要组成部分。当为变量赋值时，该赋值操作还会告知 SvelteJS 应用程序中发生了某些变化，并且 Svelte 需要在事件循环结束时更新 DOM 中的变量。没错，事件循环可以批量更新 DOM，这有助于最大限度地减少重绘。

实际上，我们可以借助 SvelteJS 双向数据绑定指令使其变得更清晰一些。

它仍然像以前一样工作。我们使用该bind指令对 HTML 元素进行读写操作。这也适用于复选框和其他类型的输入。

让我们继续编码并检查如何迭代数组。

现在我们添加了将待办事项添加到数组并显示这些已添加待办事项的功能。在新添加的代码中，有一些重要的观察点：

• ${each}HTML 中的命令会遍历一个数组，其中元素作为第一个参数，索引作为第二个参数。注意，我们必须使用 来结束迭代。{/each}要使用索引，请写入{#each todos as (todo, index)}

• 在第 5 行，我们重新赋值了数组，而不是使用 push操作。在 SvelteJS 中，使用 push 之类的操作不会触发该值的更新。这是一个非常重要的观察结果，正如我们之前提到的，SvelteJS 响应式系统是围绕赋值运算符构建的。因此，我们不能使用不返回更新变量的操作。push 会在添加新项后返回数组的长度。

• 在 React、VueJs 和其他框架中，我们需要为每个组件添加一个包装元素。在 SvelteJS 中，我们不需要为每个组件添加一个包装元素，这有助于避免 div 嵌套问题。

• 组件中没有this。由于 SvelteJS 是一个编译器，因此它不必应用在浏览器中运行的 UI 框架所必须遵循的所有规则。

但我们还没有完全做出反应

现在我们已经看到了一些关于 SvelteJS 中响应式工作原理的示例。它的工作原理略有不同，因为代码在编译时编译，并且只在浏览器中运行一次。我们已经了解了如何在 HTML 中使用变量，并且如果我们为该变量赋值，DOM 也会更新。但是，如果我们有一个依赖于另一个变量的变量呢？让我们考虑这个例子：

  let isDone = false;
  const infoMessage = isDone ? 'You finished' : 'Keep going!!'

如果我们在代码中的某个地方更改了 isDone 变量，infoMessage 并不会重新计算。正如我们刚才提到的，这是因为代码只运行了一次。让我们以待办事项应用为例，它现在可以将待办事项设置为已完成，并过滤剩余的待办事项。

正如我们在本例中看到的，它不是响应式的。我点击了复选框来隐藏“购买杂货”按钮，但它并没有消失。这是因为我们的代码只运行了一次。

Svelte 想出了一个解决这个问题的方法，那就是“添加”一个响应式命令。我们可以添加一个$:，它是一个有效的 JavaScript 代码，并且是一个带标签的语句。它实际上不执行任何操作，所以 Svelte 用它来实现响应式。它的工作原理是，$:就像一个订阅，它会订阅表达式中的值。所以，如果我们重新审视我们的例子并进行这样的修改，它应该可以正常工作。

通过此更改，我们的待办事项应用程序现在具有响应能力，并在选中复选框时过滤掉已完成的待办事项。

更确切地说，这段代码是按拓扑顺序运行的。这意味着filteredTodos依赖onlyShowRemainingTodos和filtreredTodos将在 之后运行onlyShowRemainingTodos已经改变。这意味着我们也可以拥有依赖于其他反应性值的响应性值。例如，我们可以有一个依赖于已过滤待办事项的变量：

let todos = [
  {id: 0, text: 'Buy groceries', isDone: false},
  {id: 1, text: 'Go to the Gym', isDone: false}];
let onlyShowRemainingTodos = false;

$: filteredTodos = onlyShowRemainingTodos ?
  todos.filter(x => !x.isDone) : todos;
$: numberOfFilteredTodos = filteredTodos.length;

作用域 CSS

style 标签中的所有 CSS 默认都具有作用域，这真是太棒了。这意味着我们不必担心像 BEM 或预处理器这样复杂的命名方案。如果您愿意，仍然可以使用 BEM 或预处理器，但当全局 CSS 问题已经解决时，它们的优势就没那么大了。作用域 CSS 赋予我们的作用是，每个组件的 CSS 都是专属的。因此，我们可以在两个不同的组件中使用相同的 CSS 类，而不会发生名称冲突。

正如我们在此示例中所见，svelte 将我们的 CSS 哈希处理为特定于 App 组件的 CSS，从而使其具有作用域。另请注意，我添加了一个未在 HTML 中使用的 CSS 类。由于该 CSS 类在任何地方都没有使用，因此 Svelte 不会将其包含在 CSS 包中。

其他主要功能

到目前为止，我们已经介绍了 SvelteJS 的一些功能，但还有更多功能。我们将简要介绍一些其他功能，但不会在本文中全部介绍。如需查看完整的代码示例和所有功能，我建议您访问svelte.dev 。

表现

在编译过程中，Svelte 将我们的 Svelte 组件编译成高性能的命令式 JavaScript 代码。这使得我们的代码在浏览器中运行速度非常快。正如我提到的，我们的代码只运行一次，而不是每次状态发生变化时都运行，这是一个巨大的性能优势。当 Svelte 将我们的声明式代码转换为高性能的命令式代码时，它也会从我们的 bundle 中消失，因为所有更新 DOM 的逻辑都在构建过程中完成，而 SvelteJS 在我们的 bundle 中剩下的只是一些辅助函数。

好吧，我们的 bundles 很小，这意味着更快的加载时间和更快的首次交互时间，而且由于使用了命令式代码，我们的应用速度更快。还有什么不喜欢的呢😃

没有虚拟 DOM

使用 Svelte，所有用于计算最高效地响应状态变化的计算都是预先完成的。按照这种思路，我们不需要虚拟 DOM。虚拟 DOM 现在实际上可以被视为性能瓶颈。Svelte 不使用虚拟 DOM，因此速度更快。

易于学习

与大多数其他框架不同，Svelte 组件看起来像 HTML，并在 script 和 style 标签中嵌入了 JavaScript 和 CSS。这使得代码即使对任何 UI 框架都没有经验的用户也能轻松上手。对于已经在使用 UI 框架的用户来说，它也非常容易上手。

样板代码也很少，这使得它非常易于阅读和理解。这是学习新框架的一大卖点，它让你可以按照自己的意愿去做，而无需编写大量特定于框架的代码。

完善的框架

SvelteJS 本身就是一个编译器，这也让我们在选择 Svelte 可以纳入框架的功能方面拥有优势。它让 Svelte 拥有了包含大量功能的优势，但只有你在应用中用到的功能才会被包含在 bundle 中。其余功能将被 tree shaken 掉。这真的很棒，它为我们提供了一个非常丰富的工具箱，让我们的开发更加轻松，而无需为那些我们用不到的功能付费。

结论

我认为 Svelte 是一个非常优秀的框架。它易于学习、运行速度快，并且拥有许多实用且酷炫的功能。它提供了一种全新的视角，让我们能够从响应式的角度思考 UI 框架，并了解 UI 框架应该解决哪些问题。由于 Svelte 拥有丰富的工具箱，我们可以轻松地开始使用，而且无需过多担心性能问题。我认为 Svelte 未来会成为主流的 UI 框架之一，我希望我的经验能够激励你尝试一下。你可以按照我的步骤搭建自己的项目，也可以访问svelte.dev并尝试一些教程步骤。

谢谢阅读！