超级简短的 Svelte 框架入门教程,仅需十条推文

javascript/jquery

浏览数:268

2020-6-12

Xiaoru “Leo” Li 原作,翻译转载自
New Frontend

总想了解下 [Svelte](web 开发的下一次革命)但是一直没时间?

01

这份十条推文组成的旋风教程正是为你准备的!

(剧透警告:Svelte 是如此直观易用,以至于你可能感觉这些你都已经知道了!)

Svelte 的工作机制:

  • 编译器:并不会分发一个 Svelte 「库」给用户,而是在构建阶段编译出优化的纯 JS 代码
  • 组件:应用由可组合的 UI 元素组成
  • 响应式:事件/用户交互触发一系列状态改变,自动更新整个应用的组件

02

用户界面是组件树。组件定义了应用应当如何解释一些抽象的「状态」值,以便在浏览器中转换为 DOM 元素,并最终转换为屏幕上的像素。

03

每个 .svelte 文件包含一个组件,由三部分组成:

  • <stript> 是 JS 编写的组件逻辑
  • <style> 是 CSS 样式,作用域和应用范围仅限于当前组件
  • Svelte 模板,以 HTML 基础,加上一些定制组件和内嵌逻辑(类似 JSX)

04

除了 HTML 元素外,Svelte 模板中还可以使用自定义组件。在不会引起歧义的情况下,在模板中引入自定义组件时可以省略 .svelte 文件扩展名,但是自定义组件的首字母 必须 大写。

花括号中可以使用 JS 表达式。

05

「控制」子组件行为的常见做法是将数据作为属性(props)传入。

使用 export 暴露属性变量。注意赋值时使用 let 而不是 const,因为 const 无法重新赋值。

06

用户动作会触发事件。我们使用 on: 监听事件并运行函数以更新状态。用户界面会随着状态的更新自动更新。

一般来说数据从上往下流动,但我们可以使用 bind: 开放双向数据流动以简化状态更新逻辑。

07

$: 开头的语句是「响应式语句」。

Svelte 会分析响应式语句依赖的变量。任意依赖变量的值改变时,会重新执行相应的响应式语句。声明衍生状态或触发「副作用」时这个特性十分好用。

08

响应式「store」方便在组件之间共享状态。store 放在单独的 JS 文件里,只需用 writable 封装一个值就可以创建。

在组件中引用(读写)时,store 名称带上 $ 前缀。编译器真奇妙!

09

在 Svelte 模板中,使用 {#if} 可以实现有条件地渲染组件({#if} 有一个可选的 {:else} 分支)。

使用 {#each} 渲染列表中的每个成员。

别忘了总是使用 {/if}{/each} 收尾。

(下面的例子中其实应该使用 <ol>,我用 <ul> 是为了演示如何访问数组索引)。

10

Svelte 下进行 API 请求之类的异步操作非常容易。

我们可以直接 {#await} Promise 完成,在结果就绪前显示「加载中」。

注意 {#await} 关键字只适用于模板部分,无法在 <script> 中使用。

Svelte 自带精美的动画变换效果。试着给你的组件加上 transition:fly 属性!还可以尝试下其他类型的动画效果,比如 fade(淡入淡出) 和 slide(滑动)。你还能使用 in:out: 分别为出现和消失指定不同的效果。

传入参数可以进一步微调动画效果。

好了,这就是上手 [Svelte] 前需要了解的所有内容。

开发愉快!

(这篇旋风教程的形式借鉴了 Chris Achard 写的 React 超短入门教程)

作者:LeanCloud