使用Svelte建立阅读清单-js教程-PHP中文网

使用Svelte建立阅读清单

Joseph Gordon-Levitt

发布： 2025-02-09 10:01:08

原创

928 人浏览过

苗条：前端框架景观中的后起之秀

Svelte迅速越来越受欢迎，超过了“只是另一个前端框架”的状态。它的赞誉包括“年度突破”（JS 2019），最高满意度等级（JS 2020州）和大多数喜欢的网络框架的标题（Stack Overflow 2021）。这种成功源于其引人注目的小捆尺寸，出色的性能和用户友好的设计。除了其核心优势之外，Svelte还提供了有价值的功能，例如内置状态管理，过渡和动画。本教程探讨了Svelte如何实现这一效率。随后的教程将更深入地研究使用Svelte的构建应用程序。

>虽然Svelte的主流采用始于2020年代初，但其起源于2016年末以其第一个Github提交追溯到2016年底。 Svelte由Rich Harris（也以Crolup Bundler而闻名）创建，从他在Guardian

上担任图形编辑器的经验中出现了。他需要一种简化交互式网站可视化的工具，而无需牺牲性能或捆绑大小，而在技术上熟练熟练的同事则无法使用，这导致了Svelte的发展。 Svelte最初在开源社区中获得了一个小而专用的追随者，Smvelte的突破到达了2019年4月版本3的发布。该版本是一个完整的重写，强调了开发人员的体验和易用性，使Svelte引起了人们的关注。此后，它的受欢迎程度飙升，吸引了更多的维护者，并导致Rich Harris加入Vercel，专注于Svelte全职。有关Svelte与React和Vue的全面比较，请参见“ Svelte 3：基于自由基编译器的JavaScript框架”。

构建简单的书籍列表应用程序 >让我们构建一个简单的书籍列表应用程序，以说明Svelte的功能。最终应用程序将类似于下面的图像：

>我们将从官方的Svelte项目模板开始（替代方案包括基于Vite的模板或Sveltekit，用于更复杂的应用程序）。安装必要的软件包（

）后，我们将修改

以创建基本的HTML结构：>

Build a Reading List with Svelte 此代码直接写在顶层，利用Svelte的HTML-Superset语法。

接下来，我们将添加一个静态书籍列表和一个循环以渲染它：>

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

登录后复制

</pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4>My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook}newBook在输入和变量之间创建双向绑定。 on:keydown={addBook}添加了一个事件侦听器；按下ENTER时，addBook函数会更新books数组。 Svelte的反应性会自动重新启动组件。

svelte的汇编过程

Svelte的性能和小捆尺寸是由于其编译器性质所致。它预处理.svelte>文件，将它们转换为优化的JavaScript，该文件可以通过手术更新DOM。这消除了对大型运行时的需求，并允许有效的恢复者。

添加样式和过渡

让我们用CSS增强UI：

默认情况下，

<🎜>

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

登录后复制

Svelte Scopes样式。最后，让我们添加一个淡入淡出的过渡：

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

登录后复制

完整的代码，包括样式和过渡，如下所示：

<🎜>

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

登录后复制

这会导致功能性和视觉上吸引人的书籍列表应用程序。（最终应用程序的图像将转到此处：

） Build a Reading List with Svelte >

建筑考虑和未来增强

本教程提供了基本介绍。较大的应用需要状态管理，多个组件和组件交互机制。 Svelte为这些解决方案提供了解决方案，将在随后的教程中探索。

svelte适合您的下一个项目吗？

> Svelte的主动维护，健壮的工具，稳定的功能，生态系统的增长以及Sveltekit的可用性使其成为各种项目的强大竞争者。社区蓬勃发展，框架没有放慢脚步的迹象。

下一步

这是六部分系列的第一部分。未来的零件将涵盖模板语法，反应性语句，商店，组件交互和测试。完整的系列也可以在Amazon上找到。

以上是使用Svelte建立阅读清单的详细内容。更多信息请关注PHP中文网其他相关文章！