结识了Skvelte，这是街区上的新框架

多年来，VUE，Angular和Rection占据了前端组件框架的统治。虽然Google和Facebook提供了自己的解决方案，但Vue之类的框架的开源精神（具有多个赞助商，避免单公司控制）具有重大吸引力。输入Sivete，这是一位共享Vue对开放MIT许可证的承诺的后起之秀。

Svelte以前曾在CSS-Tricks（尤其是Ollie Williams在其基于组件的CSS上的有见地的文章）中进行了介绍，Svelte值得仔细检查。本文探讨了其独特的功能，与其他框架的区别以及实际实现。

Svelte的独特方法

“ Svelte是最简单的JavaScript组件库，可以有效地学习和使用。”

- 杰夫·德莱尼（Jeff Delaney），带firebase

像React，Angular和Vue一样，Svelte是JavaScript组件库。但是，其核心区别是：

1. 提前编译： Svelte充当编译器，将其混合HTML，JavaScript和CSS代码转换为优化的JavaScript，HTML和CSS文件。这种预译本类似于c＃to bytecode或typescript到javaScript，但涵盖了所有三种语言，通过将计算从运行时转换为构建时间来增强灵活性和客户端性能。

2. 没有虚拟DOM：传统框架利用虚拟DOM，即DOM的内存驻留副本，以进行有效的更新。 Svelte绕过这一点，直接操纵真实的DOM。虽然虚拟DOMS提供优化，但Svelte的方法及其构建时间计算进行了手术应用更改，从而导致潜在的性能增长，尤其是在较大的应用程序中。

3. 内置CSS范围： Svelte的集成样式避免了CSS-IN-JS解决方案的复杂性。它隔离组件CS，将其输出到构建过程中分离文件，从而促进清洁，封装的样式。尽管Sass和Simel等预处理器存在插件，但Svelte的本机CSS处理非常有效且直接。

Svelte vs.其他框架

Svelte的独特体系结构影响了其性能和开发人员的经验。尽管存在许多比较，但其速度是一个重要的优势。但是，速度不是唯一的指标。下表提供了更广泛的比较：

[根据原始文本的表格描述，将SVELTE与其他框架进行比较的表格将进入这里。高开发人员的满意度与“三巨头”框架中最近观察到的最新下降形成对比。它的开源性质是一项相当大的资产。

一个实用的苗条示例：交叉观察者

为了说明Svelte的实用性，让我们实现一个交叉观察者，这是一种避免被动滚动事件问题的增强性能提高技术。我们将利用Svelte的REPL进行简化的示例。

设置一个基本的Svelte项目（省略了简洁的详细信息）后，在src/components文件夹中创建IntersectionObserver.svelte 。

从'svelte'导入{onmount};
导出让一次= false;
导出令top = 0;
导出让底部= 0;
导出让左= 0;
导出让正确= 0;
让相交= false;
让容器;

onmount（（）=> {
    if（typeof IntersectionObserver！=='undefined'）{
      const rootmargin =`$ {bottom} px $ {left} px $ {top} px $ {right} px`;
      cont observer = new IntersectionObserver（entries => {
        相交=条目[0] .Isintersing;
        if（相交&&一次）{
          observer.unobserve（容器）;
        }
        }，{
          rootmargin
      }）;
        observer.observe（容器）;
        return（）=> observer.unobserve（容器）;
  }

  功能处理程序（）{
    const bcr = container.getBoundingClientRect（）;
    相交=（（
      （bcr.bottom底部）> 0 &&
      （bcr.right对）> 0 &&
      （bcr.top-顶）<window.innerheight if window.removeeventlistener window.addeventlistener> window.removeeventlistener（'scroll'，handler）;
  }）;

  div {
    宽度：100％；
    身高：100％；
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

在您的主要App.svelte文件中，导入并使用该组件：

从“ ./components/intersectionobserver.svelte”导入IntersectionObserver；

<intersectionobserver let:intersecting top="{400}">
  {#if相交}
    <div class="content">此消息显示在相交时。</div>
  {：别的}
    <div class="content">此消息否则显示。</div>
  {/如果}
</intersectionobserver>

<style>
  /* ...styles as in original article... */
</style>

这证明了IntersectionObserver如何充当包装器，并根据元素相交触发动作。 onMount函数确保浏览器特定的代码执行。添加CSS（如原始文章所示）完成了示例。

结论

Svelte为已建立的框架提供了令人信服的替代方案。它的性能，易用性和干净的方法使其成为强大的竞争者。尽管其较小的社区提出了潜在的挑战，但其成熟度和开源性质减轻了风险。在大规模采用之前，建议对非关键项目进行实验。

Svelte生态系统包括Sapper（用于完整的Web应用程序）和Svelte Antial（用于移动应用程序），以扩展其功能。考虑一下Svelte的性能优势和对开发人员友好的设计。

以上是结识了Skvelte，这是街区上的新框架的详细内容。更多信息请关注PHP中文网其他相关文章！