⭐️ Svelte 特训第一天

2021-04-24

想要上手一门新技术,光看文档介绍还是不够的,还是得动手操作才能加深记忆。这时我想起了我在 2018 年发起的 Kico Tools 项目,这是个集合时钟、秒表和随机数的小工具。当时这个是采用原生 JS 编写的,且有很多地方操作了 DOM 的内容,因此导致该项目写起来非常复杂,到后期就断更了。

随着我对 Svelte 这个框架的逐渐认识,我发现它最终生成的代码非常简单,很类似我自己用原生 JS 来操作 DOM,在 React 和 Vue 大统前端开发的当下,它显得非常“异类”,因为它没有使用到虚拟 DOM 的概念。

虚拟 DOM,其实就是用对象伪造了一个结构树,通过框架独有的 DIFF 算法,比对对象修改前后的差异,再生成更新真实 DOM 的过程。

我花了差不多 2.5 小时,成功把 Kico Tools 项目的大多数核心功能全部复现,这也足以证明了 Svelte 的实力所在。期间主要遇到一个 Function called outside component initialization 的错误,其实是因为我其中一个想要加入生命周期函数 onMount 的组件顶部声明是 <script context="module">,看了下文档具体说明,得出的结论是 module 在被引入的时候只会运行一次,且不存在销毁的过程,类似公用库的概念。

第二个问题则是关于数组的刷新,使用 pushsplice 这种方式无法触发 DOM 刷新,官方文档已经说明了,需要使用 [...arr] 或者 push 之后重新用 = 赋值的办法解决。

配乐 多云 开心
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君