Logo
Garvin Dev

About

avatar

Garvin

Web Developer
OpusM Inc
mailgithub

钮国伟 · 前端开发

个人优势

  • 扎实的前端技术基础：熟练掌握 HTML、CSS、JavaScript（ES6+），能够编写语义化、结构清晰的代码，确保跨浏览器兼容性和响应式设计；
  • 丰富的框架与工具经验：熟练掌握 React 前端框架及其衍生脚手架（umi, vite 等）并且有丰富 tsx 开发经验；vue2/3 也可以快速上手；
  • 前端组件库开发经验：有完整开发维护公共组件库的经验（web 和 h5），部分基于 AntDesign，包含基础组件/低代码组件/图表组件，ts 和 md 文档维护；
  • 微前端开发和部署经验：有微前端（无界）完整从 0 开始项目开发和部署经验，并成功上线 15+ 子项目稳定运行，由我编写子系统接入文档成功在公司前端组进行技术分享；
  • 低代码开发：熟练使用 rc-form，通过 JSON Schema 配置生成 Form 组件，使用控制反转和“一切皆 form”的思想开发维护中台列表 CRUD 低代码；
  • 熟悉前端工程化：熟悉 Webpack 构建工具，了解其构建过程，可以快速定位问题代码，熟悉测试流程 DEV、SIT、UAT；
  • 移动端：有 taro 跨端小程序开发经验和 h5 组件库和业务功能开发经验；
  • 其他：了解 nestjs 并有基础开发经验。

工作 & 项目经历

  • 南京万丞信息科技有限公司：好想来零食研发中心大前端团队工程师（2024-03 - 至今）
  • 金证股份南京科技有限公司：Web 前端工程师（2022-11 - 2024-02）
  • 江苏芍园科技责任有限公司：Web 前端工程师（2021-03 - 2022-10）

南京万丞信息科技有限公司（2024-03 - 至今）

项目 1：好想来新零帮 WEB 组件库（负责人）

https://xlb-component.xlbsoft.com

架构设计： 基于公司 UI 统一规范采用 React18 + TypeScript 构建组件库，开发（部分基于 antd）基础组件、低代码组件（动态表单生成器、可视化编排面板、各种拖拽组件、高性能表格）、业务组件（与 CRM/ERP 等公司子系统深度集成的复合组件），使用阿里 CI/CD 自动化发布至私有 NPM 仓库，Jest 提供单元测试。

主要职责与项目亮点： 使用 dumi 搭建组件文档和交互示例，提供清晰的 API 文档和使用说明及 demo，方便团队成员快速上手。使用 rc-form 的控制反转思想规范前端开发页面，极大减少页面的代码量。组件库被公司内部（ERP、POS、WMS、CRM 等）支撑公司 15+ 业务系统项目组开发，极大提高各项目的开发效率。项目融合开发 npm link 使业务项目和开发项目一起调试，组件库已被 15+ 业务线采用，成为公司前端 UI 标准。

部分组件例举：
1）基于 AgGrid 的高性能表格，支持全键盘操作
2）拖拽计算组件
3）基于控制反转思想的“一切皆 form”的后台配置低代码
4）各种图表组件，支持 h5/web 端等

项目 2：无界微前端项目设计与实践部署（负责人/设计者）

项目描述： 基于当时公司所有业务线都写在一个 webpack4 的项目里面，导致页面越来越多项目越来越大，由于老代码不规范，时常有样式冲突问题，所以产生了拆分子应用的想法，调研后决定使用 webcomponent 架构的 wujie。

技术亮点： 提供两套技术 umi4 和 vite 的公司内部子应用模板供业务线选择，持续维护官方插件并编写接入过程中遇到的浏览器兼容、富文本兼容等问题的插件；构建统一的微前端基座应用，实现多个业务子应用的无缝集成与独立部署。

架构设计与优化：

  • 主导设计并实施基于 wujie 的微前端架构，解决多团队协作开发的技术壁垒，极大提升各业务线的开发效率，天然支持各子项目样式隔离；
  • 设计应用间通信机制，解决跨应用数据共享和状态同步问题；
  • 优化 wujie 沙箱预加载策略，将首屏加载时间缩短 40%（根据权限分帧加载前两个，后空闲时间加载其他有权限子应用），显著提升用户体验；
  • 实现子应用按需加载和资源预加载提升到父应用机制，减少 30% 的资源包大小；
  • 设计并实现应用页面级 KeepAlive 缓存方案，二次访问页面加载速度提升 100%；
  • 使用阿里 OSS 加载静态资源，通过哈希文件名和 cache-control 策略优化缓存。

团队赋能： 编写完善的微前端架构文档和快速接入指南，降低团队学习成本。新的子项目可以由各业务线负责人快速根据文档自行接入，并在公司所有前端组组织技术分享会 1 次。实现了 15+ 个业务子应用的独立开发、独立部署，大幅提高产品迭代速度，受各业务线一致好评。 :contentReference[oaicite:1]1

项目 3：好想来品牌会员小程序（开发者）

项目背景： 由于好想来会员上线之初集团尚未成立研发中心，委托其他团队开发的遗留会员小程序。针对合同到期、功能维护难等问题进行自主开发。
项目描述： 基于 taro 开发，支持微信和支付宝多端小程序；开发高兼容性高性能（主要是列表和表格）的小程序组件，并新增积分商城、会员成长体系等核心功能。后台框架使用 nestjs，并帮助后台开发了线上线下订单、个人信息接口。
项目成果： 实现华东/华南/华北等全国区域成功上线，区域化上线方案覆盖 1 万+ 门店；针对不同地区动态展示活动页面，日均 UV 13 万+。 :contentReference[oaicite:2]2

