【前端架构】工作流设计
分类:
文章
•
2022-10-09 21:08:26
-
基础规范
- 规范代码组织结构
- 统一代码风格，即源代码的书写风格
- 组件、函数等命名规范
- 开发工具规范
- 代码组织结构
- 统一代码风格
-
使用Lint规范代码
- HTMLHint
- CSSLint
- ESLint
- TSLint
-
规范化命名，提升可读性
- 命名法：（1）驼峰命名法；（2）下划线命名法；（3）匈牙利命名法
- CSS及其预处理器命名规则：如Airbnb CSS/Saas指南
- 组件命名规则：（1）按照功能来命名，比如SideBar就是一个侧边栏功能的组件；（2）按页面来切分组件，比如NewsItem就是用于展示新闻的组件，它既用于列表页，又用于相关新闻页；（3）按上下文来命名组件，如NewsChildItem就是按需要将上一个组件的某个共用元素拆分出来
-
使用插件规范开发工具，提升开发效率
- EditorConfig，它可以让我们读取项目中的.editorconfig配置，以遵循统一的编辑器规范，诸如两个空格的缩进
- Lint插件，如ESLint、HTMLHint，可以帮助我们在IDE及编辑器上显示Lint问题
- 单词拼写检测，直接在代码中显示拼错的单词，可以帮助其他人阅读代码
- 路径补全（Path Intellisense），能自动提醒我们可以引用的资源、库路径
- 代码自动补全，包含不同语言的代码补全
- Emmet插件，可以帮助我们快速编写HTML、CSS等
- 代码格式化，可以帮助我们格式化代码
-
项目文档化：README搭建指南
- 运行环境
- 依赖准备，以及如何搭建
- 项目安装指南
- 线上示例
- 相关文档链接
- 相关人员联系方式，讨论群
-
绘制架构图：减少沟通成本
- 代码生成架构图：Graphviz、Darge.js
- 专业工具绘制架构图：Visio（收费）、OmniGraffle（收费）、Dia（开源）
- 软件附带工具：Keynote、SmartArt
- 在线工具：ProcessOn
-
可编辑文档库：提升协作性
- Wiki
- Confluence
- Git + Markdown
-
记录架构决策
- 标题
- 日期
- 描述决策相关的状态，包含提议、通过、完成、已弃用、已取代等
- 价值中立的、用于描述事实上下文的背景
- 应对这种场景的相应决策
- 记录应用决策后产生的后果
-
可视化文档：比如ViewUI官方文档iviewui.com/components/…
-
看板工具：统一管理业务知识
- Jira
- Tapd
- 禅道
- Teambition
-
提交信息：每次代码提交文档化
- 用commitlint插件规范提交日志格式
- 用standard-version插件来生成changelog文件
-
通过流程化提高代码质量
- 代码预处理Lint + Git Hooks：（1）通过Lint做静态代码分析；（2）运行测试；（3）风格检测，如规范函数名及变量、代码格式规范、限制语言特性、函数行数限制、多重嵌套限制、未使用代码清除等；（4）使用git hooks，如"commit-msg"中执行"commitlint"，"pre-commit"中执行"npm run lint"，"pre-push"中执行"npm run test && npm run build --prod"
- 手动检视代码：（1）常规代码检视Code Review；（2）阻塞式代码检视merge request
-
使用工具提升代码质量
- 代码扫描工具：Sonar
- IDE快速重构：Intellij IDEA
-
测试策略
参考资料：
- 《前端架构：从入门到微前端》
微信公众号“前端那些事儿”：
