JS模块化:
模块通常是指一种代码组织方式,可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。
优点:
- 代码重用:编写好的代码模块可以重复引用。
- 避免变量污染:模块与模块之间的代码所声明的变量不会产生冲突,具有独立的作用域。
- 高可维护性:编写好的模块在需要升级代码时,只需要对模块单元进行修改。
在开发模块时,开发人员不能各行其道,需要按照一定的规则编写代码,这样的代码才能被彼此引用,于是,便有了 CommonJS, AMD, CMD 这三种规范。
三种模块化规范的区别
CommonJS 需要三个参数 (require, exports, module)
AMD (define 方法需要三个参数:模块名称,模块运行的依赖数组,所有依赖都可用之后执行的函数)
CMD (全局函数define,用来定义模块。 参数 factory 可以是一个函数,也可以为对象或者字符串。 当 factory 为对象、字符串时,表示模块的接口就是该对象、字符串)
1
2
3
4
5
6
7
8/*commonJS*/
//通常我们在编写一个基于CommonJS规范的模块时,我们并不需要在定义require,module,exports这三个变量,因为在Node中,在编译的过程中,Node对获得javascript文件进行了头尾包装。被包装后的格式如下:
(function(exports,require,module,__filename,__dirname){
var math = require('math');
exports.area = function(radius){
return Math.PI * radius * radius;
}
});1
2
3
4/*AMD*/
define(['dep1', 'dep2'], function(dep1, dep2){
return function(){};
});1
2
3
4
5
6
7/*CMD*/
//CMD规范是由国内的玉伯提出,与AMD相比,更接近CommonJS 规范
define(factory);
//在依赖部分,CMD支持动态引入,如下:
define(function(require, exports, module){
//The module code goes here;
})AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs.
- CommonJs主要针对服务端,AMD/CMD主要针对浏览器端,所以最容易混淆的是AMD/CMD。
- AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别。
AMD是预加载:在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成)
CMD是按需加载:加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。 - AMD/CMD的优缺点.
AMD优点:
加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。
AMD缺点:
并行加载,异步处理,加载顺序不一定,可能会造成一些困扰,甚至为程序埋下大坑。
CMD优点:
因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。
CMD缺点:
执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。