谈谈新的前端框架 Svelte 和现代前端框架的特点

69 阅读 0 评论 46 点赞

我是靠谱客的博主香蕉高跟鞋，最近开发中收集的这篇文章主要介绍谈谈新的前端框架 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] 纯文本查看 复制代码

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

/* 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