您的位置：首页 > Web前端 > JavaScript

JavaScript模块化-RequireJs实现AMD规范的简单例子

2018-01-04 22:05 621 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航