项目 4：好想来加盟商管理项目 & 品牌加盟小程序（Web 端负责人）

  • 项目板块 1： 开发可视化拖拽组件系统，允许非技术人员通过拖拽 表单、图片、轮播图、可选块容器 等组件快速配置小程序页面，降低招商页面的开发成本约 60%。系统服务于“好想来”品牌加盟招商业务，覆盖 500+ 加盟商页面配置需求，从“页面搭建 → 客户留资 → 跟进转化”全流程覆盖，助力招商团队季度业绩超额完成。
  • 项目板块 2： 客户管理后台开发维护。基于现有功能迭代需求，使用统一组件库重构基座应用的页面到加盟商管理子项目，做到独立发布部署，使老页面系统维护成本极大降低。 :contentReference[oaicite:3]3

金证股份南京科技有限公司（2022-11 - 2024-02）

项目 1：MAAT 投资组合管理系统

https://inst.htsc.com/promote/issue](https://inst.htsc.com/promote/issue)

  • 团队规模： 30+ 人工程团队，负责 WEB 系统的研发设计、Wiki 文档编写、CodeReview。
  • 开发框架： React 16.14 + umi3 + antd4。
  • 组件库封装： 编写项目风格的低代码组件，包含 基本 UI 组件（各级标题、弹窗、日历、表格等）、业务组件、图标组件。所有表单需求只需传入对象配置；业务组件覆盖证券业常用对象（产品、组合、股票、证券代码、交易市场、交易方向、持仓、资金等）。通过二次封装统一工程化标准。
  • 项目升级改造： 将 React 16.6 + antd3 升级到 React 16.14 + antd4。先编写完整升级 Wiki，从项目内公共组件库开始，重点改造低版本带来的 UNSAFE 生命周期以及 Form 组件重构。升级后减少类模板代码，可使用 hooks，函数组件无实例化开销，在大型应用中可降低 10%~15% 内存消耗，也为升级 React 18+ 并发特性铺路。
  • Excel 文档处理： 基于 sheetjs 封装 Excel 导出与解析工具，支持所见即所得。为 table-xlsx NPM 库贡献解析工具 PR，支持传入映射对象以满足整套 antd Table 的导出需求。 :contentReference[oaicite:4]4

项目 2：INCOS 资产托管与运营服务平台

https://inst.htsc.com/incos/issue](https://inst.htsc.com/incos/user/login)

  • 团队与框架： 40+ 人工程团队；负责 WEB/H5 研发与 CodeReview（以 WEB 为主，H5 较少）。React 16.8.6 + antd3；微前端融合使用其他团队的私有库 bigbox-react。
  • Wiki 文档编写：
    1）业务组件已封装但缺少注释与类型，补充 PropTypes 与注释；
    2）技术调研与需求实现时输出详细技术方案并沉淀；新方案在组内分享。
  • 主题换肤： 调研与对接换肤需求。主流方案有：① CSS 变量；② 切换外层容器 class；③ 预处理器（Sass/Less）生成多套样式。本项目采用内部库 themes-switch：统一基础色 → 生成打包后的 [color].css → 通过切换函数替换 link 实现换肤。
  • 工程化落地： 引入 ESLint、Prettier、CommitLint 规范提交流程。 :contentReference[oaicite:5]5

江苏芍园科技有限公司（2021-03 - 2022-10）

项目 1：IDMS 智能制造系统

  • 职责与范围： 依据业务场景进行技术选型、组件库选择；制定组内研发规范（ESLint & Prettier）；CodeReview。产品为汽车智能制造管理系统。整体包含首页登录模块（对既有项目做样式改造 - Vue2），单点登录串联三个工程模块：
    • WMS 仓库管理系统（开发者 - React）
    • Admin 管理系统（独立完成 - React）
    • MDM 主数据管理（开发者 - Vue3）
  • App 万能表单 Web 端配置： 车间 PDA 需要多类表单用于入/出库。在 Admin 管理系统内开发表单设计器，只需新增配置（表单名称/字段）即可生成移动端表单，显著减少移动端开发工作量。
  • WMS 仓库管理系统： 负责通用业务组件（导航、弹窗、按钮、抽屉、表格、表单等）与统一 UI 规范；样式统一使用 CSS Modules，为后续“框架融合”的样式隔离做准备；利用 HOC 抽离业务通用逻辑以保证复用与扩展性，供组内复用。
  • 框架融合： 调研 qiankun / single-spa / Micro-app。因 qiankun 不支持 vite 且配置繁琐，最终选择 Micro-app：基于 WebComponent、与技术栈/业务解耦、接入成本低，可实现当前项目的样式隔离与数据通信需求。 :contentReference[oaicite:6]6

项目 2：安灯异常快速反应系统

  • 项目定位： 面向工厂安灯预警的 C 端项目；负责项目搭建、UI 对接、高保真样式、浏览器兼容（主要兼容 Chrome / FireFox 内核）。
  • 技术栈： umi3 + Antd4。
  • 主要功能： 登录注册、产品介绍、产品分类购买、微信/支付宝支付、开发票、续费、商品管理、通知、Office 文件预览、可视化图表监视、消息通知、使用分析、价格管理等；独立完成开发。

个人描述

  • Edu： 2017-09 – 2021-06 池州学院 · 计算机科学与技术
  • 爱好： 摄影、剪辑、YouTube & Bilibili 创作