前端面试题（二）----前端模块化和组件化的区别和联系

前端组件化开发和模块化开发的区别

之前一直以为模块化开发和组件化开发是一个意思，有次看到了类似这样的题，发现自己还是太年轻，现在整理一点出来。

首先，组件化和模块化的意义都在于实现了分治，目前我们开发的项目复杂度不断的上升，早已不是我们一个人能完成的工作，团队合作的话又会产生配合困难等各方面问题，组件化和模块化便应运而生，

结合webpack，glup，grunt等代码混淆工具，完成代码压缩，混淆的工作。

区别：

组件是具体的：按照一些小功能的通用性和可复用性来抽象组件

组件化更多的关注UI部分，比如用户看到的弹出框，页脚，确认按钮等，这些组件可以组合成新的组件，又可以和其他组件组合组合成新的组件

模块是抽象的：按照项目业务划分的大模块

模块化侧重于数据的封装，一组相关的组件定义成一个模块，一个json对象可以是一个模块。

封装之后需要解决的就是模块之间的依赖，babel是目前比较火的es6转换器。

2019-08-20 补充

不论是前端组件化还是模块化，都是前端工程化的具体体现

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的，称之为工程化

前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式。
因此可以简单的认为模块化和组件化是工程化的表现形式。

组件：

对于组件而言，其目的在于提高代码的重用性，其功能相对单一或者独立。在整个项目的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。
页面就像是组件的容器,负责组合组件形成功能完整的界面。

模块：

将同一类型的代码整合在一起（例如用户信息模块，设置模块等等），所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的，所以说模块化是横向分块。
模块化提高内聚，将分属同一模块代码放到一起；降低耦合，将不同模块间的耦合程度弱化。