- AMD规范简介
AMD(异步模块定义),是实现JavaScript模块化规范之一,它采用异步方式加载模块,模块的加载不影响后面语句的运行。require.js和curl.js都是实现AMD规范的优秀加载器。本文采用require.js。
1. define用于模块定义
define(模块ID,依赖模块数组,实例化模块函数);模块ID和依赖模块数组为可选。
如:
define("color",["jquery"],function($){
+function(){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
}();
});
2. require处理依赖加载
require(模块数组,回调函数);第一个参数为要加载的模块数组,第二个参数为模块加载后的回调函数。
如:
require(['test'], function (test){
test.testMath();
test.testColor();
});
- require.js实现AMD的简单例子
1. math.js
define("math1",function(){
var add = function (x,y){
return x+y;
};
var minus = function(x,y){
return x-y;
};
return {
add: add,
minus:minus
};
});
2. jquery.color.js
jquery1.7以上已经实现AMD规范。
define("color",["jquery"],function($){
+function(){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
}();
});
3. test.js
define("test",["math1","color","jquery"],function(math,color,$){
var testMath=function(){
var x=10;
var y=5;
$("#divAdd").html(x+"+"+y+"="+math.add(x,y));
$("#divMinus").html(x+"-"+y+"="+math.minus(x,y));
};
var testColor=function(){
$("#divColor").color("blue");
};
return {
testMath:testMath,
testColor:testColor
}
});
4. main.js
require.config({
paths: {
"jquery": "jquery-3.2.1.min",
"color": "jquery.color",
"math1": "math",
"test":"test"
}
});
require(['test'], function (test){
test.testMath();
test.testColor();
});
5. index.html
<!DOCTYPE html>
<html>
<head>
<script src="js/require.js" data-main="js/main" defer async="true"></script>
</head>
<body>
<div id="divAdd">testAdd</div>
<div id="divMinus">testMinus</div>
<div id="divColor">testColor</div>
</body>
</html>