苗條：前端框架景觀中的後起之秀
Svelte迅速越來越受歡迎，超過了“只是另一個前端框架”的狀態。 它的讚譽包括“年度突破”（JS 2019），最高滿意度等級（JS 2020州）和大多數喜歡的網絡框架的標題（Stack Overflow 2021）。 這種成功源於其引人注目的小捆尺寸，出色的性能和用戶友好的設計。 除了其核心優勢之外，Svelte還提供了有價值的功能，例如內置狀態管理，過渡和動畫。本教程探討了Svelte如何實現這一效率。隨後的教程將更深入地研究使用Svelte的構建應用程序。
>雖然Svelte的主流採用始於2020年代初，但其起源於2016年末以其第一個Github提交追溯到2016年底。 Svelte由Rich Harris（也以Crolup Bundler而聞名）創建，從他在Guardian
上擔任圖形編輯器的經驗中出現了。 他需要一種簡化交互式網站可視化的工具，而無需犧牲性能或捆綁大小，而在技術上熟練熟練的同事則無法使用，這導致了Svelte的發展。 Svelte最初在開源社區中獲得了一個小而專用的追隨者，Smvelte的突破到達了2019年4月版本3的發布。該版本是一個完整的重寫，強調了開發人員的體驗和易用性，使Svelte引起了人們的關注。 此後，它的受歡迎程度飆升，吸引了更多的維護者，並導致Rich Harris加入Vercel，專注於Svelte全職。 有關Svelte與React和Vue的全面比較，請參見“ Svelte 3：基於自由基編譯器的JavaScript框架”。構建簡單的書籍列表應用程序 >讓我們構建一個簡單的書籍列表應用程序，以說明Svelte的功能。 最終應用程序將類似於下面的圖像：
>我們將從官方的Svelte項目模板開始（替代方案包括基於Vite的模板或Sveltekit，用於更複雜的應用程序）。安裝必要的軟件包（
）後，我們將修改
以創建基本的HTML結構：
此代碼直接寫在頂層，利用Svelte的HTML-Superset語法。
<h4>Add Book</h4> <input type="text"> <h4>My Books</h4> <ul> <li>A book</li> </ul>
</pre>
<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在輸入和on:keydown={addBook}添加了一個事件偵聽器；按下ENTER時，addBook函數會更新books數組。 Svelte的反應性會自動重新啟動組件。
svelte的彙編過程
Svelte的性能和小捆尺寸是由於其編譯器性質所致。 它預處理.svelte>文件，將它們轉換為優化的JavaScript，該文件可以通過手術更新DOM。 這消除了對大型運行時的需求，並允許有效的恢復者。
讓我們用CSS增強UI：
默認情況下，
<🎜>
<label>
Add Book
</label>
<h4>My Books</h4>
<ul>
{#each books as book}
<li>{book}</li>
{/each}
</ul>>
<style>
input {
padding: 5px 10px;
}
li {
list-style: none;
}
ul {
padding: 5px 0;
}
</style>>
<🎜>
<ul>
{#each books as book}
<li transition:fade>{book}</li>
{/each}
</ul>）
>
本教程提供了基本介紹。 較大的應用需要狀態管理，多個組件和組件交互機制。 Svelte為這些解決方案提供了解決方案，將在隨後的教程中探索。
>
svelte適合您的下一個項目嗎？> Svelte的主動維護，健壯的工具，穩定的功能，生態系統的增長以及Sveltekit的可用性使其成為各種項目的強大競爭者。 社區蓬勃發展，框架沒有放慢腳步的跡象。
下一步這是六部分系列的第一部分。 未來的零件將涵蓋模板語法，反應性語句，商店，組件交互和測試。 完整的系列也可以在Amazon上找到。
以上是使用Svelte建立閱讀清單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
