【前端架构】工作流设计

1. 基础规范
   • 规范代码组织结构
   • 统一代码风格，即源代码的书写风格
   • 组件、函数等命名规范
   • 开发工具规范
2. 代码组织结构
3. 统一代码风格
4. 使用Lint规范代码
   • HTMLHint
   • CSSLint
   • ESLint
   • TSLint
5. 规范化命名，提升可读性
   • 命名法：（1）驼峰命名法；（2）下划线命名法；（3）匈牙利命名法
   • CSS及其预处理器命名规则：如Airbnb CSS/Saas指南
   • 组件命名规则：（1）按照功能来命名，比如SideBar就是一个侧边栏功能的组件；（2）按页面来切分组件，比如NewsItem就是用于展示新闻的组件，它既用于列表页，又用于相关新闻页；（3）按上下文来命名组件，如NewsChildItem就是按需要将上一个组件的某个共用元素拆分出来
6. 使用插件规范开发工具，提升开发效率
   • EditorConfig，它可以让我们读取项目中的.editorconfig配置，以遵循统一的编辑器规范，诸如两个空格的缩进
   • Lint插件，如ESLint、HTMLHint，可以帮助我们在IDE及编辑器上显示Lint问题
   • 单词拼写检测，直接在代码中显示拼错的单词，可以帮助其他人阅读代码
   • 路径补全（Path Intellisense），能自动提醒我们可以引用的资源、库路径
   • 代码自动补全，包含不同语言的代码补全
   • Emmet插件，可以帮助我们快速编写HTML、CSS等
   • 代码格式化，可以帮助我们格式化代码
7. 项目文档化：README搭建指南
   • 运行环境
   • 依赖准备，以及如何搭建
   • 项目安装指南
   • 线上示例
   • 相关文档链接
   • 相关人员联系方式，讨论群
8. 绘制架构图：减少沟通成本
   • 代码生成架构图：Graphviz、Darge.js
   • 专业工具绘制架构图：Visio（收费）、OmniGraffle（收费）、Dia（开源）
   • 软件附带工具：Keynote、SmartArt
   • 在线工具：ProcessOn
9. 可编辑文档库：提升协作性
   • Wiki
   • Confluence
   • Git + Markdown
10. 记录架构决策
    • 标题
    • 日期
    • 描述决策相关的状态，包含提议、通过、完成、已弃用、已取代等
    • 价值中立的、用于描述事实上下文的背景
    • 应对这种场景的相应决策
    • 记录应用决策后产生的后果
11. 可视化文档：比如ViewUI官方文档iviewui.com/components/…
12. 看板工具：统一管理业务知识
    1. Jira
    2. Tapd
    3. 禅道
    4. Teambition
13. 提交信息：每次代码提交文档化
    • 用commitlint插件规范提交日志格式
    • 用standard-version插件来生成changelog文件
14. 通过流程化提高代码质量
    • 代码预处理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
15. 使用工具提升代码质量
    • 代码扫描工具：Sonar
    • IDE快速重构：Intellij IDEA
16. 测试策略
    • 单元测试
    • 组价测试
    • 契约/接口测试
    • E2E测试

 

参考资料：

1. 《前端架构：从入门到微前端》

延伸阅读

---

▶ Walkthrough007