了解一下Svelte JavaScript框架的情况

Svelte在服务器端工作，将你的应用程序编译成优化的JavaScript。让我们来快速浏览一下这个快速、反应式的组件框架。

随着2021年接近一半的时间，JavaScript的黄金时代仍在继续。当前章节中最令人兴奋的角色之一是Svelte框架。本文为你介绍了创建Svelte项目和使用一些简单的UI元素的基本知识。

与目前以React、Angular和Vue为代表的群体思维截然不同的是，Svelte在服务器端工作，将你的应用程序编译成优化的JavaScript。这意味着，Svelte需要一个构建管道的设置。

虽然建立一个构建管道可能看起来是额外的工作，但事实上，在React、Angular或Vue中，所有真正的开发都需要某种形式的构建管道（如create-react-app或Webpack配置）。另外，设置Svelte环境可以快速获得热部署开发模式等功能。

Svelte设置

让我们直接进入，建立一个简单的构建环境。你将会使用npx和degit来创建一个启动模板。使用清单1中的步骤。

清单1.初始模板

npx degit sveltejs/template infoworld-svelte
cd infoworld-svelte
npm install
npm run dev

在这一点上，启动程序将在localhost:5000运行；在你的浏览器中检查它。在你的代码编辑器或IDE中打开/infoworld-svelte文件夹。在/src目录下有两个感兴趣的源文件。App.svelte和main.js。这两个文件共同定义了你在浏览器中看到的内容。

注意：所有的代码都可以在这个 repo 中找到。

如果你使用Visual Studio Code，有一些有用的（免费）Svelte扩展，提供语法高亮和自动完成。

要找到它们，请到左边的扩展工具中，在搜索栏中输入 "ext:svelte"。

main.js是该应用程序的主要入口点。如清单2所示，它在第一行导入了App.svelte 。

清单2.main.js

import App from './App.svelte';
const app = new App({
            target: document.body,
            props: {
                        name: 'world',
            }
});

export default app

清单2显示了一些关于Svelte如何工作的有趣内容。从App.svelte 中导出的数据已被转化为一个对象，并通过new App({...}) 的调用将其实例化。

App 对象被配置了几个参数。这些参数用于为Svelte对象的参数提供值。target param是一个内置的属性，Svelte用它来告诉应用程序的根在哪里（类似于ReactDOM.render 的第二个参数）。

现在看看 App.svelte.这有Svelte中的组件语法的肉，它结合了JavaScript、标记和CSS的三个元素，分别是script 、main 、style 标签。这些内容与main.js中的实例化所提供的参数一起被组合在一起, into a component. Note that the `main` tag could be any valid HTML tag.

请注意，Svelte使用的变量标记与其他框架的语法相同：<h1>Hello {name}!</h1> 。还请注意，这个变量的值是由main.js中的params提供的，它在脚本部分被导出：export let name; 。这也可以直接在脚本中完成。为了理解我的意思，把这一行改成let name = "InfoWorld"; ，完全取消了导出。重点是，通过main.js对App 对象进行参数化并没有什么神奇的地方，也不需要。它只是一个支持的功能，用于组织事情。

由于你是在开发模式下运行的，这个变化将立即得到反映。浏览器现在将显示新的问候语："Hello InfoWorld！"

构建复杂的UI有许多必要的功能。其中最重要的是迭代器和对象处理。让我们通过添加清单3中的代码来看一看。

清单3.遍历一个对象的数组

<script>
            let quotes = [                        {author:"Emerson", quote:"To be great is to be misunderstood."},                        {author:"James", quote:"The art of being wise is the art of knowing what to overlook."},                        {author:"Thoreau", quote:"That government is best which governs least."}            ];
