Svelte巢狀元件preventDefault構建Web應用

Svelte

Svelte用於構建快速Web應用程式。 Svelte與React和Vue一樣，致力於讓輕鬆構建靈活、互動式的使用者介面。 不同之處在於，Svelte在構建時將程式碼轉換為更好的JavaScript，而不是在執行時解釋和執行程式碼。 這意味著不必支付框架本身的效能成本，並且在首次載入時不會有額外的效能損失。 可以使用Svelte編寫整個應用程式，也可以使用Svlte逐步重構現有程式碼；也可以只輸出一個獨立的元件（不強制附加框架本身），並在任何框架中使用它。

<script>
    let name = 'world'; 
</script> 
<h2>Hello world!</h2>

在大括號中，我們可以編寫任意JavaScript。 然後可以嘗試將名稱更改為name。toUpperCase（）以使問候更加強烈。 注意：看起來正在建立一個全域性變數，但實際上，name仍然限於元件的區域性變數，也就是說，無法存取全域性物件（Window）中元件中宣告的name變數。

<script>
  let src = 'tutorial/image.gif';
</script>
<img>

樣式

對於特定的函數，Svelte仍然有相應的執行時程式碼，例如元件邏輯、if/else切換邏輯、迴圈邏輯等。但是在編譯時，如果沒有使用函數，則相應的程式碼根本不會編譯成結果。就像Babel中未使用的函數的助手不會被引入一樣，就像使用lodash或RxJS時，只有相應的函數被選擇性地引入一樣。

<img src={src} alt="A man dances.">

基於這兩個特性，Svelte應用程式的最終程式碼量可能非常小。例如，它的TodoMVC min+gzip僅晚了3kb。 然而，Svelte並非沒有潛在問題：

（1） 儘管簡單演示中的程式碼量確實很小，但同一元件模板通過這種隱式操作生成的程式碼量將大於vdom渲染函數的程式碼量，並且多個元件中會有大量重複程式碼（儘管gzip可以緩解這個問題，但解析和求值是不可避免的）。 專案中的元件越多，程式碼量的差異就越小。 同時，它並不是廣告中所說的“沒有執行時”，而是根據程式碼按需匯入。 使用的函數越多，Svelte需要包含的執行時程式碼就越多。很難說它在實際生產專案中會有多大的規模優勢。

（2） Svelte在大型應用程式中的效能仍有待觀察，尤其是在大量動態內容和巢狀元件的情況下。它的更新策略決定了它還需要一個類似於React的shouldComponentUpdate的機制來防止過度更新。

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>
<p>這是一段話。</p>

巢狀元件

將整個應用程式放在一個元件中是不切實際的。相反，我們可以從其他檔案匯入元件，並將其作為包含元素包含。 請注意，即使Nested Svelte具有＜p＞元素，App的Svelte風格也不受影響。 還要注意，元件名稱Nested是大寫的。此約定用於使我們能夠區分使用者定義的元件和常規HTML標記。

<script>
	import Nested from './Nested.svelte';
</script>

前端

通常，字串以純文字形式插入，這意味著<和>等字元沒有特殊含義。 但有時需要將HTML直接呈現到元件中。例如，正在閱讀的單詞現在存在於markdown檔案中，該檔案以HTML的形式包含在本頁中：

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{string}</p>

Svelte在將{@html…}中的表示式插入DOM之前不會清理它們。換言之，如果使用此功能，則必須手動從不受信任的源中跳脫HTML，否則可能會使使用者暴露於XSS攻擊。

一個App範例

還需要設定文字編輯器。如果正在使用VS程式碼，請安裝Svelte擴充套件。否則，請按照本指南中的說明設定文字編輯器，以便。svelte檔案與相同。html來突出顯示語法。 然後，一旦專案建立，就可以輕鬆地使用Svelte元件。編譯器將每個元件轉換為一個常規JavaScript類-只需匯入並使用new來範例化：

import App from './App.svelte';
const app = new App({
  target: document.body,
  props: {
    answer: 42
  }
});

有時，檢查流經應用程式的資料是有用的。 一種解決方案是使用控制檯。標記內的log（…）。但是，如果要暫停執行，可以將｛@debug…｝標記與要檢查的值的逗號分隔列表一起使用：

<script>
  let user = {
    firstname: 'Ada',
    lastname: 'Lovelace'
  };
</script>
{@debug user}
<h2>Hello {user.firstname}!</h2>

筆記

可以在元件中使用HTML註釋。 以svelte ignore開頭的內容將被註釋掉，直到在註釋結束標記處結束。一般來說，帶註釋的內容包含可存取性（a11y，一些有助於提高可存取性的資訊）資訊，因此請僅在有充分理由時使用。

<!-- 這是一句註釋！ -->
<h2>Hello world</h2>

如果鍵是一個表示式，它必須是唯一的，以標識列表中的每個列表項，以便Svelte可以更改列表中任何位置的資料，而不是在末尾新增或刪除資料。金鑰可以是任何物件，但建議使用字串和數位，因為它們允許在物件本身更改時保留標識。

{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}
{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest}/></li>
{/each}
{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest}/></li>
{/each}

它可以與｛@debug…｝一起使用以替換控制檯。紀錄檔（…）。每當指定變數的值發生變化時，它都會記錄這些變數的值。如果開啟devtools，程式碼執行將在｛@debug…｝語句的位置暫停。 它接受單個變數名。 可以使用的修改器有： PreventDefault：呼叫事件。preventDefault（）在程式執行之前 StopPropagation：呼叫事件。stopPropagation（）以防止事件到達下一個標記 被動：提高了觸控/滾輪事件的捲動效能（Svelte將在適當的情況下自動新增） 捕獲：表示其程式是在捕獲階段觸發的，而不是通過冒泡觸發的 一次：程式執行一次後刪除自身 可以連線修飾符，例如：單擊|once|capture={…}。 如果未為使用的on:命令事件指定特定值，則意味著元件將負責轉發事件，這意味著元件的使用者可以監聽事件。

<script>
	let counter = 0;
	function increment() {
		counter = counter + 1;
	}
	function track(event) {
		trackEvent(event)
	}
</script>
<button on:click={increment} on:click={track}>Click me!</button>

以上就是Svelte巢狀元件preventDefault構建Web應用的詳細內容，更多關於Svelte preventDefault構建Web的資料請關注it145.com其它相關文章！