这周看了什么 [1]

虚拟滚动，我刚工作的时候也做过类似的，无非就是计算项目高度，然后预留出前后的空间，再去计算当前要显示的部分。

但有一点我到现在都无法理解，那就是项目高度不确定的情况，或者说无法接受吧，因为大家在处理这种情况时，会先“猜测”一个高度，然后用上去，等真正的项目渲染后，再固定他的真实高度我能理解这种解法，但这也意味着滚动条的长度不是真实的，用的时候长度一直在变，越滚越多，这很诡异好吧。。。

算是个好东西，也是我一直在项目中推进的，在 AI 时代就该好好用这种 DSL，灵活可变，教会他们规范，就能直接生成界面，省去很多重复性工作。

但很明显，type 对应的基础组件还是要自己开发的，组件如何保持灵活性，如何保证“能复用的场景多过重新开发的场景”是个问题，我前前公司就深陷这个泥潭，运营的点子比基础组件多，每次做新营销活动都得开发组写一套新的组件，配置比重写更麻烦。

这个我暂时不理解他的使用场景，但就 TUI 来说，我自己也研究过一些。

一句话，比想象中麻烦，为了“自动在合适的位置显示合适的字符”，要做的处理有很多，你以为你在开发一个字符组件库，但你在开发的实际上是浏览器。

从我学到的部分讲起吧，相关的概念有组件、布局、渲染、事件等。

万物皆组件#

能看到的输入框、卡片、列表都是组件，组件有自己的状态，比如 Label 的文本内容、字色，Input 的值等。

有自己的尺寸、位置信息，同时也要能从上级接受配置。

能管理自己的渲染方式，也就是如何将状态绘制到“缓冲区”中。

布局也是个组件，但比较特殊，他的职责不是渲染自己，而是计算他子组件的尺寸、位置信息，可以理解成 CSS 中的 display 属性。

所以组件设计上要支持嵌套。

不能直接操作终端，因为一边写入一边显示，会导致闪烁，所以需要缓冲区，将组件的渲染结果写入缓冲区，再一次性显示。

可以理解成 console.log，多次频繁打印和一次打印所有内容的效率是不同的。

这里的缓冲区也有讲究，应该创建两个缓冲区，一个用于当前渲染，另一个用于下一帧渲染，这样在下一帧渲染时，可以立即将当前帧的缓冲区内容显示到终端，而不用等待当前帧渲染完成。

再进一步，可以遍历组件树，判断哪些组件需要更新，哪些组件不需要更新，再差分写入到缓冲区，以提高效率。

做着做着就会发现，这不就是重写了一个 React、Vue 的核心吗？其实也没错，参考 Ink，他就借助了 React 核心的能力，重新实现一个 Renderer。

一个仿 Photoshop 的图像编辑器，PS 还是很好用很全面的，但为了改一两个地方下一个 PS 属实不值得。

我之前用的是 Photopea。

两者在功能上没啥区别了，前者开源后者闭源，后者靠广告和云存储赚钱，也没啥大碍。

一个小巧的页面头部“动画”库，我不知道该怎么描述他，点进去看效果就明白了。

本质就是监听 wheel、scroll 事件判断方向，确定头部是要固定还是隐藏，但他容差检查做的不错，一些小幅度滚动不会导致头部变化，用着挺舒服。