Svelte

你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。 注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。 屬性是我們將信息傳遞給組件的方式。這包括變數和函數。 Astro 組件 也支持屬性。 以下是如何使用它們。 假設你在 src/components/Hello.astro 中定義了一個 Hello 組件： <p>Hello！</p> 在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱： <p>Hello {Astro.props.name}！</p> 通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便： --- const { name } = Astro.props --- <p>Hello {name}！</p> 下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" /> --- const { name, message } = Astro.props --- <p>{message} {name}！</p> 以這種方式，你可以為未設置的屬性提供默認值： --- const { name = '', message = 'Hello' } = Astro....

一個關於JavaScript中一個很少使用的功能的教程：標記語句 JavaScript有一個相對較為不知名的功能，它允許你對語句進行標記。 我最近在Svelte中看到這個功能的使用，它用於創建反應式聲明，這些聲明在語句中聲明的變量發生變化時重新計算： $: console.log(variable) 它們還允許使用語句塊，這是JavaScript的另一個特性，它允許你在可以定義語句的地方定義一個塊： $: { console.log(variable) console.log('another thing') //... } 這可能看起來很奇怪，但這是正確的JavaScript。這個語句塊被賦予了$ 標記。 Svelte編譯器在內部使用這個功能來創建反應式聲明。 我從未在其他地方使用過這個功能，但它的主要用例是在不是最近的循環或switch的語句中跳出。 這裡有一個簡單的例子來解釋我的意思。 在這些點中的任何一個位置調用break，都會跳出switch，以避免運行其他case： for (let y = 0; y < 3; y++) { switch (y) { case 0: console.log(0) break case 1: console.log(1) break case 2: console.log(2) break } } 這將正確地輸出0 1 2到控制台。 但是，如果我們想在reache到case 1時跳出for循環呢？這是如何做到的： loop: for (let y = 0; y < 3; y++) { switch (y) { case 0: console.log(0) break case 1: console....

如何開始使用 Svelte 自從我開始使用 Hugo 作為靜態網站生成器創建網站以來，我喜歡這種在網絡上發布的方式，相對於使用動態生成頁面的 CMS，這是我過去習慣的方式。 Svelte 是一個 JavaScript 框架，它給我一種相同的感覺。與 React、Vue、Angular 和其他框架相比，使用 Svelte 構建的應用是事先編譯的，您的網站訪問者不需要網絡中的框架和庫代碼，結果是體驗更順暢，消耗帶寬更少，一切都感覺更快和更輕量級。 就像 Hugo 一樣，在部署時，Svelte 消失了，你只得到純 JavaScript。 但讓我們跳轉到文章的主要內容。如何開始使用 Svelte。 需要安裝 Node.js。如果你還沒有安裝，請參考我的如何安裝 Node.js文章！ 並確保它是最新版本的（如何更新 Node.js）。 Node 安裝了npx命令，這是一種運行 Node 命令的便捷方式。特別是我們將運行以下命令： npx degit sveltejs/template firstapp 這將下載並運行degit 命令，它接下來會下載位於https://github.com/sveltejs/template的 Svelte 項目模板的最新代碼到firstapp文件夾中。 現在進入 firstapp 文件夾，運行 npm install 下載模板的其他依賴項。在撰寫本文時，這些依賴項如下： "npm-run-all" "rollup" "rollup-plugin-commonjs" "rollup-plugin-livereload" "rollup-plugin-node-resolve" "rollup-plugin-svelte" "rollup-plugin-terser" "svelte" 如您所見，其中包括 Svelte 核心，還有 Rollup（一個替代 Webpack 的工具）及其一些插件。此外還有 npm-run-all，它是一個用於並行或串行運行多個 npm 腳本的 CLI 工具。 現在，我們可以運行開發模式下的 Svelte 網站，運行以下命令： npm run dev 這將在默認情況下在 localhost 的 5000 端口啟動應用程序：...

如何使用 Svelte 的生命周期事件 Svelte 中的每個組件都會觸發幾個生命周期事件，我們可以在其中進行操作，以實現我們想要的功能。 具體而言，我們有 onMount - 在組件渲染後觸發 onDestroy - 在組件被銷毀後觸發 beforeUpdate - 在 DOM 更新之前觸發 afterUpdate - 在 DOM 更新後觸發 我們可以通過 Svelte 觸發這些事件時安排執行特定的函數。 默認情況下，我們無法直接訪問這些方法，但是我們可以從 svelte 包中導入它們： <script> import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte' </script> onMount 的常見用法是從其他源獲取數據。 以下是使用 onMount 的示例： <script> import { onMount } from 'svelte' onMount(async () => { // 在組件渲染後執行某些操作 }) </script> onDestroy 允許我們清理數據或停止在組件初始化時開始的任何操作，比如使用 setInterval 設置的計時器或定期執行的函數。 需要注意的是，如果我們從 onMount 返回一個函數，那麼它的功能與 onDestroy 相同 - 當組件被銷毀時運行該函數：...

如何在 Svelte 中使用綁定 使用 Svelte，您可以在數據和 UI 之間創建雙向綁定。 許多其他 Web 框架可以提供雙向綁定，這是一種非常常見的模式。 在表單中特別有用。 bind:value 讓我們從您通常會使用的最常見的綁定方式開始，您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量，並將它綁定到表單字段上： <script> let name = '' </script> <input bind:value={name}> 現在，如果 name 變量發生變化，輸入字段將更新其值。反之亦然：如果用戶更新表單，則 name 變量的值也會更改。 請注意，該變量必須使用 let/var 關鍵字定義，而不能使用 const，否則它無法被 Svelte 更新，因為 const 定義了一個值無法重新分配的變量。 bind:value 可以用於所有類型的輸入字段（type="number"，type="email" 等），但它也適用於其他類型的字段，比如 textarea 和 select（稍後會詳細介紹 select）。 複選框和單選按鈕 複選框和單選按鈕（input 元素的 type="checkbox" 或 type="radio"）允許以下 3 種綁定方式： bind:checked bind:group bind:indeterminate bind:checked 允許我們將一個值綁定到元素的選中狀態： <script> let isChecked </script> <input type=checkbox bind:checked={isChecked}> bind:group 對複選框和單選按鈕很有用，因為這些按鈕通常以組的形式使用。使用 bind:group，您可以將一個 JavaScript 數組關聯到一組複選框上，並根據用戶的選擇自動填充它。 以下是一個示例。goodDogs 數組根據我勾選的複選框填充：...

在 Svelte 中處理狀態更新 如何使用 Svelte 中的反應式賦值來處理組件內的狀態更新 Svelte 的一個很棒的地方是，你不需要做任何特殊的事情來更新組件的狀態。 你只需要一個賦值操作。 假設你有一個 count 變量。你可以用 count = count + 1 或者 count++ 來對其進行增加： <script> let count = 0 const incrementCount = () => { count++ } </script> {count} <button on:click={incrementCount}>+1</button> 如果你對現代 Web 框架如何處理狀態更新的方式不熟悉的話，這沒有什麼突破性的。但是在 React 中，你需要調用 this.setState() 或使用 useState() hook。 Vue 則採取了一種更結構化的方法，使用類和 data 屬性。 在使用過這兩種方式之後，我發現 Svelte 更像是一種更接近 JavaScript 的語法。 有一件事我們需要注意到，這很容易學到：在更改值時，我們也必須進行賦值。 對於像字符串和數字這樣的簡單值，這通常是理所當然的，因為字符串的所有方法都返回新的字符串，數字也是如此 - 它們是不可變的。 但是對於數組呢？我們不能使用修改數組的方法，比如 push()、pop()、shift()、splice()…，因為沒有賦值的操作。它們改變了內部的數據結構，但是 Svelte 無法檢測到這一點。 嗯，你仍然可以使用它們，但是在進行操作之後，你需要將變量重新賦值給它自身，像這樣： let list = [1, 2, 3] list....

學習如何在Svelte中使用模板，特別是如何使用條件語句。 任何一個好的Web模板語言都至少提供了兩樣東西：條件結構和循環。 Svelte也不例外，在本篇文章中，我將介紹條件結構。 您希望能夠查看一個值/表達式，如果它指向一個真值，則執行某些操作；如果它指向一個假值，則執行其他操作。 Svelte提供了一組非常強大的控制結構。 首先是if： {#if isRed} <p>紅色</p> {/if} 有一個開始標記{#if}和一個結束標記{/if}。開始標記檢查一個值或語句是否為真值。在這個例子中，isRed可以是一個具有true值的布爾值： <script> let isRed = true </script> 一個空字符串是假值，但帶有內容的字符串是真值。 0是假值，但大於0的數字是真值。 布爾值true是真值，當然，false是假值。 如果開始標記的條件不滿足（提供了一個假值），則不會發生任何事情。 如果條件不滿足，需要執行其他操作，我們可以使用適當命名的else語句： {#if isRed} <p>紅色</p> {:else} <p>不是紅色</p> {/if} 在模板中，要麼渲染第一個代碼塊，要麼渲染第二個代碼塊。沒有其他選項。 您可以在if塊條件中使用任何JavaScript表達式，因此可以使用!運算符對一個選項進行取反： {#if !isRed} <p>不是紅色</p> {:else} <p>紅色</p> {/if} 現在，在else內部，您可能還想檢查其他條件。這就是{:else if somethingElse}語法的用法： {#if isRed} <p>紅色</p> {:else if isGreen} <p>綠色</p> {:else} <p>既不是紅色也不是綠色</p> {/if} 您可以擁有多個這樣的代碼塊，不僅僅是一個，並且可以對它們進行嵌套。以下是一個更複雜的示例： {#if isRed} <p>紅色</p> {:else if isGreen} <p>綠色</p> {:else if isBlue} <p>它是藍色</p> {:else} {#if isDog} <p>它是一隻狗</p> {/if} {/if}

如何在 Svelte 中使用反應式語句 在 Svelte 中，您可以監聽組件狀態的變化並更新其他變數。 舉個例子，如果您有一個 count 變數： <script> let count = 0 </script> 並且您通過點擊一個按鈕來更新它： <script> let count = 0 const incrementCount = () => { count = count + 1 } </script> {count} <button on:click={incrementCount}>+1</button> 您可以使用特殊的 $: 語法來監聽 count 的變化，該語法定義了一個新區塊，在任何被引用的變數發生更改時 Svelte 將重新運行該區塊。 以下是一個例子： <script> let count = 0 const incrementCount = () => { count = count + 1 } $: console.log(`${count}`) </script> {count} <button on:click={incrementCount}>+1</button> 我使用了以下區塊： $: console....

學習如何在 Svelte 模板中處理 Promises Promises 是一種在 JavaScript 中處理異步事件的強大工具。 ES2017 中相對較新引入的 await 語法使得使用 Promises 更加簡單。 Svelte 在模板中提供了 {#await} 語法，以直接處理模板層級的 Promises。 我們可以等待 Promises 解析，並為 Promise 的各種狀態（未解析、已解析和被拒絕）定義不同的 UI。 這是它的工作原理。我們定義一個 Promise，然後使用 {#await} 區塊等待其解析。 一旦 Promise 解析完成，結果將傳遞給 {:then} 區塊： <script> const fetchImage = (async () => { const response = await fetch('https://dog.ceo/api/breeds/image/random') return await response.json() })() </script> {#await fetchImage} <p>...等待中</p> {:then data} <img src={data.message} alt="狗圖片" /> {/await} 您可以通過添加 {:catch} 區塊來檢測 Promise 的拒絕： {#await fetchImage} <p>...等待中</p> {:then data} <img src={data....

學習如何在Svelte中處理事件 監聽DOM事件 在Svelte中，你可以使用on:<event>語法在模板中直接定義DOM事件的監聽器。 例如，要監聽click事件，你可以將一個函數傳遞給on:click屬性。 要監聽onmousemove事件，你可以將一個函數傳遞給on:mousemove屬性。 以下是一個範例，其中處理函數在內聯中定義： <button on:click={() => { alert('clicked') }}>點擊我</button> 以下是另一個範例，其中處理函數在組件的script部分中定義： <script> const doSomething = () => { alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 當代碼不太冗長時，我更喜歡內聯。如果只有2-3行，例如，否則我會將其移至組件的script部分。 Svelte將事件處理程序作為函數的參數傳遞，這很方便，如果你需要停止事件傳播或參考事件對象中的某些內容： <script> const doSomething = event => { console.log(event) alert('clicked') } </script> <button on:click={doSomething}>點擊我</button> 現在，我提到了“停止事件傳播”。這是一個非常常見的操作，例如停止提交表單事件。Svelte提供了修飾符，可以直接應用它，而無需手動處理。 stopPropagation和preventDefault是你最常使用的兩個修飾符，我想。 你可以這樣應用修飾符：<button on:click|stopPropagation|preventDefault={doSomething}>點擊我</button> 還有其他修飾符，它們更加專業化。capture使事件捕獲而不是冒泡，once只觸發一次事件，self只有當事件的目標是該對象時才觸發該事件（從冒泡/捕獲層次結構中移除）。 在組件中創建自定義事件 有趣的是，我們可以在組件中創建自定義事件，並使用相同的內建DOM事件語法。 要做到這一點，我們必須從svelte包中引入createEventDispatcher函數並調用它以獲取一個事件分發器： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() </script> 一旦這樣做，我們可以調用dispatch()函數，並傳遞一個字符串，用於識別事件（我們將在使用此事件的其他組件中使用on:語法）： <script> import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() //當觸發事件的時候 dispatch('eventName') </script> 現在，其他組件可以使用我們的組件，並使用以下方式：...