| 摘自Mark Volkmann的《Svelte和Sapper in Action》。 本文深入探讨了Svelte REPL。 |
在manning.com结账时，在折扣代码框中输入fccvolkmann，即可享受Svelte和Sapper in Action的40%折扣。
Svelte REPL
许多编程语言都有REPL。REPL读取你输入的代码，对其进行评估（可能会编译并报告错误），打印出代码的结果，并进行循环以允许重复这一过程。
Svelte提供了一个基于浏览器的REPL，支持定义Svelte组件，查看其渲染输出等。使用REPL是试验Svelte的最简单方法。它允许创建Svelte应用程序而无需下载或安装任何东西。你的第一个Svelte应用程序只需点击一下就能完成!
要开始使用，请浏览Svelte的主网站：https://svelte.dev/。然后点击页面右上角的 "REPL"。
默认提供了 "hello world "应用程序的代码。修改这段代码以试验Svelte的各种功能。
图1.REPL初始屏幕
实验是REPL的一个用途；另一个用途是创建一个不断增长的例子集，你可以在学习Svelte的过程中借鉴。我们非常鼓励你利用这一功能。
使用Svelte REPL
最初，REPL中提供的唯一文件是App.svelte 。该文件可以导入在REPL的其他标签中定义的其他文件（不是单独的浏览器标签）。
要添加更多的.svelte 或.js 文件，请点击现有文件标签右侧的 "+"，并给它一个名称。默认情况下，新创建的文件有一个.svelte 的扩展名，但这可以通过在文件名的末尾输入.js 改为.js 。
要删除一个.svelte 文件，将鼠标悬停在它的标签上，点击出现的 "x"。
页面的右侧包含三个标签，分别是 "结果"、"JS输出 "和 "CSS输出"。
结果 "选项卡显示了App.svelte 的渲染输出。
JS输出 "选项卡显示了Svelte编译器为该应用程序生成的JavaScript。
当 "结果 "选项卡被选中时，REPL的右下角显示调用console 方法的输出，如console.log 。
"CSS输出 "标签显示Svelte编译器为应用程序生成的最小化CSS。未使用的CSS选择器并不包括在内。所有选择器都包括生成的CSS类名，这些类名将CSS的范围扩大到组件。
REPL的顶部栏包含许多Svelte资源的链接，包括教程、API文档、例子、Svelte博客、Svelte FAQ、Sapper的主页、Discord聊天室和Svelte GitHub repo。
图2.Svelte网站的标题
要隐藏这个栏，以获得更多的编辑空间，请点击 "全屏编辑器 "图标，它看起来像一个虚线的正方形。
图3.REPL全屏按钮
点击之后，这个图标会变成一个 "X"。要恢复顶部栏，请点击 "X"。
图4.REPL退出全屏按钮
目前，在 REPL 中没有选项来格式化.svelte 文件。也许将来会增加一个使用Prettier做这个的选项。
Prettier是一个流行的工具，用于格式化许多语言的代码，包括JavaScript、HTML、CSS等等。见https://prettier.io。
要将REPL重置到它的起点，即一个基本的 "Hello World "应用程序，点击标题中的 "REPL"。
图5.重置REPL
你的第一个REPL应用程序
让我们创建一个简单的应用程序，开始学习Svelte的一些功能。
所提供的hello world应用程序总是对 "world "说hello。让我们把它改成对任何人说你好。在<h1> 标签前添加以下HTML。
<label for="name">Name</label>
<input id="name" value={name}>
HTML元素input 是一个 "空元素 "的例子。这意味着它不能有子节点。当空元素在Svelte组件中使用时，它们不需要用/> 来结束。
注意：如果Prettier被用来格式化代码，它就会将空元素改变为这样的终止方式。这就是为什么本文中的一些代码例子显示了终止的空元素。
现在我们可以输入一个名字，但它不会改变问候语。我们需要添加事件处理，在用户输入时改变名字变量的值。我们可以使用一个内联的箭头函数或对一个定义在script 标签中的函数的引用来实现这一点。将输入的内容改为以下内容。
<input
id="name"
on:input={event => name = event.target.value}
value={name}
>
这很有效，但有点啰嗦。我们可以使用Sveltebind 指令做得更好。一种用法是将表单元素的值绑定到一个变量上。这将导致表单元素显示该变量的当前值。如果用户改变了表单元素的值，变量就会更新以匹配。
将input 改为以下内容。
<input id="name" bind:value={name}>
哦，我的天，这真好!而如果变量的名字是value ，而不是name ，就可以缩短为以下内容。
<input id="name" bind:value>
不过这并不时尚。让我们添加样式来改变问候语的颜色。在<script> 标签之后和HTML之前添加以下内容。
<style>
h1 {
color: red;
}
</style>
很好！现在问候语是红色的。现在问候语是红色的。
让我们允许用户选择一种颜色。我们通过提供一个颜色输入来做到这一点。这允许使用本地颜色选择器来选择颜色。在下面的截图中，它显示为一个包含一条水平线的矩形。点击它可以打开一个颜色选择器对话框。
图6.带有颜色输入的 REPL 应用程序
一个组件的script 标签中的顶级变量定义了该组件的状态。
例如，下面这个组件的状态包括color 和name 变量。
下面是这个版本的App.svelte 的完整代码。
<script>
let color = 'red';
let name = 'world';
</script>
<label for="name">Name</label>
<input id="name" bind:value={name}>
<label for="color">Color</label>
<input id="color" type="color" bind:value={color}>
<div style="background-color: {color}" class="swatch" />
<h1 style="color: {color}">Hello {name}!</h1>
<style>
.swatch {
display: inline-block;
height: 20px;
width: 20px;
}
</style>
让我们允许用户拨动一个复选框来改变问候语的情况。在底部的<script> 标签内添加以下内容。
let upper = false;
$: greeting = `Hello ${name}!`;
$: casedGreeting = upper ? greeting.toUpperCase() : greeting;
$: 是什么意思？这被称为 "反应式语句"。反应式语句在其引用的变量的值发生变化时都会重新执行。
在上面的示例代码中，我们希望在name 的值发生变化时，为greeting 计算一个新的值。我们还想在upper 或greeting 的值发生变化时，为casedGreeting 计算一个新的值。这真是太方便了!
现在我们需要一种方法，当复选框被切换时改变upper的值，并呈现casedGreeting 的值。 在<h1> 标签前添加以下代码，以呈现复选框。
<label>
<input type="checkbox" bind:checked={upper}>
Uppercase
</label>
将<h1> 标签改为以下内容。
< h1 style="color: {color}">{casedGreeting}</h>
图7.带有大写字母复选框的REPL应用程序
到目前为止，我们在一个名为App.svelte 的单一.svelte 文件中实现了所有内容。
让我们通过定义第二个组件来超越它。
在 REPL 中点击App.svelte 标签右侧的+ 。输入Clock 作为该组件的名称。
图8.带有大写字母复选框的REPL应用程序
我们希望这个组件以hh:mm:ss 格式显示当前时间。
开始时，只在Clock.svelte 中添加以下内容。
<div>
I will be a clock.
</div>
回到App.svelte ，在顶部的<script> 标签内添加以下内容。
import Clock from './Clock.svelte';
在App.svelte 的底部添加以下内容。
<Clock/>
注意：斜线前的空格不是必须的，但许多开发者和Prettier代码格式化器都喜欢包括它。
现在我们看到 "我将成为一个时钟。"在渲染输出的底部。
图9.带有 "I will be a clock "的REPL应用程序
Svelte使用export 关键字来定义一个组件所接受的道具。在一个.js 文件中，export ，使一个值在该文件之外可见，能够被导入。在一个.svelte 文件中，export 允许使用该组件的组件将一个值传入。例如，在下面定义的组件中，color 是一个有默认值的道具。
修改Clock.svelte ，包含以下内容。
< script>
export let color = 'blue';
let hhmmss = '';
hhmmss = new Date().toLocaleTimeString();
}, 1000);
</script>
<span style="color: {color}">{hhmmss}</span>
修改App.svelte ，将一个color 的道具传递给Clock 组件。
<Clock {color} />
这展示了一种速记的语法，相当于<Clock color={color} /> 。
我们现在有了一个正常运行的时钟组件。
图10.带有时钟的REPL应用程序
这让我们尝到了在Svelte中可以做的一些事情。
如果你熟悉其他Web框架，现在是暂停的好时机，想想你为实现我们在这些框架中所看到的东西而写的代码。它是否更长？是否更复杂？
第二部分会更深入地讨论。
如果你想了解更多关于这本书的信息，可以在曼宁的liveBook平台上查看。
The postSvelte REPL, Part 1appeared first onManning.
