結識了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中文網其他相關文章！