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 之后重新用 = 赋值的办法解决。

The Entertainer

The Entertainer

Leandro Aconcha
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

近期评论

鲍小螺: 前辈多多指教!ahu: 后生可畏寻梦xunm: 真不错,板子很好看。timochan: 太惨了( ,更新暴毙,如果恢复没成功,数据也 dump 不出来鲍小螺: 在这部分对话中,广树和保罗继续讨论生活的不同方面。保罗提到了技术更新和国内的优秀 IT 技术。广树解释了在国内积累的经验如何在日本产生穿越的感觉,并表达了对于日本生活节奏的喜爱。他还提到了医疗水平的差异和对于生活方式的感受。保罗表示,通过动漫和现实的对比,艺术来源于现实,日本生活的确有着独特之处。他们讨论了国内的生活节奏和就医等方面的压力,以及个人选择的自由。最后,他们也谈到了不结婚不买房的选择和对于房价的困扰。鲍小螺: 该对话进一步讨论了房地产和税收的问题。保罗提到了国内的房地产税和增值税以及日本的固定资产税。广树解释了日本房地产税的收取方式,以及房产税对于国内房产的影响。他认为,与国内相比,日本的房子质量和服务更好。保罗提出疑问,为什么自己拥有的地也要交税。广树解释了类似增值税的原理,并指出在日本拥有房产是稳定安全的。最后,保罗表示从广树的角度来看,情况确实是如此。鲍小螺: 这篇文章的聊天记录也尝试过用 GPT 总结,结果并不是太好,不知道是不是 Prompt 的问题,实际出来的内容过于简练了,于是又耗费了半小时写完,呼~
奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君