为什么要使用模块化?
- 解决命名冲突
- 依赖管理
- 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。
- 提高代码可维护性和可读性
- 前端性能优化
- 可以很方便实现模块的跨服务器和浏览器共享
CMD、AMD、CommonJS 规范分别指什么?有哪些应用
CommonJs
CommonJS是服务器端模块的规范,Node.js采用了这个规范并首先采用了js模块化的概念。
根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。
//add.js
exports.add = function(){...};
//calculate.js
var cc = require('add');
exports.add = function(n){
return cc.add(val,n);
};
然而CommonJS规范并不适用于浏览器端,由于浏览器端的瓶颈在于带宽/网络,
如果客户端同步加载一个个文件,然后执行,那么就会出现假死情况
因此诞生了AMD,CMD,异步模块加载机制
CMD(Common Module Definition)
CMD是SeaJS 在推广过程中对模块定义的规范化产出
与AMD的不同在于, AMD推崇依赖前置会在一开始加载好所有需要的模块,而CMD则推崇依赖就近,当需要时才加载
//math.js
define(function(require, exports, module) {
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
});
//increment.js
define(function(require, exports, module) {
var add = require('math').add; //需要用到math时加载模块
exports.increment = function(val) {
return add(val, 1);
};
});
AMD (Asynchronous Module Definition, 异步模块定义)
AMD属于依赖前置,把项目中需要用到的依赖提前声明,等获取之后执行callback
//创建文件check_amd.js, 定义模块
define(['check'], function(){
var flag = true;
function check(){
return flag;
}
return {
check: check
};
});
//在需要用到的页面加载模块
require(['check_amd'], function (check){
if(check.check()){
console.log("哈哈哈");
}
});
使用 requirejs 完善入门任务15,包括如下功能:
- 首屏大图为全屏轮播
- 有回到顶部功能
- 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
- 使用 r.js 打包应用