谈谈新的前端框架 Svelte 和现代前端框架的特点
官方网址
https://svelte.dev/
这个框架还是非常不错的，轻量级，代码量少，没有Virtual DOM高性能，涵盖了非常多的优点。
先来说说轻量级，通过CSS缩小后有约17kb的大小，gzip后更是小到了4kb，可以说是比3大前端框架都小。
代码量少，Svelte直接免去了类和对象的编写，使用Svelte写代码省去30%-40%的代码量。
Svelte 的代码长什么样子呢？
let count = 0;
$: doubled = count * 2;
function handleClick() {
count += 1;
}
有过前端开发经验的朋友第一眼看到这段代码肯定会问，这个 $: 是什么玩意？
其实这个就是相当于Vue中的computed的意思，React的useMemo() 的意思。是不是看上去很简洁？
Svelte的编译器会把这一段代码编译成以下代码，然后再通过webpack编译打包。
细心对比编译前后的代码，我们可以看出Svelte设计的巧妙之处。
/* 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大框架的工作量多得多，我想这也是为什么官方迟迟没有退出的原因。
现代前端框架发展至今，本文我还想总结出他们共性。
| 特性 | 说明 | React | Vue | Svelte | Angular |
|---|---|---|---|---|---|
| 计算属性 | 在响应式设计中，需要某个变量的只读值，是通过另外的几个变量和逻辑响应式得出的 | 支持 useMemo() |
支持 computed |
支持 $: |
支持 get Var(){} |
| 变量改变检测 | 代码中的某个响应式变量的值改变了，能够回调某个函数方法实现逻辑 | 支持 useCallback |
支持 watch |
支持 $: |
支持 ngOnChanges |
| 自动css scope | css的作用域只针对当前的组件生效，避免相同的css名字相互影响 | 不支持 | 支持 | 支持 | 支持 |
| 组件生命周期 | 在生成，更新，销毁等情况可以有callback函数实现逻辑 | 支持 | 支持 | 支持 | 支持 |
| 官方SPA路由 | 单页APP，url改变不刷新页面 | 支持 | 支持 | 不支持 | 支持 |
| 官方TypeScript支持 | TypeScript可以大大提高代码质量降低错误 | 支持 | 支持 | 不支持 | 支持 |
| 自定义Directive | 指令集的概念最先出现在Angular，目的是为所有页面元素添加全局自定义属性 | 不支持 | 支持 | 支持 | 支持 |
| Pipe | Pipe可以对字符串数字在打印魔板中进行数据过来和美化 | 不支持 | 支持 | 不支持 | 支持 |
| 输入信息数据双向绑定 | 主要用于表单提交和更新 | 不支持 | 支持 v-model |
支持 bind:value |
支持 ngModel |
calidan-x
原创文章 4获赞 4访问量 139
关注
私信
展开阅读全文
作者：calidan-x
