1. sea.js
运用CMD规范
js文件的依赖管理、异步加载,方便前端的模块化开发。sea.js提供一个便捷的方式实现模块化,解决了传统方式的两个问题,命名冲突和文件依赖。
(1)基本使用
//定义计算器模块
'use strict';
// 定义一个计算模块
define(function(require, exports, module) {
var add = function() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += parseFloat(arguments[i]);
}
return result;
}
module.exports = {
add: add
};
});
//其它文件使用模块
<script src="node_modules/seajs/dist/sea.js"></script>
<script>
seajs.use('js/calculator.js', function(calculator) {
console.log('模块加载完成');
console.log(calculator.add(1, 2, 3, 4, 5, 6, 7, 8, 9))
});
</script>
sea.js默认同步载入,要模块间加载,用require.async("/包名", function(){});
(2)基本配置
//配置别名
seajs.config({
base: "./modules/",
alias:{
'calc':'02-calculator.js'
}
}) //用别名加载
seajs.use('calc', function(calculator) {
console.log('模块加载完成');
// console.log(e);
console.log(calculator.add(1, 2, 3, 4, 5, 6, 7, 8, 9))
});
(3)给jquery配置sea.js
// 适配CMD
if (typeof define === "function" && !define.amd) {
// 当前有define函数,并且不是AMD的情况
// jquery在新版本中如果使用AMD或CMD方式,不会去往全局挂载jquery对象
define(function() {
return jQuery.noConflict(true);
});
}
2. require.js
AMD
如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
4. CMD/AMD/CommonJs
1:CommonJs主要针对服务端,AMD/CMD主要针对浏览器端。(服务器端一般采用同步加载文件,而浏览器端要保证效率,需要采用异步加载,这就需要一个预处理,提前将所需要的模块文件并行加载好。)
2 : AMD/CMD区别,虽然都是并行加载js文件,但还是有所区别,AMD是预加载,在并行加载js文件同时,还会解析执行该模块(因为还需要执行,所以在加载某个模块前,这个模块的依赖模块需要先加载完成);而CMD并行加载js文件,但是不会执行,在需要的时候才执行。
3:AMD/CMD的优缺点
/ | 优点 | 缺点 |
---|---|---|
AMD | 加载快速,尤其遇到多个大文件,因为并行解析,所以同一时间可以解析多个文件。 | 并行加载,异步处理,加载顺序不一定,可能会造成一些困扰。 |
CMD | 因为只有在使用的时候才会解析执行js文件,因此,每个JS文件的执行顺序在代码中是有体现的,是可控的。 | 执行等待时间会叠加。因为每个文件执行时是同步执行(串行执行),因此时间是所有文件解析执行时间之和,尤其在文件较多较大时,这种缺点尤为明显。 |
对于依赖的模块,AMD是提前执行,CMD是延后执行
CMD依赖就近,AMD依赖前置