Svelte 官方入门教程（1）—— 简介

最新推荐文章于 2024-09-25 00:30:00 发布

前端Jason

最新推荐文章于 2024-09-25 00:30:00 发布

阅读量1.7k

点赞数

分类专栏： svelte 文章标签：前端 svelte

原文链接：https://zhuanlan.zhihu.com/p/367431533

版权

svelte 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

在介绍 Svelte 之前，首先解决的要务问题是：
Svelte 不是 Servlet，Svelte 是一个前端 Web 框架，而 Java Servlet 与 Svelte 不是一个类型的程序，务请明鉴。
如有误入，请出门右转。

一、初窥门径

花径不曾缘客扫，教程今始为君开。
本教程循序渐进，为你倾囊相授如何使用 Svelte 轻松创建快速小巧的应用。

如果你想深入精微，探求透彻，不妨随时翻阅 API 文档及示例。

倘若你现在就迫不及待想在本机上开发，60秒极速入门正是为你而准备的。

本教程所有的示例都可以在线试验，你在学习过程中无需创建任何项目或者安装软件包，点击下方的链接进入 REPL，即可边看教程，边实践：

https://svelte.dev/repl

1. 什么是 Svelte？

Svelte 用于构建快速的 Web 应用。

Svelte 类似 React 和 Vue，都致力让你轻而易举地构建灵活的可交互的用户界面。

与它们截然不同的是：Svelte 在构建时将你的代码转为更优的 JavaScript，而不是在运行时才解释执行你的代码。

这预示着你无需付出框架本身的性能成本，且首次加载也无额外性能损耗。

你可以使用 Svelte 编写整个应用，也可以用来逐步重构现有代码，整半皆可；还可以只输出单个独立组件（无需强制附带框架自身）并将其用于任意框架中，可谓百面玲珑。

2. 如何使用本教程？

首先，你至少已对 HTML、CSS 和 JavaScript 有过初步了解，否则学习过程将会如堕烟海，茫然失措。

请跟随本教程精心规划的步伐按部就班，每一小节在介绍新知识时，都会配套一个小小练习。所有章节的学习次第承前启后，切忌肆意跳跃阅读。

3. 理解组件

一个 Svelte 应用由一个或多个组件（Components）组合而成。

每个组件对应一个可重用的 .svelte 文件，包含了组件的 HTML、CSS 和 JavaScript 全部代码。

以下是一个最简单的组件：

<h1>Hello world!</h1>

二、添加数据

只呈现一些标签的组件让人感觉索然无趣，我们尝试加些数据。

首先，在组件中添加一个 script 标签，并声明一个 name 变量：

<script>
    let name = 'world'; 
</script> 
<h1>Hello world!</h1>

然后，你可以在标记中使用这个 name 变量：

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

在花括号中，我们可以编写任意 JavaScript。

你接着可以尝试以下把 name 改为 name.toUpperCase()，这样打招呼显得更强烈。

注意：你看似创建的是全局变量，实际上，name 仍然只是局限于组件的局部变量，也就是说，你无法在全局对象（Window）中访问到组件中声明的 name 变量。

三、动态属性

花括号除了可以控制文本以外，同时适用于元素的属性。以下方代码为例：

<script>
  let src = 'tutorial/image.gif';
</script>

<img>

下方的图片标记缺少了 src 特性属性，现在加上试试：

<img src={src}>

小试牛刀，初露锋芒。

但是 Svelte 在 build 时仍然给出一条警告：

A11y: <img> element should have an alt attribute

据警告所述，img 元素应该加上 alt 属性。

此举的目的是期望你的应用尽可能扩大受众，顾及全民，包括视力欠佳、运动障碍、低端硬件或网速缓慢的人群。

可访问性（Accessibility，缩写 a11y）往往费时费力，如果你编写了有违可访问性的标记，Svelte 会通过警告来提醒你。

在这种情况下，我们缺少了为使用屏幕阅读器的用户描述图像的 alt 属性，或者为网络连接缓慢或不稳定、无法下载图像的用户描述图像。让我们添加一个：

<img src={src} alt="A man dances.">

我们可以在属性内使用花括号。

尝试将它修改为 "{name} dances."，记得在 <script> 标签中声明 name 变量。

属性缩写

名称和值相同的属性并不少见，例如 src={src}。

Svelte 为我们提供了这种情况的便捷速记缩写方式：

<img {src} alt="A man dances.">

四、样式

