JavaScript模块化-RequireJs实现AMD规范的简单例子
2024-10-11 02:45:53
- 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>
最新文章
- mysql+mycat搭建稳定高可用集群，负载均衡，主备复制，读写分离
- [spring源码学习]三、IOC源码——自定义配置文件读取
- 关于IONIC 报错 XX is not a function
- css随记01编辑技巧,背景与边框
- 常用排序算法之JavaScript实现
- I.MX6 lcd lvds hdmi bootargs
- 【数位DP】 HDU 4734 F(x)
- DataTable转json字符串，jQuery.parseJSON()把json字符串转为标准的json对象格式
- U3D学习使用笔记(四)
- Jquery progressbar通过Ajax请求获取后台进度演示
- jfreechart 实例
- 查询Python版本
- Filebeat简介
- excel随机函数
- 【代码笔记】iOS-UIAlertView自动关闭
- 【转】Spring学习---Spring IoC容器的核心原理
- JavaScript对象遍历属性和值
- JAVA 定时器的三种方法
- [bzoj] 3673 3674 可持久化并查集 || 可持久化数组
- Codeforces Round #342 (Div. 2) B