多年來，VUE，Angular和Rection占據(jù)了前端組件框架的統(tǒng)治。雖然Google和Facebook提供了自己的解決方案，但Vue之類的框架的開源精神（具有多個贊助商，避免單公司控制）具有重大吸引力。輸入Sivete，這是一位共享Vue對開放MIT許可證的承諾的后起之秀。

Svelte以前曾在CSS-Tricks（尤其是Ollie Williams在其基于組件的CSS上的有見地的文章）中進(jìn)行了介紹，Svelte值得仔細(xì)檢查。本文探討了其獨特的功能，與其他框架的區(qū)別以及實際實現(xiàn)。

Svelte的獨特方法

“ Svelte是最簡單的JavaScript組件庫，可以有效地學(xué)習(xí)和使用。”

- 杰夫·德萊尼（Jeff Delaney），帶firebase

像React，Angular和Vue一樣，Svelte是JavaScript組件庫。但是，其核心區(qū)別是：

1. 提前編譯： Svelte充當(dāng)編譯器，將其混合HTML，JavaScript和CSS代碼轉(zhuǎn)換為優(yōu)化的JavaScript，HTML和CSS文件。這種預(yù)譯本類似于c＃to bytecode或typescript到j(luò)avaScript，但涵蓋了所有三種語言，通過將計算從運行時轉(zhuǎn)換為構(gòu)建時間來增強(qiáng)靈活性和客戶端性能。

2. 沒有虛擬DOM：傳統(tǒng)框架利用虛擬DOM，即DOM的內(nèi)存駐留副本，以進(jìn)行有效的更新。 Svelte繞過這一點，直接操縱真實的DOM。雖然虛擬DOMS提供優(yōu)化，但Svelte的方法及其構(gòu)建時間計算進(jìn)行了手術(shù)應(yīng)用更改，從而導(dǎo)致潛在的性能增長，尤其是在較大的應(yīng)用程序中。

3. 內(nèi)置CSS范圍： Svelte的集成樣式避免了CSS-IN-JS解決方案的復(fù)雜性。它隔離組件CS，將其輸出到構(gòu)建過程中分離文件，從而促進(jìn)清潔，封裝的樣式。盡管Sass和Simel等預(yù)處理器存在插件，但Svelte的本機(jī)CSS處理非常有效且直接。

Svelte vs.其他框架

Svelte的獨特體系結(jié)構(gòu)影響了其性能和開發(fā)人員的經(jīng)驗。盡管存在許多比較，但其速度是一個重要的優(yōu)勢。但是，速度不是唯一的指標(biāo)。下表提供了更廣泛的比較：

[根據(jù)原始文本的表格描述，將SVELTE與其他框架進(jìn)行比較的表格將進(jìn)入這里。高開發(fā)人員的滿意度與“三巨頭”框架中最近觀察到的最新下降形成對比。它的開源性質(zhì)是一項相當(dāng)大的資產(chǎn)。

一個實用的苗條示例：交叉觀察者

為了說明Svelte的實用性，讓我們實現(xiàn)一個交叉觀察者，這是一種避免被動滾動事件問題的增強(qiáng)性能提高技術(shù)。我們將利用Svelte的REPL進(jìn)行簡化的示例。

設(shè)置一個基本的Svelte項目（省略了簡潔的詳細(xì)信息）后，在src/components文件夾中創(chuàng)建IntersectionObserver.svelte 。

從'svelte'導(dǎo)入{onmount};
導(dǎo)出讓一次= false;
導(dǎo)出令top = 0;
導(dǎo)出讓底部= 0;
導(dǎo)出讓左= 0;
導(dǎo)出讓正確= 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文件中，導(dǎo)入并使用該組件：

從“ ./components/intersectionobserver.svelte”導(dǎo)入IntersectionObserver；

<intersectionobserver let:intersecting top="{400}">
  {#if相交}
    <div class="content">此消息顯示在相交時。</div>
  {：別的}
    <div class="content">此消息否則顯示。</div>
  {/如果}
</intersectionobserver>

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

這證明了IntersectionObserver如何充當(dāng)包裝器，并根據(jù)元素相交觸發(fā)動作。 onMount函數(shù)確保瀏覽器特定的代碼執(zhí)行。添加CSS（如原始文章所示）完成了示例。

結(jié)論

Svelte為已建立的框架提供了令人信服的替代方案。它的性能，易用性和干凈的方法使其成為強(qiáng)大的競爭者。盡管其較小的社區(qū)提出了潛在的挑戰(zhàn)，但其成熟度和開源性質(zhì)減輕了風(fēng)險。在大規(guī)模采用之前，建議對非關(guān)鍵項目進(jìn)行實驗。

Svelte生態(tài)系統(tǒng)包括Sapper（用于完整的Web應(yīng)用程序）和Svelte Antial（用于移動應(yīng)用程序），以擴(kuò)展其功能?？紤]一下Svelte的性能優(yōu)勢和對開發(fā)人員友好的設(shè)計。

以上是結(jié)識了Skvelte，這是街區(qū)上的新框架的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！