乐趣区

关于前端:Svelte教程翻译〇引言

jiezi

什么是 Svelte？

Svelte 是用于构建疾速 Web 应用程序的工具。

它相似于 React 和 Vue 等 JavaScript 框架，它们的独特指标是轻松构建晦涩的交互式用户界面。

然而有一个要害的区别：Svelte 在构建时将先编译您的应用程序，而不是在运行时解析您的利用程序代码。这意味着性能更好，首次运行时更为晦涩。

您能够应用 Svelte 构建整个应用程序，也能够将其逐渐增加到现有代码库中。您还能够将组件作为可在任何中央工作的独立包公布，而无需依赖传统框架的开销。

从 Hello World 开始

<script>
    let name = 'world';
</script>

<h1>Hello world!</h1>

而后，咱们能够在标记中援用 name。

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

在大括号外面，咱们能够放任何咱们想要的 JavaScript。

速记属性，属性语法糖

就像能够应用大括号来管制文本一样，也能够应用它们来管制元素属性。

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

<img>

咱们的图像短少一个 src ー让咱们增加一个：

<img src={src}>

这样好多了，但 Svelte 给了咱们一个正告：

A11y: <img> element should have an alt attribute

11y: < img > 元素应该有一个 alt 属性

在构建网络应用时，确保它们可能被更宽泛的用户群拜访是十分重要的，这些用户群包含视力或静止受损的人，或者没有弱小硬件或良好互联网环境的人。可拜访性 (缩写为 a11y) 的提醒并不会轻易呈现，然而如果您编写不可拜访的标记，Svelte 会通过正告您来提供帮忙。

这里，咱们疏忽了替换属性 alt，替换属性形容图片内容，次要提供给应用屏幕阅读器的人们，或者那些网络连接迟缓或不稳固的环境下无奈下载图像的情景。让咱们再加上一条：

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

名称和值雷同的属性并不常见，比方 src={src}。为这些状况提供了一个简便的语法糖：

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

不会被净化的组件款式

就像在 HTML 中一样，您能够向组件增加一个 <style> 标记。让咱们为 <p> 元素增加一些款式：

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

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

重要的是，这些款式规定的范畴仅限于组件。您不会意外地扭转应用程序中其余中央 <p> 元素的款式，接下来咱们将看到这一点。

将整个应用程序放在一个独自的组件中是不切实际的。相同，咱们能够从其余文件中引入组件，并将它们蕴含在内，就如同蕴含了元素一样。

咱们先创立一个 neted.svelte 文件，内容如下：

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

再创立一个 app.svelte 文件，内容如下：

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

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

增加一个导入 neted.svelte 的 <script> 标记。

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

而后加上应用标记：

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

残缺的文件代码：

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

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

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

留神，即便 neted.svelte 有一个 <p> 元素，app.svelte 中的款式也不会净化。

还要留神组件名 Nested 是首字母大写的。咱们采纳这种约定来辨别用户定义的组件和惯例的 HTML 标记。

HTML 输入

通常，字符串作为纯文本插入，这意味着像 < 和>这样的字符没有非凡含意。

但有时您须要将 HTML 间接出现到组件中。在 Svelte 中，你能够应用非凡的 {@html...} 标签：

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

在将表达式插入 DOM 之前，Svelte 不会对 {@html…} 外部的表达式执行任何平安验证。换句话说，如果您应用这个个性，您必须手动本义来自您不信赖的源代码的 HTML，否则您的用户将面临蒙受 XSS 攻打的危险。

看过之后有没有想上手试试的激动？
此框架有在线版的代码编辑器，不必在本地装置框架，即可操练起来。
而且官网有详尽的教程和文档。
点击 Svelte REPL 去体验一下。

退出移动版