作品集 | 醉梦的网络日志

一个前端工程师的 web 前端作品集，里面有我开发过程中的思考与尝试。如无特殊说明，以下项目全部为我个人开发。

React 业务 Hooks

2024/09/19-

在前端项目开发中，我们通常有着各种各样可以复用的业务场景，如何能够将重复的代码量转为可复用的开发工具，是判断一个程序员编码水平及代码能力的衡量因素之一。但如何实现代码复用，也是前端开发同学乃至前端架构师都老生常谈的一个问题。

除此之外，很多同学在平时的开发中只是实现最基本的页面开发，对于构建工具的使用，测试用例的编写都少有涉及，在前端 gulp、grunt、webpack、esbuild、SWC、vite、trubo 等构件工具越出越多的背景下，如何掌握和选择这些框架，也是能够体现是否到达高级前端开发工程师水平的一个衡量依据。因此，这里我们通过以 React 为前端框架，React Hooks 作为核心产出，从 0 ～ 1 手把手搭建一个前端业务 Hooks 库，从产品设计、框架选择、架构设计到最终的编码落地，通过一个完整的产品实现，解决如何提升代码复用的问题。

能力支持：

构建工具基于 webpack & gulp
测试工具基于 jest
静态站点解决方案基于 dumi
支持hooks打包至umd格式，提供 npm 及 cdn

静态站点：https://wyh.huatree.top/react-hooks-huatree/#/

前端开发编码规范工程化

2024/08/21-

dev-spec

随着前端技术的发展，前端项目正在变得越来越复杂。JavaScript 作为一门弱类型解释性编程语言，其灵活多变的语法极大的提高了前端开发效率，但同时也存在一系列问题。在大型项目开发过程中，代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的。一致性的代码规范可以增强团队开发协作效率、提高代码质量、减少遗留系统维护的负担。但是每个人的代码编写喜好不同，代码风格也会迥然不同，若要一个团队内所有的成员都能发挥最大程度的价值，一个具有普适性的标准是必不可少的。

那么，如何制定前端团队的代码规范，如何在团队内进行最小成本的推广，就是一个合格的前端架构师面临的一大难题。很多团队的基础建设都只是简单地知晓其中一部分规范工具的使用，但却没有一套完整的工程化产出来助力研发同学实现规范落地。因此，如果我们能够产出一套完整化的前端编码规范工具，不仅能够解决存量项目的编码规范，还能够保证后续所有项目的编码质量。

能力支持：

全面的前端生态
支持前端全部生态，无需关注环境，支持直接使用
完善的规范配件
支持对全部前端配置实现一键接入、一键扫描、一键修复、一键升级
完整的测试用例
配套完整的测试用例，提升项目健壮性

静态站点：https://wyh.huatree.top/dev-spec/

元素曝光

2024/05/22-

ElemExpose 组件

该组件用于元素曝光埋点场景。支持不重复、重复曝光，可视区停留满足时长后曝光。

仓库地址：https://github.com/huatree/dev-example

分支：demo-vue2

无代码平台

2024/02/17-

material

无代码允许开发人员低成本通过拖拉拽的方式快速构建企业内部系统或落地页，常见的无代码平台能力包括：审批流、应用构建等。其在企业开发提效与运营方面取得了不错的成绩。例如国外的：Coda、Airtable、Notion 等产品，例如国内的：明道云、极简云、ClickPaaS 等产品。构建无代码平台是一件有挑战性的事情，从业务与技术架构入手，带你彻底弄懂无代码平台研发。

可视化平台允许数据分析人员通过拖拉拽的方式快速组建仪表盘或数据分析大盘，其在企业运营方面发挥重要作用。例如国外的：PowerBI、Monday、Coda 等产品，国内的：观远数据、BDP、FineBI 等产品。构建可视化 SaaS 是一件非常有趣的事情，从业务与技术架构出发，带你从零完成可视化图表数据协议设计、图表渲染器开发、图表编排等功能。

从项目搭建、规范约定、技术选型与评估、需求分析到开发，每个流程细节都不会放过。技术选型方面，选用 Vue3 作为技术栈，状态管理选用 Pinia，编辑器开发会基于 tiptap 来展开，Echarts 开发图表相关内容，除此之外，会向大家展示如何更优雅更松散处理复杂表单的场景。

核心功能：