云间连下榻，
天上接行杯。

最近有个需求需要实现自定义首页布局，需要将屏幕按照 6 列 4 行进行等分成多个格子，然后将组件拖拽对应格子进行渲染展示。

示例

随着前端发展的越来越工程化，越来越繁琐复杂，前端能做的事情越来越多，最近几年 前端基建 也是越来越火热。但是实际上很多公司并不注重前端，更别谈能会有人来做基建。对于没有基建的前端，我们能做些什么呢？

我个人推荐可以从工具、CLI 入手，因为这些往往是独立，不会像推规范、搞数据埋点、日志上报、整 BFF 那样对团队或者现有代码有入侵性。即便在自己空闲时间也能弄一弄，弄得好可以在团队推广使用，弄得不好也无所谓，可以当作练手提升自己能力。

一句话总结就是，坑是真的多，填完一个坑等着你的就是下个坑。

事情是这样的，我做了一个在线壁纸小程序，壁纸预览部分为了更好时使用体验，增加了类似于那些短视频上滑下滑快速切换壁纸预览的功能，为了避免重复造轮子直接使用了 swiper 来时实现滑动快速切换壁纸。

瀑布流算是比较常见的布局了，一个般常见纵向瀑布流的交互，当我们滚动到底的时候加载下一页的数据追加到上去。因为一次加载的数据量不是很多，页面操作是也不会有太大的性能消耗。但是如果当你一直往下滚动加载，加载几十页的时候，就会开始感觉不那么流畅的，这是因为虽然每次操作的很少，但是页面的 DOM 越来越多，内存占用也会增大，而且发生重排重绘时候浏览器计算量耗时也会增大，就导致了慢慢不能那么流畅了。这个时候可以选择结合虚拟列表方式使用，虚拟列表本身就是用来解决超长列表时的处理方案。

在纯静态网站里，有时候会动态更新某个区域往会选择 Pjax（swup、barba.js）去处理，他们都是使用 ajax 和 pushState 通过真正的永久链接，页面标题和后退按钮提供快速浏览体验。

之前一波搞没了免费额度，这次直接要回收以前开通免费版的资源了。搞成基础套餐+按量计费模式，直接最低39.9块一个月。用不起了，腾讯是真TM的狗。

因为以前使用的评论插件存在很多 bug 和漏洞，但是也没啥人用，一直没有去修改，最近空闲时间比较多，所以准备对之前插件进行重构一番。原评论插件是使用原生 JS 编写 WebComponents 组件，感觉结构维护起来挺费力的(自己太菜)，决定使用 Vue3 构建 WebComponents 。

有时候想写一个无关框架组件，又不想用原生或者 Jquery 那套去写，而且还要避免样式冲突，用 Web Components 去做刚觉就挺合适的。但是现在 Web Components 使用起来还是不够灵活，很多地方还是不太方便的，如果能和 MVVM 搭配使用就好了。早在之前 Angular 就支持将组件构建成 Web Components，Vue3 3.2+ 开始终于支持将组建构建成 Web Components 了。正好最近想重构下评论插件，于是上手试了试。