前端开发中工程化模块化和组件化分别是什么？

Posted 2021-04-08 敲代码的篮球

工程化、模块化、和组件化分别是什么？

工程化

最基础的工程化思想就是将页面的结构、样式和动作分离，工程化是一种思想而不是某种技术，用做工程的思维看待和开发自己的项目，而不是直接撸起袖子一个页面一个页面开些；要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现在哪谁的责任甚至会在某一天轰然倒塌，那我们如果用工程化的思想去做，就会先画图纸、确定结构、确定用料和预算以及工期，另外需要用到什么工种多少人等等，我们会先打地基再建框架再填充墙体这样最后建立起来的高楼才是稳固的合规的，什么地方出了问题我们也能找到源头和负责人。

模块化（功能模块比如btn）

工程化是一个更高层次的思想，那么组件化和模块化就是工程思想下相对具体的开发方式；模块化就是假设需要在A页面写一个样式或者功能，这个功能还需要在项目的其他位置使用，这时候把这个功能分离出来编写，实现复用还可以分而治之。

组件化（页面的一部分 如header/footer）

页面上每个独立的、可视/可交互区域视为一个组件；

每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；组件具有独立性，因此组件与组件之前可以自由组合；

页面只不过是组件的容器，负责组合组件行程功能完成的界面；

当不需要某个组件，可以替换或者删除；

组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏这些都视为组件，不同的页面根据内容的需要，去盛放相关组件就可以组成完成的页面。

模块化和组件化的好处就是复用。除了复用还有个好处就是分治，我们可以在不影响其他代码的情况下按需求修改某一独立的模块或是组件。

问题：

1、组件化后，一个文件夹一个组件，最后怎么把组件拼接起来？

使用gulp之类打包工具。

2、scss文件分类，文件夹究竟怎么设立最好呢？

根据实际的开发需要来决定，但是大体的结构要有的，并且不能随意更改。

3、模块和组件算不算一样的做法

模块可以是组件（button按钮之类的），也可以被组件包裹；模块主要指js方面，组件，一般是指可视化的区域。