前端语言JavaScript和TypeScript,对其中的模块加载很晕,就研究了一下现有的模块加载方式。模块加载从大的方面来说分为服务器端加载和浏览器端加载,下面仔细说明。
一种服务器端模块化的规范,Nodejs实现了这种规范,所以就说Nodejs支持CommonJS。
CommonJS分为三部分:
require 模块加载
exports 模块导出
module 模块本身
根据规范一个单独的JS文件就是一个module,每个单独的module是一个单独的作用域。也就是说在一个文件里定义的变量和函数都是私有,对其他文件不可见,除非用exports导出了。
AMD
AMD “异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。主要用于浏览器端的JS加载,为了不造成网络阻塞。只有当依赖的模块加载完毕,才会执行回调。
AMD使用define来定义模块,require来加载模块。
define(id?,dependencies?,factory);
require([module],callback);
Note: AMD允许输出的模块兼容CommonJS。
RequireJS是AMD的一种实现。
CMD
Common Module Definition的缩写,也是一种异步模块定义规范,它和AMD的主要区别有两点:
1.对于模块的依赖,AMD是提前执行,CMD是延时执行。
2.AMD推崇依赖前置,CMD推崇就近依赖。
//AMD
define(['./a','./b'], function (a, b) {
//依赖一开始就写好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依赖就近书写
var a = require('./a');
a.test();
});
UMD
UMD: 通用模块规范
从名字就可以看出来UMD做的是大一统的工作,把前后端加载糅合在了一起,提供了一个前后端统一的解决方案。既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范,支持AMD和CommonJS模式。
UMD的实现原理:
1.先判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。
2.再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
3.前两个都不存在,则将模块公开到全局(window或global)