🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 前言 越来越多的公司开始有前端架构师的需求,在我的另一篇文章里也有描述前端架构师或者前端大牛应该具备什么,本文会从更专业的角度来分析架构本身应该符合哪些原则。 ## 描述 前端架构是一系列工具和流程的集合,旨在提升前端代码质量,并实现高效、可持续的工作流。 ## 工作职责 ### 体系设计 虽然ui效果以及产品特性不是前端决定的,但是前端系统的开发方法以及系统设计由前端架构师决定。下面分条描述下体系设计可能包含的部分: - 与后端通讯逻辑 - 前端项目结构 - 前端技术选型 - 系统设计规范 - 代码检验机制 - 前端构建部署,持续集成 - 前端性能 - 前端监控 - ued跨职能协作 - 前端技术栈全量分析 ### 工作规划 - 开发工作流 - 功能设计 - 交互设计 - 交付兼容标准以及解决方案 - 代码审查 ### 监督跟进 - 任务合理分配以及进度跟踪 - 疑难问题解决方案 - 核心代码维护与不断完善与讲解 ## 可参考的架构重构实践 ### 模块化内容 大力推动可重用组件,可重用工具,并按照编程思路不断完善。把可重用部分进行规范,使用场景,api 说明。 ### 全面测试 在前端代码不断迭代过程中,很容易发现某些原来的代码或者追加的代码存在不合理的设计,遗留bug风险或者可维护性低,因此针对每个阶段的功能产物,我们要尽可能的全量测试,并保留之前的测试文档以及功能设计文档,不断完善并追加到系统文档中。 ### 流式管理 引入git工作流,把不同功能细分,肢解为代码块。把过去手动重复容易出错的部分自动化,包括更新样式缓存图片等。 ### 详尽文档 详尽的需求,开发,交付,测试,系统说明文档可以为大家的系统维护以及开发思路上提供良好的资源。 ## 四个核心 ### 代码 - html语义化 - css设计命名原则,模块化(oocss ,sma,bem) - 代码规范 - ### 流程 ### 测试 ### 文档 ## 参考文档 - 前端架构设计 美 Micah Godbolt著