Svelte 3: Rangka Kerja JavaScript Berasaskan Radikal

Svelte 3: Pendekatan baru untuk pembangunan front-end

Artikel ini meneroka Svelte 3, rangka kerja JavaScript front-end yang unik yang membezakan dirinya melalui proses penyusunannya. Tidak seperti rangka kerja seperti React, yang menghantar satu bundle JavaScript yang besar, Svelte menyusun aplikasi ke dalam kod JavaScript yang lebih kecil, yang dioptimumkan. Pengoptimuman ini, yang dicapai semasa proses membina, menghasilkan aplikasi yang lebih cepat dan lebih cekap.

Svelte juga menawarkan pendekatan tersendiri kepada pengurusan data dan manipulasi DOM. Ia secara langsung mengemas kini DOM sebenar, menghapuskan keperluan untuk DOM maya, yang membawa kepada prestasi yang lebih baik. Ini, ditambah pula dengan penciptaan komponen intuitif dan keadaan reaktif terbina dalam, menjadikan pembangunan menyeronokkan dan cekap. Malah pemaju React atau Vue yang berpengalaman akan mendapati Svelte bernilai meneroka. Mari kita bina aplikasi mudah untuk menunjukkan keupayaannya.

Kelebihan Utama Svelte:

• JavaScript yang dioptimumkan: Svelte Compiles untuk mengoptimumkan JavaScript, mengurangkan saiz runtime berbanding rangka kerja seperti React.
• Manipulasi Dom Direct: Svelte mengemas kini DOM sebenar secara langsung, meningkatkan pengurusan data dan kecekapan manipulasi DOM.
• Komponen yang dipermudahkan: Penciptaan komponen diselaraskan dengan CSS scoped dan keadaan reaktif bersepadu.
• kurang boilerplate: Pendekatan pengkompil meminimumkan kod dan boilerplate, mempercepatkan pembangunan.
• Sintaks intuitif: Reaktiviti dan komunikasi komponen dikendalikan dengan sintaks minimum.
• ringan dan cekap: Svelte menawarkan alternatif yang ringan untuk kerangka yang lebih berat seperti React and Vue.

Bermula:

Untuk mengelakkan kerumitan bundling dan infrastruktur, kami akan mengikuti tutorial Svelte rasmi. Pastikan anda mempunyai nod dan git dipasang. Kemudian, laksanakan:

npx degit sveltejs/template github-repository-searcher

Klon ini template svelte ke dalam direktori

dan menetapkan perkakas yang diperlukan. Selepas itu, navigasi ke direktori (github-repository-searcher) dan jalankan cd github-repository-searcher untuk memasang kebergantungan. Akhirnya, npm install memulakan pelayan pembangunan menggunakan rollup. Akses aplikasi di npm run dev. http://localhost:5000

Membina komponen svelte: Komponen Svelte berada dalam fail

. Templat ini menyediakan

, berstruktur ke dalam tiga bahagian: .svelte

1. / * Css untuk menggayakan senarai */
   </li> <style> /* CSS for styling the list */ </style> <div class="search-wrapper"> <form class="search-form"> <input type="text" bind:value={userSearchTerm} placeholder="search for repositories" /> </form> <ul> {#each filteredRepos as repository} <li> <strong>{repository.name}</strong> <code>{repository.url} {#each filteredRepos sebagai repositori}
   {repository.name} {repository.url} </pre> <p> {/setiap} <code>Search App.svelte repositories
   import carian <p> ke <code> app.svelte <strong> dan menggunakannya secara kondusif berdasarkan ketersediaan <code> repositori .

   $: Reaktiviti dan Penapisan: Search.svelte filteredRepos userSearchTerm kereaktifan Svelte ditunjukkan oleh $: <code>repositories sintaks dalam search.svelte

   . Ini memastikan filteredRepos <p> mengemas kini setiap kali <code> userSearchterm <strong> atau <code> repositories perubahan. Pendekatan alternatif menggunakan fungsi atau pendengar acara juga dibincangkan, menonjolkan manfaat ciri -ciri kereaktifan Svelte.

   npm run build Pengeluaran membina:

   Run NPM Run Build untuk membuat bundle siap pengeluaran. Saiz bundle yang dihasilkan biasanya kecil disebabkan oleh proses penyusunan Svelte.

   Kesimpulan:

   Svelte menawarkan alternatif yang menarik untuk rangka kerja tradisional, menekankan kecekapan dan prestasi kod. Sintaks intuitif dan ciri terbina dalamnya memudahkan pembangunan, menjadikannya pesaing yang kuat untuk pembangunan front-end.

   • SVELTE FAQ (versi ringkas):
   • Apakah Svelte?
   Bagaimanakah svelte berbeza daripada react/vue?
   • Svelte compiles to code yang lebih kecil, lebih cepat; React/Vue melakukan lebih banyak kerja dalam penyemak imbas.
   Bagaimana komponen mengendalikan svelte?
   • Komponen ditulis dalam sintaks HTML/CSS/JS dan disusun untuk JavaScript yang cekap.
   Adakah svelte menggunakan dom maya?
   • Tidak, ia mengemas kini dom sebenar secara langsung.
   Apakah Sveltekit?
   • Kelebihan Svelte? Saiz bundle yang lebih kecil, prestasi yang lebih cepat, sintaks mudah, kurang boilerplate.

   

   Atas ialah kandungan terperinci Svelte 3: Rangka Kerja JavaScript Berasaskan Radikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!