Svelte 3：基于激进编译器的JavaScript框架

苗条3：一种新的前端开发方法

>本文探讨了Svelte 3，这是一个独特的前端JavaScript框架，通过其编译过程来区分自己。与React这样的框架（将大型JavaScript捆绑包装）等框架不同，Svelte将应用程序编译为明显较小，优化的JavaScript代码。在构建过程中实现的这种优化导致更快，更有效的应用程序。 Svelte还提供了一种独特的数据管理和DOM操纵方法。 它直接更新了真实的DOM，消除了对虚拟DOM的需求，从而提高了性能。 这是其直观的成分创建和内置的反应性状态，使发展变得愉快和高效。 甚至经验丰富的React或Vue开发人员也会发现值得探索的Svelte。 让我们构建一个简单的应用程序以演示其功能。

Svelte的关键优势：

优化的JavaScript： Svelte编译到优化的JavaScript，与React等框架相比，降低了运行时大小。

>

• 直接DOM操作：> >简化的组件：
组件创建用示波器的CSS和集成的反应状态简化。>
• 编译器方法最小化代码和样板，加速开发。
• 直觉语法：
用最小语法处理反应性和组件通信。
• 。 轻巧有效：
• 入门：
为了避免捆绑和基础设施的复杂性，我们将遵循官方的Svelte教程。 确保您安装了节点并安装了git。然后，执行：
• 这将SVELTE模板夹在
目录中，并设置必要的工具。 之后，导航到目录（

）并运行

以安装依赖项。最后，使用汇总启动开发服务器。访问>。

的应用程序

构建一个Svelte组件：

<code class="language-bash">npx degit sveltejs/template github-repository-searcher</code>

> github-repository-searchersvelte组件位于cd github-repository-searcher>文件中。 该模板提供npm install，构成为三个部分：>

1. <code> <code>
{#each filteredRepos as repository}
• {repository.name} <code>{repository.url} / *用于样式列表的CSS */
  {#each filteredRepos作为存储库}
  {repository.name} <code> {repository.url}

  <code>Search {/每个} <code>App.svelte repositories

  import <code> search app.svelte

  并根据 repositories的可用性进行条件使用IT

  <code>$:反应性和过滤：Search.sveltefilteredRepos $： <code> search.svelte.svelteuserSearchTerm> <code> $：<ancy> $：<ante> $：<ancvelte> filteredRepos<code>repositories更新，每当 usersearchterm

  >或 repositories <p>更改时。 还讨论了使用功能或事件听众的替代方法，突出了Svelte的反应性功能的好处。 <strong></strong>生产构建：</p> <p> <code>npm run build>运行 NPM Run Build <and>以创建一个可以生产的捆绑包。 由于Svelte的汇编过程，最终的捆绑包大小通常很小。<ancy>> </ancy></and>

  结论： Svelte提供了一种令人信服的传统框架替代方案，强调代码效率和性能。它的直观语法和内置功能简化了开发，使其成为前端开发的强大竞争者。

  什么是Svelte？

  > Svelte与React/Vue？ react/vue在浏览器中做更多的工作。
  • > svelte如何处理组件？组件写在html/css/js like语法中并编译为有效的JavaScript。
  • Svelte是否使用虚拟DOM？ >什么是Sveltekit？ Svelte？ > 较小的捆绑尺寸，更快的性能，简单的语法，更少的样板。

以上是Svelte 3：基于激进编译器的JavaScript框架的详细内容。更多信息请关注PHP中文网其他相关文章！