前端有两个大方向一定要掌握，一是组件化和模块化，二是工程化，今天我们来聊一聊组件化和模块化。组件化和模块化满足了软件工程低内聚、高耦合、代码模块化的原则，提高代码的可重用性和可复用性，是提高工作效率的重要法宝。
组件化
前端框架 Vue 和 React 都是组件化开发，基于页面视图的树形结构，我们便可以进行组件化。在进行组件化时，注意一下三个原则：
- 单个组件代码不超过 200 行
超过 200 行的代码，阅读体验上不好，不利于之后自己和其他人维护。如果代码超过 200 行，说明需要拆分组件或者将逻辑拆分，在 React 中可以使用 Hooks 进行逻辑拆分。 - 抽取公共组件
不要重复你自己。当需要复制和粘贴代码时，需要将组件进行组件化；组件化需要考虑该公共组件是需求公共组件、项目公共组件、还是团队公共组件，将不同程度的公共组件放置在适合他们的地方。 - 建立和维护公共组件库
在有多个项目时，应考虑建立团队的公共组件库，并妥善维护；确保公共组件库能及时完成 bug 的修复，及时满足业务的需求。
模块化
模块化能让我们更清晰地组织代码，便于我们开发和维护。模块化工程可以遵循下面两个原则：
领域驱动设计
我们可以按照业务领域对模块进行划分。例如在开发一个金融系统时，我们可以按照一级业务、二级业务、数据业务代码进行模块化，一级业务之下还可按照具体的业务进行划分，模块化架构如下。
职责驱动设计
我们可以按照职责不同，对模块进行划分。例如在某个新债模块中，按照职责对 config,utils, component 进行模块化划分。