</script>
<main>
  <ul>
                        {#each quotes as { quote, author }, i}
                                    <li>{i} - {quote}</li>               
                        {/each}
  </ul>
</main>

基本的语法是{#each} 标签。它被用来引用变量quotes 。然后，这个数组变量的元素（通过分解）和一个迭代器计数器i ，被暴露给标签的内部。然后用与其他变量相同的标记语法来引用这些暴露的变量。如果你熟悉另一个框架，我想你会同意这里的语法是非常简洁的。

[InfoWorld上还有：调整React UI性能的10个技巧] 。

Svelte中的事件处理

添加像onClick 这样的处理程序也同样简单。你可以在列表项中添加一个，如清单4所示。

清单4.添加一个onClick处理程序

<script>
...
function click(){           alert("ok"); }
...
</script>
<main>
...
<li on:click="{click}">{i} - {quote}</li>           
...
</main>

事件处理的语法是不言自明的。你也可以通过包装处理程序函数来向处理程序传递参数，像这样。

<li on:click="{() => click(author)}">{i} - {quote}</li>

这可以被处理程序函数使用。

function click(author){ alert("hello from " + author); }

Svelte组件和输入

现在来感受一下组件系统，以及输入元素的双向绑定。你正在添加一个新的组件，该组件将创建报价，添加到列表中。首先，创建一个名为/src/AddQuote.svelte的新文件并粘贴清单5的内容。

清单5.AddQuote组件(事件调度和输入绑定)

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher(); // create dispatcher
  let author = "";
  let quote = "";
  function onAdd(author, quote){
    dispatch('quote', { // use dispatcher
                                    author: author, quote: quote
                        });
  }
</script>

<main>
  <div class="add-quote">
    <h2>New Quote</h2>
    <div>Author: <input bind:value={author} placeholder="Author"></div>
    <div>Quote: <input bind:value={quote} placeholder="Quote"></div>
    <button on:click={()=>{onAdd(author, quote)}}>Add It!</button>
  </div>
</main>

组件事件

这里引入了几个新的概念。首先是组件事件。这些是组件可以引发的事件，就像DOM事件一样被其他组件处理。基本的过程是从Svelte中导入createEventDispatcher ，然后用它来创建一个调度器函数。这个调度器函数被调用并传递给事件的名称（'quote' ）和事件的内容（在这个例子中，是新的报价信息）。

然后这个事件由我们的App 组件处理，我们一会儿就会看到。

输入绑定

绑定HTML输入，又称双向绑定，也很简单。你可以在清单5的main 元素中看到这一点。注意输入元素上的bind:value 属性。这些属性引用了输入将被绑定的变量--本例中是作者和报价变量。

然后，你使用一个带有onClick 处理程序的按钮元素来引发onAdd 函数中的调度事件。

捕捉Svelte中的自定义事件

回到App.svelte文件中，你可以使用清单6中的AddQuote 组件。

清单6.使用AddQuote组件

<script>
...
            function onAddQuote(event){
                        quotes = [...quotes, {author:event.detail.author, quote:event.detail.quote}];
            }
</script>
...
<main>
...
<AddQuote on:quote={onAddQuote}></AddQuote>
...
</main>

清单6显示了在标记中，你如何使用on:quote 来监听自定义报价事件，并将其发送到处理函数onAddQuote ，该函数定义在脚本部分。这个函数被交给事件，其中包含我们在AddQuote 中发送的事件对象，在event.detail 成员中。

从这里开始，更新quotes 数组中的数据以反映新的项目就是一个简单的问题。但是请注意，你必须用赋值来更新数组，否则Svelte不会注意到这个变化。换句话说，仅仅使用Array.push 是不会触发更新的。(这与其他反应式框架类似）。

在Svelte中获取API

作为一个快速的额外奖励，让我们看看我们如何快速地为这个应用程序添加一个远程API获取。清单7显示了如何在App.svelte中添加一个API获取。

清单7.使用REST API (App.svelte)

<script>
...
            async function addRandom(){
                        const res = await fetch("https://api.quotable.io/random");
                        const json = await res.json();
                        quotes = [...quotes, {author:json.author, quote:json.content}];
            }
</script>
...
<main>
...
<button on:click={addRandom}>Add Random Quote</button>
...
</main>

清单7添加了一个调用asyncaddRandom 函数的按钮。这个函数简单地调用远程报价API，然后用新的报价更新报价数组。很简单!

以上是对Svelte的一些关键功能的旋风式参观。该框架还有很多功能，它现在已经可以胜任构建企业界面的任务。

Svelte在市场上也取得了快速发展。它的使用率在三巨头（React、Angular和Vue）之后排名第四，但在开发者满意度方面排名第一，兴趣方面排名第一。