苗條3：一種新的前端開發(fā)方法

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

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

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

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

npx degit sveltejs/template github-repository-searcher

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

1. <code></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} <樣式> / *用於樣式列表的CSS */
   {#each filteredRepos作為存儲庫}
   {repository.name} {repository.url} <p> <code>Search {/每個} App.svelte repositories

   import search app.svelte

   並根據(jù) repositories的可用性進行條件使用IT <p> <code>$:反應性和過濾：Search.sveltefilteredRepos $：<code> <code> search.svelte.svelte<code>userSearchTerm> $：<ancy> $：<ante> $：<ancvelte> filteredRepos<code>repositories更新，每當 usersearchterm
   >或 repositories <p>更改時。 還討論了使用功能或事件聽眾的替代方法，突出了Svelte的反應性功能的好處。 <strong></strong>生產(chǎn)構建：</p> <p> <code>npm run build>運行 NPM Run Build <and>以創(chuàng)建一個可以生產(chǎn)的捆綁包。 由於Svelte的彙編過程，最終的捆綁包大小通常很小。 <ancy>> </ancy></and>

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

   什麼是Svelte？

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

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