Selama bertahun-tahun, Vue, Angular, dan React menguasai landskap rangka kerja komponen depan. Walaupun Google dan Facebook menawarkan penyelesaian mereka sendiri, etos sumber terbuka rangka kerja seperti VUE (dengan penaja berganda, mengelakkan kawalan tunggal korporat) memegang rayuan yang signifikan. Masukkan Svelte, komitmen Vue berkongsi bintang yang semakin meningkat untuk lesen MIT terbuka.

Sebelum ini dipaparkan pada trik CSS (terutamanya artikel berwawasan Ollie Williams mengenai CSS berasaskan komponennya), Svelte menjamin peperiksaan yang lebih dekat. Artikel ini meneroka ciri -ciri uniknya, pembezaan dari rangka kerja lain, dan pelaksanaan praktikal.

Pendekatan tersendiri Svelte

"Svelte telah menjadi perpustakaan komponen JavaScript yang paling mudah untuk belajar dan menggunakan secara produktif."

- Jeff Delaney, Svelte Realtime Todo List dengan Firebase

Svelte, seperti React, Angular, dan Vue, adalah perpustakaan komponen JavaScript. Walau bagaimanapun, pembezaan terasnya adalah:

1. Penyusunan masa depan: Svelte bertindak sebagai pengkompil, mengubah kod HTML, JavaScript, dan CSS hibrid ke dalam fail JavaScript, HTML, dan CSS yang dioptimumkan. Pra-kompilasi ini, sama dengan C# ke bytecode atau typescript ke JavaScript, tetapi merangkumi ketiga-tiga bahasa, meningkatkan fleksibiliti dan prestasi klien dengan mengalihkan perhitungan dari runtime untuk membina masa.

2. Tiada DOM Maya: Rangka kerja tradisional menggunakan DOM maya, salinan memori DOM, untuk kemas kini yang cekap. Svelte memintas ini, secara langsung memanipulasi dom sebenar. Walaupun DOM maya menawarkan pengoptimuman, pendekatan Svelte, dengan pengiraan masa binaannya, pembedahan menggunakan perubahan, yang membawa kepada keuntungan prestasi yang berpotensi, terutama dalam aplikasi yang lebih besar.

3. SCOPING CSS terbina dalam: Styling bersepadu Svelte mengelakkan kerumitan penyelesaian CSS-in-JS. Ia mengasingkan CSS komponen, mengeluarkannya untuk memisahkan fail semasa proses membina, mempromosikan gaya yang bersih dan terkandung. Walaupun plugin wujud untuk preprocessors seperti sass dan kurang, pengendalian CSS asli Svelte sangat cekap dan mudah.

Svelte vs Rangka Kerja Lain

Senibina unik Svelte memberi kesan kepada prestasi dan pengalaman pemaju. Walaupun banyak perbandingan wujud, kelajuannya adalah kelebihan yang ketara. Walau bagaimanapun, kelajuan bukan metrik tunggal. Jadual berikut memberikan perbandingan yang lebih luas:

[Jadual yang membandingkan Svelte dengan rangka kerja lain akan pergi ke sini, berdasarkan penerangan jadual teks asal.] Kedudukan kuat Svelte, walaupun masyarakat relatifnya dan masyarakat yang lebih kecil, terkenal. Kepuasan pemaju yang tinggi berbeza dengan penurunan baru -baru ini yang diperhatikan dalam rangka kerja "Big Three". Sifat sumber terbuka adalah aset yang besar.

Contoh Svelte Praktikal: Observer Persimpangan

Untuk menggambarkan kepraktisan Svelte, mari kita melaksanakan pemerhati persimpangan, teknik peningkatan prestasi yang sering disyorkan untuk mengelakkan isu-isu acara tatal pasif. Kami akan memanfaatkan Repl Svelte untuk contoh yang mudah.

Selepas menubuhkan projek Svelte Asas (butiran yang ditinggalkan untuk keringkasan), buat IntersectionObserver.svelte dalam folder src/components dengan kod berikut:

 import {onMount} dari 'svelte';
Eksport biarkan sekali = palsu;
Eksport Let Top = 0;
Eksport Let Bottom = 0;
Eksport biarkan kiri = 0;
Eksport Let Right = 0;
biarkan bersilang = palsu;
biarkan bekas;

onMount (() => {
    jika (Typeof IntersectionObserver! == 'Undefined') {
      const rootMargin = `$ {bawah} px $ {left} px $ {top} px $ {right} px`;
      const Observer = New IntersectionObserver (entries => {
        bersilang = penyertaan [0] .isintersecting;
        jika (bersilang && sekali) {
          Observer.unobserve (kontena);
        }
        }, {
          rootmargin
      });
        Observer.observe (bekas);
        kembali () => Observer.UnobServe (bekas);
  }

  fungsi pengendali () {
    const bcr = container.getBoundingClientRect ();
    bersilang = (
      (bcr.bottom bawah)> 0 &&
      (bcr.right right)> 0 &&
      (bcr.top - atas) <window.innerheight kiri jika sekali window.removeeventlistener pengendali window.addeventlistener kembali> window.RemoveEventListener ('tatal', pengendali);
  });

  div {
    Lebar: 100%;
    Ketinggian: 100%;
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

Dalam fail utama anda App.svelte Fail, import dan gunakan komponen:

 import intersectionobserver dari "./components/intersectionobserver.svelte";

<intersectionobserver let:intersecting top="{400}">
  {#if bersilang}
    <div class="content">Mesej ini menunjukkan semasa bersilang.</div>
  {: else}
    <div class="content">Mesej ini menunjukkan sebaliknya.</div>
  {/jika}
</intersectionobserver>

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

Ini menunjukkan bagaimana IntersectionObserver bertindak sebagai pembungkus, mencetuskan tindakan berdasarkan persimpangan elemen. Fungsi onMount memastikan pelaksanaan kod khusus pelayar. Menambah CSS (seperti yang ditunjukkan dalam artikel asal) melengkapkan contohnya.

Kesimpulan

Svelte menawarkan alternatif yang menarik untuk rangka kerja yang ditetapkan. Prestasi, kemudahan penggunaan, dan pendekatan yang bersih menjadikannya pesaing yang kuat. Walaupun komuniti yang lebih kecil memberikan cabaran yang berpotensi, kematangan dan sifat sumber terbuka mengurangkan risiko. Eksperimen dengan projek tidak kritikal disyorkan sebelum penggunaan berskala besar.

Ekosistem Svelte termasuk Sapper (untuk aplikasi web penuh) dan Svelte Native (untuk aplikasi mudah alih), mengembangkan keupayaannya. Pertimbangkan Svelte untuk kelebihan prestasi dan reka bentuk yang mesra pemaju.

Atas ialah kandungan terperinci Berkenalan dengan Svelte, rangka kerja baru di blok. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!