简介
在使用JavaScript构建应用程序时，高性能和渗透性始终是软件开发人员决策的关键。svelte是一个用于命令性代码的高性能组件框架。
Svelte还带来了一种不同的用户界面搭建方式。当React)和Vue)在浏览器中执行其大部分工作时，Svelte通过将应用程序的组件转换为更新DOM的代码在构建时运行。
本教程将介绍Svelte的基础知识，以及如何利用其功能构建高性能应用程序。
第一步-构建Svelte应用
构建Svelte应用程序时要做的第一件事是将Svelte与项目脚手架工具集成。本教程将使用degit.
导航到您的终端并运行以下命令，为您的应用程序创建一个新目录：
1npx degit sveltejs/template my-svelte-app
移至新目录：
1cd my-svelte-app
如果您使用的是npm，)，请使用以下命令安装依赖项：
1npm install
如果您使用的是Yarn，)，请使用以下命令安装依赖项：
1yarn install
运行以下命令以运行本地开发服务器，您可以在其中查看构建过程中的应用程序：
1npm run dev
这将在http://localhost:5000.上启动一个服务器
项目文件夹中有几个文件是在搭建过程中创建的。本教程将详细介绍应用程序的关键文件：
Package.json：这里列出了工程所依赖的包。值得注意的是，与React和Vue不同，Svelte的Package.json文件只列出了dev依赖项，而不是您在上述两个框架中可能习惯看到的常规、标准依赖项。原因是，在为生产而构建时，框架会将您的代码编译为Vanilla JavaScript。main.js：这是您应用程序中所有JavaScript的入口点。组件在这里实例化。App.svelte：这是您的应用程序的第一个组件。类似于使用.vue扩展名创建Vue组件的方式。它包含组件运行所需的所有逻辑、样式和标记。index.html：在开发过程中，您的应用程序的Public文件夹将包含您的应用程序捆绑包的未缩小版本。index.html是执行该包的位置。
第二步-创建细长组件
组件是每个Svelte应用程序的基础。它们被写入到.svelte文件中，使用的是一个超集的HTML。一个.svelte文件有两个部分：
<脚本>：此部分包含运行应用程序的所有Java脚本和逻辑。<style>：包含应用程序的css样式。
Markup：它包含HTML标记，类似于在Reaction中编写JSX。
下面的代码块展示了Svelte组件的外观：
1<script>
2 let framework = 'Svelte';
3</script>
4
5<style>
6 h1 {
7 color: blue;
8 font-family: 'Open Sans';
9 font-size: 2em;
10 }
11</style>
12
13<h1>This is a {framework} Component.</h1>
14
15Result
16// This is a Svelte Component.
Step 3 -探索响应式声明
Svelte有一项名为反应性声明的功能。大多数情况下，当构建应用程序时，它会变得有点大。组件状态的某些部分将需要从其他部分调用，并在它们发生更改时重新计算。这正是使用反应性声明的目的。查看下面的代码块：
1<script>
2 let car = 'Mercedes';
3$: carMakeSedan = car + ' E350';
4$: carMakeSuv = car + ' G500';
5</script>
6
7<p> The {car} you want is a {carMakeSedan}.</p>
8<p> If you would like something more expensive, go for the {carMakeSuv}.</p>
9
10 Result
11// The Mercedes you want is a Mercedes E350.
12// If you would like something more expensive, go for the Mercedes G500.
第三行和第四行告诉Svelte在任何引用的值发生更改时重新运行此代码。当一个值需要被多次引用或存在依赖它的其他值时，该值应该是相对的。
Step 4 -创建和声明属性
在构建应用程序时，您最终将需要将数据从一个组件传递到另一个组件(也称为_PARENT到CHILD_COMPONT)。为此，您需要使用_props_声明属性。Svelte通过使用关键字export来实现这一点。查看下面的代码示例以获取示例：
1// Car.svelte
2<script>
3 export let carMake;
4</script>
5
6<p>You ordered a {carMake}</p>
导航到App.svelte父组件：
1// App.svelte
2<script>
3 import Mercedes from './Car.svelte';
4 import BMW from './Car.svelte';
5 import Jaguar from './Car.svelte';
6</script>
7
8<Mercedes carMake={' Mercedes'}/>
9<BMW carMake={' BMW'}/>
10<Jaguar carMake={' Jaguar'}/>
11
12// You ordered a Mercedes
13// You ordered a BMW
14// You ordered a Jaguar
还有一个选项可以指定缺省值。在下面的car.svelte示例中，您可以指定carMake的默认值：
1//Car.svelte
2<script>
3 export let carMake = 'Mercedes';
4</script>
5
6<p>You ordered a {carMake}</p>
如果使用carMake实例化组件失败，则组件将恢复为默认值：
1//App.svelte
2<script>
3 import Mercedes from './Car.svelte';
4</script>
5
6<Mercedes carMake={' Mercedes'}/>
7<Mercedes />
8
9// You ordered a Mercedes
10// You ordered a Mercedes
第五步-探索逻辑和绑定
JSX在Reaction中的一个特殊特征是它不能包含条件语句。大多数情况下，需要这种逻辑时，通常会用三元运算符或其他变通方法来替代。Svelte能够通过将标记包装在一个`if‘块中来有条件地呈现标记。查看下面的代码示例：
1<script>
2 let luggage = { checkedIn: false };
3
4 function toggle() {
5 luggage.checkedIn = !luggage.checkedIn;
6 }
7</script>
8
9{#if luggage.checkedIn}
10 <button on:click={toggle}>
11 Luggage is Checked Out
12 </button>
13{/if}
14
15{#if !luggage.checkedIn}
16 <button on:click={toggle}>
17 Luggage is Checked In
18 </button>
19{if}
Check In状态的按钮
与React等框架类似，Svelte中的数据流是自上而下的。主零部件设置子零部件的特性，而不是反过来。在Svelte中，您可以通过使用ind：value指令来解决这个问题。查看下面的代码示例：
1<script>
2 let framework = 'Svelte';
3</script>
4
5<input bind:value={framework}>
6
7<p>{framework} is awesome!</p>
这样，不仅更改Framework的值将更新input的值，而且更改input也将更新Framework。
结论
Svelte可能还处于早期阶段，但它显示出了很大的潜力和前景。这篇文章只是一个介绍，所以使用Svelte还可以完成更多的工作。您可以通过查看他们的官方documentation]了解有关Svelte的更多信息