Bina senarai bacaan dengan Svelte

svelte: bintang yang semakin meningkat di landskap kerangka frontend

Svelte telah mendapat populariti dengan cepat, melampaui status "hanya satu lagi kerangka frontend." Pengiktirafannya termasuk "Breakthrough of the Year" (Negeri JS 2019), penarafan kepuasan tertinggi (Negeri JS 2020), dan gelaran Rangka Kerja Web Paling Dicinta (Stack Overflow 2021). Kejayaan ini berpunca daripada gabungannya yang menarik dari saiz bundle kecil, prestasi yang sangat baik, dan reka bentuk mesra pengguna. Di luar kekuatan terasnya, Svelte menawarkan ciri-ciri berharga seperti pengurusan negeri terbina dalam, peralihan, dan animasi. Tutorial ini menerangkan bagaimana Svelte mencapai kecekapan ini. Tutorial berikutnya akan menyelidiki lebih mendalam ke dalam aplikasi bangunan dengan Svelte.

Kejadian Svelte

Walaupun pengangkatan arus perdana Svelte bermula pada awal tahun 2020 -an, asal usulnya kembali ke akhir 2016 dengan komitmen GitHub yang pertama. Dicipta oleh Rich Harris (juga terkenal dengan Rollup Bundler), Svelte muncul dari pengalamannya sebagai editor grafik di The Guardian . Keperluannya untuk alat yang memudahkan penciptaan visualisasi laman web interaktif tanpa mengorbankan prestasi atau saiz bundle, sementara masih dapat diakses oleh rakan sekerja yang kurang mahir, membawa kepada pembangunan Svelte.

Pada mulanya mendapat yang kecil, berdedikasi berikut dalam komuniti sumber terbuka, kejayaan Svelte tiba dengan pembebasan versi 3 pada bulan April 2019. Versi ini, penulisan lengkap yang menekankan pengalaman pemaju dan kemudahan penggunaan, yang digerakkan ke dalam perhatian. Popularitinya telah melonjak, menarik lebih banyak penyelenggara dan membawa kepada Rich Harris menyertai Vercel untuk memberi tumpuan kepada Svelte sepenuh masa. Untuk perbandingan komprehensif Svelte dengan React dan Vue, lihat "Svelte 3: Rangka Kerja JavaScript berasaskan radikal."

membina aplikasi senarai buku mudah

mari kita membina aplikasi senarai buku mudah untuk menggambarkan keupayaan Svelte. Permohonan akhir akan menyerupai imej di bawah:

Kami akan bermula dengan template projek Svelte rasmi (alternatif termasuk templat berasaskan Vite atau Sveltekit untuk aplikasi yang lebih kompleks). Setelah memasang pakej yang diperlukan (

), kami akan mengubah suai

untuk membuat struktur HTML asas: npm install App.svelte

Kod ini, ditulis secara langsung di peringkat atas, memanfaatkan sintaks HTML-SUPERSET Svelte.

<code class="language-html"><h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul></code>

Seterusnya, kami akan menambah senarai buku statik dan gelung untuk menjadikannya:

<code class="language-html"><h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul></code>

<label> Add Book <input type="text" bind:value="{newBook}" on:keydown="{addBook}"> </label> <h4>My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook} newBook Mewujudkan pengikatan dua hala antara input dan pembolehubah on:keydown={addBook}. addBook menambah pendengar acara; Fungsi books mengemas kini array

apabila Enter ditekan. Kereaktifan Svelte secara automatik akan membuat komponen.

Proses kompilasi Svelte

.svelte Prestasi Svelte dan saiz bundle kecil adalah disebabkan oleh sifat pengkompilnya. Ia memproses fail

, mengubahnya menjadi JavaScript yang dioptimumkan yang mengemas kini DOM. Ini menghapuskan keperluan untuk runtime yang besar dan membolehkan penyokong yang cekap.

menambah gaya dan peralihan

mari kita tingkatkan UI dengan CSS:

<code class="language-javascript">

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul></code>

gaya skop svelte secara lalai. Akhirnya, mari kita tambahkan peralihan pudar:

<code class="language-css"><style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style></code>

kod lengkap, termasuk gaya dan peralihan, ditunjukkan di bawah:

<code class="language-javascript">

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul></code>

Ini menghasilkan aplikasi senarai buku yang berfungsi dan visual. (Imej permohonan akhir akan pergi ke sini:

)

Pertimbangan Senibina dan Peningkatan Masa Depan

Tutorial ini menyediakan pengenalan asas. Aplikasi yang lebih besar memerlukan pengurusan negeri, pelbagai komponen, dan mekanisme interaksi komponen. Svelte menawarkan penyelesaian untuk ini, yang akan diterokai dalam tutorial berikutnya.

betul -betul betul untuk projek anda yang seterusnya?

Penyelenggaraan aktif Svelte, perkakas yang mantap, ciri -ciri stabil, ekosistem yang semakin meningkat, dan ketersediaan Sveltekit menjadikannya pesaing yang kuat untuk pelbagai projek. Masyarakat berkembang maju, dan rangka kerja tidak menunjukkan tanda -tanda perlahan.

Langkah seterusnya

Ini adalah bahagian pertama siri enam bahagian. Bahagian masa depan akan meliputi sintaks templat, pernyataan reaktif, kedai, interaksi komponen, dan ujian. Siri lengkap juga boleh didapati di Amazon. <script> let books = ['Learning Svelte', 'The Zen of Cooking Tea']; </script>

Atas ialah kandungan terperinci Bina senarai bacaan dengan Svelte. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!