就像在HTML中一样，您可以在组件中添加<style>标记。

<style>
	/* 样式写在此处 */
</style>

<p>这是一段话。</p>

让我们为

元素添加一些样式：

App.svlete

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

<p>这是一段话。</p>

重要的是，这些规则是“作用域内的组件”。您不会在应用程序的其他地方意外更改<p>元素的样式，正如我们将在下一步中看到的那样。

五、嵌套组件

将整个应用程序放在一个组件中是不切实际的。取而代之的是，我们可以从其他文件中导入组件，并像包含元素一样包含它们。

以下是我们的 App.svelte 组件

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<p>This is a paragraph.</p>

我们先写一个 Nested 组件：

Nested.svelte

<p>This is another paragraph.</p>

接着，我们在 App.svelte 中添加一个<script>标记并导入Nested.svelte…

<script>
	import Nested from './Nested.svelte';
</script>

…然后可以在代码中使用它：

<p>这是一个段落。</p>
<Nested/>

请注意，即使 Nested.svelte 具有 <p> 元素，App.svelte的样式也不受影响。

另请注意，组件名称 Nested 首字母是大写的。采用此约定是为了使我们能够区分用户定义的组件和常规的HTML标签。

六、HTML 标签

通常，字符串以纯文本形式插入，这意味着像 < 和 > 这样的字符没有特殊含义。

但是有时您需要直接将HTML呈现到组件中。例如，您正在阅读的单词现在存在于markdown文件中，该文件以HTML的形式包含在此页面中：

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{string}</p>

Svelte 中你可以使用特殊的标签 {@html ...} 来解决这个问题：

<p>{@html string}</p>

Svelte 不会在插入到DOM中之前对 {@html ...} 中的表达式进行任何清理。换句话说，如果您使用此功能，则至关重要的是，您必须手动转义来自不信任来源的HTML，否则就有使用户遭受XSS攻击的风险。

七、创建一个 App

本教程旨在使您熟悉编写组件的过程。但是有时，您将希望在自己的文本编辑器中开始编写组件。

首先，您需要将Svelte与构建工具集成在一起。有针对 Rollup 和 webpack 的官方维护的插件…

rollup-plugin-svelte
svelte-loader
…以及各种由社区维护的插件。

如果您是 Web 开发的新手，并且以前没有使用过这些工具，请不要担心。我们已经为新开发人员准备了一个简单的 Svelte 指南，它将引导您完成整个过程。

您还需要配置文本编辑器。如果您使用的是VS Code，请安装 Svelte扩展名，否则请按照本指南的说明将文本编辑器配置为将 .svelte 文件与 .html 相同，以便突出显示语法。

然后，一旦建立了项目，就可以轻松使用Svelte组件。编译器将每个组件变成常规的JavaScript类-只需导入并使用 new 实例化即可：

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    // 我们稍候就会学到 props
    answer: 42
  }
});

然后，您可以按需使用组件API 与 app 进行交互。

八、调试

有时候，检查数据流经应用的数据是很有用的。

一种方案是在标记内使用 console.log(...)。但是，如果你想暂停执行，则可以使用 {@debug ...} 标签与要检查的值以逗号分隔的列表在一起使用：

App.svelte

<script>
  let user = {
    firstname: 'Ada',
    lastname: 'Lovelace'
  };
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

如果你现在打开 devtools 并准备与<input>元素进行交互，则将在user修改其值时触发调试器。

总结

本章已简要介绍了 Svelte 的基本用法，Svelte 虽然与 React、Vue 一样，致力构建前端 Web 应用程序，Svelte 为了最优的性能及最简的代码输出，使用了编译器直接生成最终代码的方式。

Svelte 与 Vue 的 SFC 较为类似，即一个文件代表一个组件。

除非特殊的情况下（后面《模块》一章将详细说明），否则顶层 HTML 仅允许一个 script 标签（其他 script 可以放在子级元素之中，但是处理结果则不同），一个 style 标签（其他 style 标签可以放置在子元素之中，但是处理结果则不同）。

我们要添加一个类似双向绑定的变量，仅需如平常一样，声明一个普通变量即可。

而给元素复制相关的属性，则与 React、Vue 非常接近。

样式默认是局部作用域的，在组件内的样式，不会影响到组件以外。

最后，Svelte 的组件可以直接输出为原生的 JavaScript 对象，可以轻松将这个对象在 React、Vue 或其他地方导入，然后通过 new 实例化，就可以使用。