学习的乐趣

前些日子，我把项目仓库从“单项目”升级为“单仓库多项目”模式（monorepo）。

因为原本开发的都是PC端页面，所以被我转移到apps/web中去了，并且在apps/mobile项目中新创建了一个vue项目。

这个项目就主要存放移动端页面。

并且为了更好的开发，也是用上了真机调试，其实就是用电脑控制手机。

因为手机无法打开浏览器开发者工具。

现在成功将第一个组件（CaInkTree）转移到公共包中去了。

这个组件就是一个背景组件，通过在canvas画布上绘制分叉树生长动画，为单调的网页背景增加一点趣味。

其实我是想模拟梅花树的（从组件名中的InkTree就能看出来），但实际效果根本让人看不出来这是梅花树。

除了以上这些，令我高兴的是，又学到了一些小技巧。

之前为了让这个组件能够在窗口变化时响应式更新，就直接监听了resize事件，当该事件发生时，就将画布清空，重新绘制。

但是在移动端，因为手机浏览器的导航条也会导致轻微的高度变化，这就触发了resize事件，导致实际效果是：手机每次滚动页面，画布就会被清空重绘。

解决方法是检查当前与上次的窗口的尺寸变化，如果只改变了高度，并且变化极小，就不清空重绘。

并且还添加了防抖，200毫秒内只会触发一次尺寸检查。

最后一点是，因为手机和电脑的尺寸不一样，如果用电脑端页面的树的粗细放到手机上，那么手机上的动画就会很模糊，因此这里针对dpi缩放进行了调整，现在无论是手机还是电脑，二叉树生长动画都会一样清晰。

学到了新的技巧和开发时注意的情况，如果我不进行移动端开发，那么我肯定永远不会注意到这一点。

这就是学习的乐趣啊，同时这也是我选择编程的原因，因为计算机总是会实时给你反馈。

但缺点是“不行就是不行”，就先前天，我在升级项目仓库到monorepo结构时，可把我折腾的要命，无论怎么配置都无法消除报错。

但是现在我已经逐渐理解了一些关于monorepo的知识，现在让我重新创建一个monorepo结构的项目仓库，虽然我还是需要问ai（因为记不住详细的配置），但是我已经大概理解ai做的每一步是什么作用，能及时发现ai的错误。