去年从前端同事口中知道了 Svelte，竟然可以不用 VirtualDOM 就能精准地更新 DOM 树，一直很好奇其原理。
最近闲着没事什么事，就去研究了一下 Svelte 的源码，但因为 Svelte 的项目代码太庞大，感觉抓不到重点。最后找到了一个和 Svelte 类似，但是代码量要小很多的项目 MalinaJS，花了几天时间把核心部分的代码看懂了，感觉挺有成就感的哈哈哈。
最后出于学习的目的模仿 MalinaJS 实现了一个小的 Demo 。代码量很小，只有几百行代码，如果你也感兴趣的话，可以看看。
项目地址： https://github.com/ksco/slim
非常喜欢的一句话送给大家：
"What I cannot create, I do not understand." -- Richard Feynman
 |
1
Adalwin Mar 25, 2021
不错！有空看看（并交流交流）
谢谢分享！ |
 |
2
40EaE5uJO3Xt1VVa Mar 25, 2021
厉害厉害
|
 |
3
JinTianYi456 Mar 27, 2021
完全不懂，"用 VirtualDOM 就能精准地更新 DOM 树" "不用 VirtualDOM 就能精准地更新 DOM 树"，有链接让我来个入门吗？
|
 |
4
lifetimeporn Mar 27, 2021
borrowed lots of code from it
|
 |
5
ksco OP @JinTianYi456
1. 用 VirtualDOM 就能精准地更新 DOM 树。这个可以去搜一下 VirtualDOM 的原理 2. 不用 VirtualDOM 就能精准地更新 DOM 树。这个可以看看 @djyde 的这篇文章： https://lutaonan.com/blog/svelte/ |
 |
6
3dwelcome Mar 27, 2021  1
就是一个前端语法编译器，之所以不需要虚拟 DOM，是改成了命令反射式语法。
举个不恰当的例子，虚拟 DOM 好比是 GC，会自动收集相关依赖。 而 Svelte 好比是 COM 引用计数，用之前变量必须写上$ :语法，来告诉编译器，这个变量和别的不一样，有事件反射关联性，是需要特殊引用处理的。 我下一步工作也是类似的方面，把特制 HTML 语法编译到前端，只不过编译和逻辑处理代码都是 C++。webasm 只是把语言门槛铺平，却没有提供任何实际操作 DOM 的接口。 |
 |
7
cereschen Mar 27, 2021
写编译器就是脏活累活 svelte 到现在 数组对象的操作还不能触发重渲染
|
Select Language