使用Svelte建立閱讀清單

苗條：前端框架景觀中的後起之秀

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 id="Add-Book">Add Book</h4>
<input type="text">
<h4 id="My-Books">My Books</h4>
<ul>
  <li>A book</li>
</ul>

</pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4 id="My-Books">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 id="My-Books">My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

Svelte Scopes樣式。 最後，讓我們添加一個淡入淡出的過渡：

>

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