20-组件化和模块化有什么区别？

相信很多人和我一样看过很多组件化和模块化设计的文章，但依然没有搞清楚这两个的区别，在写这篇文章之前，我一直以为组件化和模块化是一个概念（捂脸），在阅文无数后，决定做个总结，来帮助理解这两者的概念。

组件化和模块化源于软件开发，现在越来越被更多地应用于UI设计当中。下面是我为了便于理解做了个示意图。

一、什么是组件和模块

1.1组件：把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。

1.2模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。

二、组件和模块的区别

2.1组件：就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。

2.2模块：就像是独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架。

三、为什么要使用组件化和模块化？

3.1开发和调试效率高：随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。

3.2可维护性强：便于后期代码查找和维护。

3.3避免阻断：模块化是可以独立运行的，如果一个模块产生了bug，不会影响其他模块的调用。

3.4版本管理更容易：如果由多人协作开发，可以避免代码覆盖和冲突。

组件化模块化优点：开发调试效率高、可维护性强、避免阻断、版本管理更容易

前端模块化规范的分类在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化
⚫ CommonJS 适用于服务器端的 Javascript 模块化太多的模块化规范给开发者增加了学习的难度
⚫与开发的成本。因此，大一统的 ES6 模块化规范诞生

最后顺便提一下插件化：

插件化开发和组件化不同，插件化开发就是将整个app拆分成很多模块，每个模块都是一个apk(组件化的每个模块是一个lib),最终打包的时候将宿主apk和插件apk分开打包，插件apk通过动态下发到宿主apk，这就是插件化。

四、插件化按理也算是模块化的一种体现，和组件化就不一个概念了。那么，到底有什么区别呢？

组件化的单位是组件（module）。 插件化的单位是apk(一个完整的应用)。

组件化实现的是解耦与加快编译， 隔离不需要关注的部分。 插件化实现的也是解耦与加快编译，同时实现热插拔也就是热更新。

组件化的灵活性在于按加载时机切换，分离出独立的业务组件，比如微信的朋友圈 插件化的灵活性在于是加载apk,
完全可以动态下载，动态更新，比组件化更灵活。

组件化能做的只是， 朋友圈已经有了，我想单独调试，维护，和别人不耦合。但是和整个项目还是有关联的。 插件化可以说朋友圈就是一个app,
我需要整合了，把它整合进微信这个大的app里面

其实从框架名称就可以看出： 组 和 插。

组本来就是一个系统，你把微信分为朋友圈，聊天， 通讯录按意义上划为独立模块，但并不是真正意义上的独立模块。 插本来就是不同的apk，
你把微信的朋友圈，聊天，通讯录单独做一个完全独立的app, 需要微信的时候插在一起，就是一个大型的app了。

插件化的加载是动态的，这点很重要，也是灵活的根源。