Svelte偵錯模式js級別差異和細化後的體積差異詳解

2022-12-25 14:02:13

js級別的差異

主要來自兩個方面：hook系統（不考慮類）和ecma-ast差異hook系統。勾點系統的api更多地用於純函陣列件注入狀態和生命週期。在這兩個方面，Svelte提供的解決方案是不同的。由於預執行編譯，Svelte編譯器掃描所有與UI相關的狀態並注入黑魔法，使得狀態的使用與變數宣告和賦值一樣簡單。基本上，開發人員不需要太在意所謂的副作用；因此，一些勾點介面在Svelte框架上是冗餘的。然而，考慮到大量的勾點介面，我們選擇了內建的svelte勾點來簡化轉換過程中的轉換邏輯。SVelte勾點是一組基於SVelte的勾點介面，通過對react勾點進行基準測試來實現，這些勾點在使用中基本相同。

<script>
	import Nested from './Nested.svelte';
</script>
<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>
<p>These styles...</p>
<Nested/>

ecma ast差異

ecma ast difference babel提供的解析是基於estree的，但同時一些型別也在此基礎上進行了改進。有關具體差異，請參閱此處的babel解析器[1]。細化的資料型別有助於我們進行轉換推斷，因此我們沒有使用babel來提供estree外掛，並且在轉換之後，ast再次被平滑。 CSS轉換比上述兩部分的轉換簡單得多。React樣式是標準css，Svelte樣式也是標準css。但是，它將增加一定的編譯能力。可以理解，它是標準css的超集，可以直接使用。然而，為了平滑jsx和Svelte html在自定義元件的類選擇器中的差異，我們仍然在編譯階段進行了一些轉換，這裡不再展開。

<script>
	let count = 0;
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

細化後的體積差異

<script>
	import { quintOut } from 'svelte/easing';
	import { fade, draw, fly } from 'svelte/transition';
	import { expand } from './custom-transitions.js';
	import { inner, outer } from './shape.js';
	let visible = true;
</script>
<style>
	svg {
		width: 100%;
		height: 100%;
	}
	path {
		fill: white;
		opacity: 1;
	}
	label {
		position: absolute;
		top: 1em;
		left: 1em;
	}
	.centered {
		font-size: 20vw;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-family: 'Overpass';
		letter-spacing: 0.12em;
		color: #676778;
		font-weight: 400;
	}
	.centered span {
		will-change: filter;
	}
</style>
{#if visible}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
		<g out:fade="{{duration: 200}}" opacity=0.2>
			<path
				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
				d={outer}
			/>
			<path
				in:draw="{{duration: 1000}}"
				style="stroke:#ff3e00; stroke-width: 1.5"
				d={inner}
			/>
		</g>
	</svg>
	<div class="centered" out:fly="{{y: -20, duration: 800}}">
		{#each 'SVELTE' as char, i}
			<span
				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
			>{char}</span>
		{/each}
	</div>
{/if}
<label>
	<input type="checkbox" bind:checked={visible}>
	toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="external nofollow"  rel="stylesheet">

不可能100%準確地將執行時jsx編譯成靜態html，弱型別語言的變數跟蹤不可靠，非本地邏輯控制語法不能在編譯器中逐一列舉；目前，在轉換工作中仍然存在許多與編譯相關的問題，但這些問題可以通過一些外掛來補充並逐步改進。大型專案包裝量的現狀不容樂觀。 Svelte可以通過預執行編譯按需打包整個框架來有效地減少包容量，但編譯產品本身沒有優勢。頁面的UI互動越複雜，編譯產品就越大。此外，對框架的依賴程度越高，整體包裝量的優勢就會消失；此外，我們的轉換器為編譯增加了一定的複雜性，以平滑差異，因此仍有很大的空間來優化編譯產品的數量。沒有效能，沒有前端。我們仍然缺乏關於效能的資料，但我們也從一些第三方文章中瞭解到，Svelte的整體效能並不是瓶頸。理論上，通過編譯實現資料驅動的DOM是簡單而有效的。理論上，脫離虛擬DOM也會提高記憶體效能；但是，我們將單獨檢視效能。預執行編譯的思想不僅適用於框架，也適用於元件，這也會帶來很多好處。

偵錯模式

它可以與｛@debug…｝一起使用以替換控制檯。log（…）。每當指定變數的值發生變化時，它都會記錄這些變數的值。如果開啟devtools，程式碼執行將在｛@debug…｝語句的位置暫停。它接受單個變數名：

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

on:事件名

可以使用的修改器有： PreventDefault：呼叫事件。preventDefault（）在程式執行之前 StopPropagation：呼叫事件StopProparation（）以防止事件到達下一個標記被動：提高了觸控/滾輪事件的捲動效能（Svelte將在適當的情況下自動新增） capture：表示其程式是在捕獲階段觸發的，而不是通過冒泡一次：程式執行一次後刪除自身可以連線修飾符，例如：單擊|once|capture={…}。如果未為使用的on:命令事件指定特定值，則意味著元件將負責轉發事件，這意味著元件的使用者可以監聽事件。

<form on:submit|preventDefault={handleSubmit}>
</form>

svelte:options

<svelte:options>標記為元件提供編譯器選項。有關詳細資訊，請參閱。選項包括： Immutable={true}-從不使用變數資料，因此編譯器可以很容易地檢查等式以確定值是否已更改。不可變=｛false｝-預設選項。Svelte在處理可變物件值更改時趨於保守。 Accessors＝｛true｝-向元件的屬性新增getter和setter。存取器=｛false｝-預設值。名稱空間=“…”-讓元件使用名稱空間。最常見的是“svg”。 Tag=“…”-將此元件編譯為自定義標記時使用的名稱。

<svelte:options tag="my-custom-element"/>

此onMount函數用作回撥，在元件安裝到DOM後立即執行。它必須在元件初始化期間呼叫（但不一定在元件內部；可以從外部模組呼叫）。 OnMount不在內部執行。

<script>
	import { onMount } from 'svelte';
	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);
		return () => clearInterval(interval);
	});
</script>

setContext

使用指定的鍵將任何上下文物件與當前元件相關聯。然後，通過getContext函數將上下文應用於元件的子級（包括帶有槽的內容）。與生命週期函數一樣，它必須在元件初始化期間呼叫。

<script>
	import { setContext } from 'svelte';
	setContext('answer', 42);
</script>

以上就是Svelte偵錯模式js級別差異和細化後的體積差異詳解的詳細內容，更多關於Svelte偵錯模式js級別差異的資料請關注it145.com其它相關文章！