Svelte调试模式js级别差异和细化后的体积差异详解

目录

• js级别的差异
• ecma ast差异
• 细化后的体积差异
• 调试模式
• on:事件名
• svelte:options
• setContext

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级别差异的资料请关注我们其它相关文章！