百度百科中的解释: 模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性。
在编程中 模块化是将一个复杂的应用程序,按照一定的规则拆分成若干个文件(代码块),并进行组合。文件内部的数据与实现都是私有的,只是对外暴露一些接口(方法、变量)与其他模块进行通信
模块化的好处
目前前端主流的模块规范是
CommonJS
ESModule
AMD
CMD
UMD
CommonJS
规范是一种同步加载模块的方式,其主要用于服务端,即 Node
中的
module.exports
用于规定当前模块对外输出的接口exports
是 module.exports
属性的引用require
用于加载模块文件(读入并执行一个 JavaScript
文件并返回该模块的 exports
对象)exports
是 module
对象的一个属性exports
是 module.exports
的一个引用,在默认情况下 module.exports
和 exports
指向同一个空对象module.exports
ESModule
是 ES6
在语言标准的层面上实现的模块功能,主要由 export
和 import
构成
export
命令用于规定模块的对外接口import
命令用于输入其他模块提供的功能CommonJS
是动态语法可以写在判断里;ESModule
静态语法只能写在顶层CommonJS
模块输出的是一个值的拷贝;ESModule
输出的是值的引用
CommonJS
模块一旦输出一个值模块内部的变化就影响不到这个值ESModule
模块在 JavaScript
引擎对脚本静态分析时,遇到模块加载命令 import
,就会生成一个只读引用,等到脚本真正执行时再根据这个只读引用到被加载的那个模块里面去取值(ESModule
是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块)CommonJS
模块是运行时加载;ESModule
是编译时输出接口。
CommonJS
加载的是一个对象(即 module.exports
属性),该对象只有在脚本运行完才会生成ESModule
不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成CommonJS
模块的 require()
是同步加载模块;ESModule
的 import
命令是异步加载,有一个独立的模块依赖的解析阶段。this
指向不同
CommonJS
模块中的顶层 this
指向模块本身ESModule
模块中的顶层 this
指向 undefined
CommonJS
模块在加载模块后就会执行整个脚本并在内存生成一个对象,当出现某个模块被"循环加载",就只输出已经执行的部分,还未执行的部分不会输出ESModule
根本不会关心是否发生了"循环加载",只是生成一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。AMD
规范全称是 Asynchronous Module Definition,即异步模块定义,主要用于浏览器。 AMD
规范完整描述了模块的定义、依赖关系、引用关系以及加载机制。其代表库是 RequireJS
define()
: 定义模块require()
: 调用模块CMD
规范全称是 Common Module Definition,即通用模块定义,其代表库是 SeaJS
CMD
规范是在AMD
规范的基础上改进的一种规范,其解决了AMD
规范对依赖模块的执行时机的问题
define()
: 定义模块seajs.use()
: 调用模块AMD
CMD
两者最大的区别是对依赖模块的执行时机处理不同
UMD
只是一种通用的写法,是为了解决当时存在多种流行而不统一的规范而产生的一种通用规范 UMD
实际是 AMD + CommonJS + 全局变量
这三种规范的结合