可扩展前端项目的 10 条原则

一个常见问题

原则

永无止境的清单

一个常见问题

自诞生以来，Web 应用已经历了漫长的发展。如今，我们深知 JavaScript 在 Web 上的强大，以及在框架和技术选择方面蕴藏着无限可能。不同的框架各有优缺点，但一些核心方法几乎可以应用于所有框架。诸如 create-react-app、next.js、vue-cli 等工具对于引导项目及其结构非常有帮助，但在此之后，您可以根据自己的喜好和项目需求自由构建应用程序。

我总结了一些在使用React和Vue构建 Web 应用时发现很有价值的原则，它们可以帮助你明确方向，并保持代码的整洁和完善。大多数原则适用于所有软件，但这份清单仅针对 Web 应用。

原则

1. 开发组件，而不是屏幕
   • 尝试将组件的所有逻辑单独封装起来，以便可以轻松地在任何地方渲染它，例如在不同的屏幕和部分中
   • 所有 CRUD 操作都会进入控制器/提供者内部，获取所需的数据，并将数据传递给展示组件
     • 一个常见的场景是 redux/vuex - 数据被持久化到存储中并被视为单一事实来源，容器组件提取相关数据
2. 分离展示层和业务/控制层
   • 并非所有组件都需要连接到商店、后端 API 或其他服务
   • 通过使组件“数据源不可知”，可重用性大大提高
3. 使用标准化的方式获取数据
   • rest-hooks是这一原则的一个很好的例子，因为它鼓励 API 调用具有可预测和可读的结构
   • 对于某些项目来说，使用显式fetch调用可能就足够了，但如果您要处理大量资源和关系，那么对后端 API 进行抽象可能会很有帮助
4. 拥有通用的用户输入策略
   • 表单、选择标签、验证、错误状态都属于这一类
   • antd等 UI 组件库提供了开箱即用的解决方案
   • 如果你正在创建一个没有 UI 库的应用程序，请考虑更加重视标准化这些元素以获得更好的用户体验
5. 编写自动化测试
   • 根据我的经验，组件最好通过集成测试进行测试，特别是使用Cypress
   • 业务逻辑应该通过单元测试彻底覆盖
   • e2e 对于较大的用户流进行冒烟测试很有价值；它们可以帮助检测客户端和 API 之间的回归
6. 使用故事书创建可重用组件
   • https://storybook.js.org/
   • 与设计师合作并讨论功能的好方法
   • 作为你的应用的“生活风格指南”
7. 使用 linters 和格式化程序
   • linters 示例：ESLint、stylelint
   • 大多数引导工具（例如 create-react-app）都会为您预先安装 linters，但如果您使用的是旧代码库，则可能无法应用它们
   • 它们不仅能帮你发现 bug，还能用来定义团队的代码风格——这有助于减轻你基于同事继承的功能进行开发时的心理负担。
   • sonarJS eslint 插件可以帮助提高代码质量，因为它可以检查逻辑结构
   • Prettier是一款非常棒的代码格式化程序，您只需设置一次，就无需再考虑它——在团队工作时非常有用
8. 避免全局样式
   • 覆盖和重置可以全局进行
   • CSS 模块或 CSS-in-JS 是一些可以帮助实现范围化、隔离样式的技术
   • 本地样式通常可以提高组件的可重用性
9. 使用结构化版本控制
   • 使用分支模型
     • 例如gitflow — “由 Vincent Driessen 创建的 Git 分支模型”
     • 在版本控制中拥有结构对于团队合作来说是必不可少的，但即使在独自工作时它也很有帮助
   • 检查提交信息 - commitlint
     • 在项目开发过程中创建变更日志和查找错误很有用
     • Angular 的提交消息规则通常适用于任何软件项目，并且 commitlint 可以帮助您使这些消息与规则集保持一致
10. 保存变更日志
    • 在每个项目开始时，通常很容易跟踪你脑海中的所有变化
    • 随着项目的发展，变更日志可以作为发现代码库显著变化的中心位置，即使是经过数月甚至数年的开发

永无止境的清单

好了，各位！当然，根据项目领域和技术的不同，还可以添加更多内容，但我发现这些原则可以彻底改善许多前端应用。几乎所有原则都可以逐步应用，并由您和您的团队根据优先级进行，因此无需担心一次性全部应用。

在创建 Web 应用时，你认为哪些原则至关重要？请在下方评论区分享！⬇️

谢谢阅读。🙏