Svelte

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

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

在大括號(hào)中，我們可以編寫(xiě)任意JavaScript。 然后可以嘗試將名稱(chēng)更改為name。toUpperCase（）以使問(wèn)候更加強(qiáng)烈。 注意：看起來(lái)正在創(chuàng)建一個(gè)全局變量，但實(shí)際上，name仍然限于組件的局部變量，也就是說(shuō)，無(wú)法訪(fǎng)問(wèn)全局對(duì)象（Window）中組件中聲明的name變量。

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

樣式

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

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

基于這兩個(gè)特性，Svelte應(yīng)用程序的最終代碼量可能非常小。例如，它的TodoMVC min+gzip僅晚了3kb。 然而，Svelte并非沒(méi)有潛在問(wèn)題：

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

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

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

嵌套組件

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

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

前端

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

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

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

一個(gè)App實(shí)例

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

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

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

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

筆記

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

<!-- 這是一句注釋?zhuān)?-->
<h2>Hello world</h2>

如果鍵是一個(gè)表達(dá)式，它必須是唯一的，以標(biāo)識(shí)列表中的每個(gè)列表項(xiàng)，以便Svelte可以更改列表中任何位置的數(shù)據(jù)，而不是在末尾添加或刪除數(shù)據(jù)。密鑰可以是任何對(duì)象，但建議使用字符串和數(shù)字，因?yàn)樗鼈冊(cè)试S在對(duì)象本身更改時(shí)保留標(biāo)識(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…｝一起使用以替換控制臺(tái)。日志（…）。每當(dāng)指定變量的值發(fā)生變化時(shí)，它都會(huì)記錄這些變量的值。如果打開(kāi)devtools，代碼執(zhí)行將在｛@debug…｝語(yǔ)句的位置暫停。 它接受單個(gè)變量名。 可以使用的修改器有： PreventDefault：調(diào)用事件。preventDefault（）在程序運(yùn)行之前 StopPropagation：調(diào)用事件。stopPropagation（）以防止事件到達(dá)下一個(gè)標(biāo)記 被動(dòng)：提高了觸摸/滾輪事件的滾動(dòng)性能（Svelte將在適當(dāng)?shù)那闆r下自動(dòng)添加） 捕獲：表示其程序是在捕獲階段觸發(fā)的，而不是通過(guò)冒泡觸發(fā)的 一次：程序運(yùn)行一次后刪除自身 可以連接修飾符，例如：?jiǎn)螕魘once|capture={…}。 如果未為使用的on:命令事件指定特定值，則意味著組件將負(fù)責(zé)轉(zhuǎn)發(fā)事件，這意味著組件的用戶(hù)可以監(jiān)聽(tīng)事件。

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