AMD 异步模块定义(require.js)
require.js官网地址
require.js 提供了两个全局函数define()和require()
控制台输出define,require函数
通过这两个全局函数可以减少JS文件的http请求次数,有相互引用关系的JS文件根据依赖关系进行层级加载,没有依赖到的JS文件不加载。
require.js测试程序如下:
下面截图中JS文件加载顺序:
使用require.js前必须先引入require.js
CDN:https://cdn.bootcss.com/require.js/2.3.5/require.min.js
上面定义了main.js,a.js,a-util.js,util.js这几个JS文件,依赖关系如下(=>代表依赖)
main.js => a.js => a-util.js => util.js
util.js可以当作是整个项目的公共工具类,
a-util.js可以是处理a某个业务逻辑的类,
a.js依赖于a-util.js,
main.js是整个项目入口文件。
这时只需要加入data-main的数据标识中引入main.js就加载到了main.js,
<script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
依赖代码如下:
util.js
// 抛出util
define(function(){
var util = {
getFormatDate : function(date , type){
if(type === 1){
return '2018-2-5';
}
else if(type === 2){
return '2018年2月5日';
}
else{
return parseInt(date);
}
}
};
return util;
});
a-util.js
// 抛出a-util.js
// a-util.js依赖于util.js,util.js返回的util对象用于a-util.js的参数
define(['./util.js'],function(util){
var a_util = {
FormatDateLog : function(date){
return util.getFormatDate(date);
}
}
return a_util;
});
a.js
// 抛出a.js
define(['./a-util.js'],function(a_util){
var a = {
fn : function(date){
return a_util.FormatDateLog(date);
}
};
return a;
});
main.js
// 这里是入口文件,引用需要用到的js文件不需要就不加载
require(['./a.js'],function(a){
var date = new Date();
console.log(a.fn(date.getFullYear()));
});
这里程序的输出:2018。
AMD还有个好处就是当你不需要用到某个模块时,只需修改下依赖代码,可以不加载不需要的JS模块。
持续更新中……