Svelte 3：基於激進編譯器的JavaScript框架

苗條3：一種新的前端開發方法

>本文探討了Svelte 3，這是一個獨特的前端JavaScript框架，通過其編譯過程來區分自己。與React這樣的框架（將大型JavaScript捆綁包裝）等框架不同，Svelte將應用程序編譯為明顯較小，優化的JavaScript代碼。在構建過程中實現的這種優化導致更快，更有效的應用程序。 Svelte還提供了一種獨特的數據管理和DOM操縱方法。 它直接更新了真實的DOM，消除了對虛擬DOM的需求，從而提高了性能。 這是其直觀的成分創建和內置的反應性狀態，使發展變得愉快和高效。 甚至經驗豐富的React或Vue開發人員也會發現值得探索的Svelte。 讓我們構建一個簡單的應用程序以演示其功能。

Svelte的關鍵優勢：

優化的JavaScript： Svelte編譯到優化的JavaScript，與React等框架相比，降低了運行時大小。

>

• 直接DOM操作：> >簡化的組件：
組件創建用示波器的CSS和集成的反應狀態簡化。 >
• 編譯器方法最小化代碼和样板，加速開發。
• 直覺語法：
用最小語法處理反應性和組件通信。
• 。 輕巧有效：
• 入門：
為了避免捆綁和基礎設施的複雜性，我們將遵循官方的Svelte教程。 確保您安裝了節點並安裝了git。然後，執行：
• 這將SVELTE模板夾在
目錄中，並設置必要的工具。 之後，導航到目錄（

）並運行

以安裝依賴項。最後，使用匯總啟動開發服務器。訪問>。

的應用程序

構建一個Svelte組件：

<code class="language-bash">npx degit sveltejs/template github-repository-searcher</code>

> github-repository-searchersvelte組件位於cd github-repository-searcher>文件中。 該模板提供npm install，構成為三個部分：>

1. <code> <code>
{#each filteredRepos as repository}
• {repository.name} <code>{repository.url} / *用於樣式列表的CSS */
  {#each filteredRepos作為存儲庫}
  {repository.name} <code> {repository.url}

  <code>Search {/每個} <code>App.svelte repositories

  import <code> search app.svelte

  並根據 repositories的可用性進行條件使用IT

  <code>$:反應性和過濾：Search.sveltefilteredRepos $： <code> search.svelte.svelteuserSearchTerm> <code> $：<ancy> $：<ante> $：<ancvelte> filteredRepos<code>repositories更新，每當 usersearchterm

  >或 repositories <p>更改時。 還討論了使用功能或事件聽眾的替代方法，突出了Svelte的反應性功能的好處。 <strong></strong>生產構建：</p> <p> <code>npm run build>運行 NPM Run Build <and>以創建一個可以生產的捆綁包。 由於Svelte的彙編過程，最終的捆綁包大小通常很小。 <ancy>> </ancy></and>

  結論： Svelte提供了一種令人信服的傳統框架替代方案，強調代碼效率和性能。它的直觀語法和內置功能簡化了開發，使其成為前端開發的強大競爭者。

  什麼是Svelte？

  > Svelte與React/Vue？ react/vue在瀏覽器中做更多的工作。
  • > svelte如何處理組件？ 組件寫在html/css/js like語法中並編譯為有效的JavaScript。
  • Svelte是否使用虛擬DOM？ >什麼是Sveltekit？ Svelte？ > 較小的捆綁尺寸，更快的性能，簡單的語法，更少的樣板。

以上是Svelte 3：基於激進編譯器的JavaScript框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！