Svelte

Svelte用于構(gòu)建快速Web應用程序。 Svelte與React和Vue一樣，致力于讓輕松構(gòu)建靈活、交互式的用戶界面。 不同之處在于，Svelte在構(gòu)建時將代碼轉(zhuǎn)換為更好的JavaScript，而不是在運行時解釋和執(zhí)行代碼。 這意味著不必支付框架本身的性能成本，并且在首次加載時不會有額外的性能損失。 可以使用Svelte編寫整個應用程序，也可以使用Svlte逐步重構(gòu)現(xiàn)有代碼；也可以只輸出一個獨立的組件（不強制附加框架本身），并在任何框架中使用它。

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

在大括號中，我們可以編寫任意JavaScript。 然后可以嘗試將名稱更改為name。toUpperCase（）以使問候更加強烈。 注意：看起來正在創(chuàng)建一個全局變量，但實際上，name仍然限于組件的局部變量，也就是說，無法訪問全局對象（Window）中組件中聲明的name變量。

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

樣式

對于特定的函數(shù)，Svelte仍然有相應的運行時代碼，例如組件邏輯、if/else切換邏輯、循環(huán)邏輯等。但是在編譯時，如果沒有使用函數(shù)，則相應的代碼根本不會編譯成結(jié)果。就像Babel中未使用的函數(shù)的助手不會被引入一樣，就像使用lodash或RxJS時，只有相應的函數(shù)被選擇性地引入一樣。

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

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

（1） 盡管簡單演示中的代碼量確實很小，但同一組件模板通過這種隱式操作生成的代碼量將大于vdom渲染函數(shù)的代碼量，并且多個組件中會有大量重復代碼（盡管gzip可以緩解這個問題，但解析和求值是不可避免的）。 項目中的組件越多，代碼量的差異就越小。 同時，它并不是廣告中所說的“沒有運行時”，而是根據(jù)代碼按需導入。 使用的函數(shù)越多，Svelte需要包含的運行時代碼就越多。很難說它在實際生產(chǎn)項目中會有多大的規(guī)模優(yōu)勢。

（2） Svelte在大型應用程序中的性能仍有待觀察，尤其是在大量動態(tài)內(nèi)容和嵌套組件的情況下。它的更新策略決定了它還需要一個類似于React的shouldComponentUpdate的機制來防止過度更新。

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

嵌套組件

將整個應用程序放在一個組件中是不切實際的。相反，我們可以從其他文件導入組件，并將其作為包含元素包含。 請注意，即使Nested Svelte具有＜p＞元素，App的Svelte風格也不受影響。 還要注意，組件名稱Nested是大寫的。此約定用于使我們能夠區(qū)分用戶定義的組件和常規(guī)HTML標記。

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

前端

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

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

Svelte在將{@html…}中的表達式插入DOM之前不會清理它們。換言之，如果使用此功能，則必須手動從不受信任的源中轉(zhuǎn)義HTML，否則可能會使用戶暴露于XSS攻擊。

一個App實例

還需要配置文本編輯器。如果正在使用VS代碼，請安裝Svelte擴展。否則，請按照本指南中的說明配置文本編輯器，以便。svelte文件與相同。html來突出顯示語法。 然后，一旦項目建立，就可以輕松地使用Svelte組件。編譯器將每個組件轉(zhuǎn)換為一個常規(guī)JavaScript類-只需導入并使用new來實例化：

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

有時，檢查流經(jīng)應用程序的數(shù)據(jù)是有用的。 一種解決方案是使用控制臺。標記內(nèi)的log（…）。但是，如果要暫停執(zhí)行，可以將｛@debug…｝標記與要檢查的值的逗號分隔列表一起使用：

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

筆記

可以在組件中使用HTML注釋。 以svelte ignore開頭的內(nèi)容將被注釋掉，直到在注釋結(jié)束標記處結(jié)束。一般來說，帶注釋的內(nèi)容包含可訪問性（a11y，一些有助于提高可訪問性的信息）信息，因此請僅在有充分理由時使用。

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

如果鍵是一個表達式，它必須是唯一的，以標識列表中的每個列表項，以便Svelte可以更改列表中任何位置的數(shù)據(jù)，而不是在末尾添加或刪除數(shù)據(jù)。密鑰可以是任何對象，但建議使用字符串和數(shù)字，因為它們允許在對象本身更改時保留標識。

{#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…｝一起使用以替換控制臺。日志（…）。每當指定變量的值發(fā)生變化時，它都會記錄這些變量的值。如果打開devtools，代碼執(zhí)行將在｛@debug…｝語句的位置暫停。 它接受單個變量名。 可以使用的修改器有： PreventDefault：調(diào)用事件。preventDefault（）在程序運行之前 StopPropagation：調(diào)用事件。stopPropagation（）以防止事件到達下一個標記 被動：提高了觸摸/滾輪事件的滾動性能（Svelte將在適當?shù)那闆r下自動添加） 捕獲：表示其程序是在捕獲階段觸發(fā)的，而不是通過冒泡觸發(fā)的 一次：程序運行一次后刪除自身 可以連接修飾符，例如：單擊|once|capture={…}。 如果未為使用的on:命令事件指定特定值，則意味著組件將負責轉(zhuǎn)發(fā)事件，這意味著組件的用戶可以監(jiān)聽事件。

<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構(gòu)建Web應用的詳細內(nèi)容，更多關(guān)于Svelte preventDefault構(gòu)建Web的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論