1.<script>标签加载
<script src="module1.js"></script>
<script src="module2.js></script>
<script src="module3.js></script>
(1) 多个文件的变量冲突
(2) 文件按序加载
(3) 程序依赖关系不明确,难维护
2.CommonJS
允许模块通过require方法来同步加载所要依赖的其他模块,然后通过exports 或者 module.exports 到导出开发的方法。
require('jquery');
require('./../module01.js');
exports.doSomething = function() {};
module.exports = {};
(1) 同步加载,好使长,且不能并行加载多模块
3.AMD(Asynchronous Module Definition)
通过define(id, dependences, factory), 声明模块的时候指定所有的依赖,当作参数传递到factory中,,对依赖进行前置执行。
define('module', ['dep01', 'dep02'], function(dep01, dep02) {
return obj;
});
require(['module', './../file'], function(module, file) {
// code execute
});
(1) 适合浏览器异步加载,可以并行加载多模块
(1) 定义模块复杂,增加开发成本
(2) 模块化应用独立,通用性较差
4.CMD(Common Module Definition)
5.UMD(Universal Module Definition)
以上两种接触较少,不比较
6.ES6 模块
增加了javascript语言层面的模块体系定义。
最大的静态化,以便编译时能确定模块的依赖关系,以及输入和输出的变量。
CommonJS 和 AMD 都只能在运行是定义这些。
import 'jquery';
export function functionName() {}
module 'localModule' {}
新兴语法,支持性较差。
网友评论