深入虚拟列表、大屏图表、短链系统设计、推理互动小游戏

theme: v-green

今日主理人｜下午茶

本期每日掘金由 战场小包 负责制作。如有投稿文章，请私信 👉 战场小包

酱酱们的下午茶全新改版，欢迎大家多提宝贵意见！

本文字数 1700+，阅读时间大约需要 6 分钟。

【掘金酱的下午茶】亮点：

大屏图表，ECharts 从“熟练”到入门

深入【虚拟列表】动态高度、缓冲、异步加载

基于 gitlab ci_cd 实现代码质量管理

听说你学过架构设计？来，弄个短链系统

Android 初代 K-V 存储框架 SharedPreferences，旧时代的余晖

一天速写推理互动小游戏：《只有十六分钟》

……

筛选规则：文章发布时间在本期「掘金酱的下午茶」发布时间的 1-3 天内，且符合社区推荐标准，也会同步发布在掘金相关技术社群。

每日干货｜下午茶

主理人们会对近期（1-3 天）社区深度技术好文进行挖掘和筛选，优质的技术文章有机会出现在下方列表，排名不分先后。

『前端』

大屏图表，ECharts 从“熟练”到入门

阅读本文，你将

了解 配置驱动 的思想

理解 Echarts 基本概念

了解 graphic 和 动画基本玩法。

了解 Echarts 基底组件的封装的思路

保姆级 Vue3+Vite 项目实战多布局（上）

本文我们终于要开始写代码了，但其实依旧还是在为项目做准备，因为此文的核心是项目的多布局实战，先把页面布局搭建好，随后再开始写项目，这也是项目开发中必不可少的一环，当然重要的还是写代码过程中的细节以及小技巧，新同学可以跟着码一遍，老同学可以快速阅读一遍看有没有什么用得上的实战小技巧。

深入【虚拟列表】动态高度、缓冲、异步加载… Vue 实现

前文中我们根据 “无论滚动到什么位置，浏览器只需要渲染可见区域内的节点” 的思路实现了虚拟列表解决了长列表问题，但在一些细节和特殊情况的处理上还是有所欠缺，本文研究这些问题，并对原版的虚拟列表做出优化 🚀

将 Web Components 组件打包发布

这篇文章我们将下拉组件运用起来。虽然下拉组件我们的确已经封装完成，但是我们如何将它应用我们的实战项目中了？就像 Element UI、Ant Design 那样。这并不是一个难事。你只需要将它作为一个 npm 包发布出去即可，那这篇文章就是带你将我们的下拉组件再抽象，可作为一个独立的组件包发布

使用 Next.js 搭建 Monorepo 组件库文档

阅读本文你将：

使用 pnpm 搭建一个 Monorepo 组件库

使用 Next.js 开发一个组件库文档

changesets 来管理包的 version 和生成 changelog

使用 vercel 部署在线文档

『后端』

基于 gitlab ci_cd 实现代码质量管理

在日常的代码开发工作中，为了管理代码的质量，不管是开发团队，还是测试团队，或多或少都有一些自己的管理规范。但是规范的执行需要强有力的工具，本文将使用 Gitlab CI/CD + Sonarqube 的方案，把代码质量管控进行工具化、流程化，纳入到日常的开发工作中。

听说你学过架构设计？来，弄个短链系统

为了提升用户体验，以及日常业务的需要。我们需要设计一个短链接生成系统，除了业务功能实现以外，我们还得为全国的网络地址服务。在这么大的用户量下，数据该如何存储，高并发如何处理呢？

某邮储银行数据归集系统在 HTAP 场景下的选型与实践

面对 HTAP 能力的需求与云原生时代的趋势，以及国产化的浪潮，某邮储银行携手 OceanBase 打造了云原生时代下的国产分布式数据库场景实践体验。以下内容整理自某邮储银行运维方 DBA 的自述。

MicroBlocks 编程案例: 使用 micro:bit 接管 xlight

彩虹灯很好看，小巧而明媚。但我不想用它的控制盒和编程软件。不爱用图形化编程领域的大多数软件/硬件。于是本文探索了绕开 xlight 的软件和硬件的方案，来接管这个彩虹灯

『移动端』

有的小伙伴会说，SharedPreferences 是旧时代的产物，现在已经有 DataStore 或 MMKV 等新时代的 K-V 框架，没有学习意义。但我认为，虽然 SharedPreference 这个方案已经过时，但是并不意味着 SharedPreference 中使用的技术过时。做技术要知其然，更要知其所以然，而不是人云亦云，如果要你解释为什么 SharedPreferences 会过时，你能说到什么程度？