[学习交流] 【西安校区】谈谈新的前端框架 Svelte 和现代前端框架的特点

官方网址
https://svelte.dev/

这个框架还是非常不错的，轻量级，代码量少，没有Virtual DOM高性能，涵盖了非常多的优点。

先来说说轻量级，通过CSS缩小后有约17kb的大小，gzip后更是小到了4kb，可以说是比3大前端框架都小。
代码量少，Svelte直接免去了类和对象的编写，使用Svelte写代码省去30%-40%的代码量。

Svelte 的代码长什么样子呢？

[Java] 纯文本查看 复制代码

<script>
	let count = 0;
	$: doubled = count * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

有过前端开发经验的朋友第一眼看到这段代码肯定会问，这个 $: 是什么玩意？

其实这个就是相当于Vue中的computed的意思，React的useMemo() 的意思。是不是看上去很简洁？

Svelte的编译器会把这一段代码编译成以下代码，然后再通过webpack编译打包。
细心对比编译前后的代码，我们可以看出Svelte设计的巧妙之处。

import 语句，类声明和export语句是Svelte编译器之后加上的，节约了你去写这些代码的时间。同时因为没有类或对象的编写过程，节约了写this关键字。
编译好的create_fragment方法是用来生成DOM目录树的，它是直接将源代码的html模板编译成了代码去实现响应式变化，最终这个新生成的节点会直接使用到真DOM上，这就是它宣传的没有Virtual DOM和它高性能的原因（因为有了Virtual DOM，还要做Diff之类的算法去做比对）。
Svelte框架在webpack打包前就编译好了纯原生JS库就可以执行代码，它的运行库不用再对类似于计算属性的内容再做额外的库和运算，所以它编译出来的包很小，执行效率也更高。也正因如此，Svelte的打包不再区分dev和prod模式，保证了生产环境和最终产品包的一致性。

[Java] 纯文本查看 复制代码

/* App.svelte generated by Svelte v3.22.2 */
import {
	SvelteComponent,
	append,
	detach,
	element,
	init,
	insert,
	listen,
	noop,
	safe_not_equal,
	set_data,
	space,
	text
} from "svelte/internal";

function create_fragment(ctx) {
	let button;
	let t0;
	let t1;
	let t2;
	let t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "";
	let t3;
	let t4;
	let p;
	let t5;
	let t6;
	let t7;
	let dispose;

	return {
		c() {
			button = element("button");
			t0 = text("Clicked ");
			t1 = text(/*count*/ ctx[0]);
			t2 = space();
			t3 = text(t3_value);
			t4 = space();
			p = element("p");
			t5 = text(/*count*/ ctx[0]);
			t6 = text(" doubled is ");
			t7 = text(/*doubled*/ ctx[1]);
		},
		m(target, anchor, remount) {
			insert(target, button, anchor);
			append(button, t0);
			append(button, t1);
			append(button, t2);
			append(button, t3);
			insert(target, t4, anchor);
			insert(target, p, anchor);
			append(p, t5);
			append(p, t6);
			append(p, t7);
			if (remount) dispose();
			dispose = listen(button, "click", /*handleClick*/ ctx[2]);
		},
		p(ctx, [dirty]) {
			if (dirty & /*count*/ 1) set_data(t1, /*count*/ ctx[0]);
			if (dirty & /*count*/ 1 && t3_value !== (t3_value = (/*count*/ ctx[0] === 1 ? "time" : "times") + "")) set_data(t3, t3_value);
			if (dirty & /*count*/ 1) set_data(t5, /*count*/ ctx[0]);
			if (dirty & /*doubled*/ 2) set_data(t7, /*doubled*/ ctx[1]);
		},
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(button);
			if (detaching) detach(t4);
			if (detaching) detach(p);
			dispose();
		}
	};
}

function instance($$self, $$props, $$invalidate) {
	let count = 0;

	function handleClick() {
		$$invalidate(0, count += 1);
	}

	let doubled;

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*count*/ 1) {
			$: $$invalidate(1, doubled = count * 2);
		}
	};

	return [count, doubled, handleClick];
}

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, instance, create_fragment, safe_not_equal, {});
	}
}

export default App;

Svelte还在发展，目前的缺点也很明显，就是官方还不支持TypeScript，官方还不支持路由，扩展库不多。

对于这种结构编译型的框架，我觉得会是前端框架发展的方向。
因为要做代码结构转换，多支持TypeScript会比其他3大框架的工作量多得多，我想这也是为什么官方迟迟没有退出的原因。

现代前端框架发展至今，本文我还想总结出他们共性。

转自CSDN：https://blog.csdn.net/weixin_36330664/article/details/106022804

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【西安校区】谈谈新的前端框架 Svelte 和现代前端框架的特点

2 个回复