官方网站：https://requirejs.org
加载机制：使用head.appendChild()将每一个依赖加载为一个script标签
html页面中引入require.js，使用data-main指定入口加载js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="require.js" data-main="hbk"></script>
</head>
<body>
</body>
</html>
除了使用data-main，也可以自定义baseUrl
requirejs.config({
baseUrl:'/js'
});
hbk.js
requirejs.config({
paths : {
jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
}
});
requirejs(['jquery'],function($){
$('body').css('background-color','red');
})
运行我们的html，发现body的背景色已经变成红色。
模块的定义使用define
新建mymodule.js
define(['jquery'],function($){
// 必须使用return暴露方法给外面
return {
whoami : function(){
$('body').append('<h1>huangbaokang</h1>');
}
}
});
并且在入口文件hbk.js中使用我们的模块
requirejs.config({
paths : {
jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
}
});
requirejs(['jquery','mymodule'],function($,hbk){
//$('body').css('background-color','red');
//调用mymodule.js中暴露的方法
hbk.whoami();
})
运行结果：
进阶篇
定义简单对象
user.js
define({
username : 'huangbaokang',
age : 30
});
test.html引用require.js和hbk.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="require.js" ></script>
<script type="text/javascript" src="hbk.js"></script>
</head>
<body>
<h1>hello huangbaokang</h1>
<button id="mybtn">获取用户对象并打印</button>
</body>
</html>
在hbk.js中监听按钮的点击事件
requirejs.config({
baseUrl : './lib',
paths : {
jquery : 'jquery.min'// 这里设置jquery.min.js的别名，注意后面不需要加.js
}
});
requirejs(['jquery','../api'],function($,api){
$("#mybtn").click(function(){
api.getUser().then(function(user){
console.log(user);
});
});
})
加载了api模块，调用api的getUser()方法
api模块的定义如下
define(['jquery'],function($){
return {
getUser:function(){
var def = $.Deferred();
require(['../user'],function(user){
def.resolve(user);
});
return def;
}
}
});
getUser方法利用了jquery的Deferred，使实现then语法的调用。
访问页面，控制台输出了简单对象。
配置不支持AMD的库和插件
如加载不支持AMD的库，Modernizr.js
加载不支持AMD的框架，bootstrap
shim:{
'modernizr':{
deps:['jquery'],
exports:'Modernizr',
init:function($){
return $;
}
}
}
如
shim:{
'modernizr':{
exports:'Modernizr'
},
'bootstrap':['jquery']
}
其中’bootstrap’:[‘jquery’]写法是一种简写，表示依赖jquery
map的配置
map:{
'app/api':{
'jquery':'./lib/jquery'
},
'app/api2':{
'jquery':'./lib/jquery2'
}
示例：
requirejs.config({
paths:{
'jquery':'jquery.min'
},
map:{
'api':{
'jquery':'jquery.min'
},
'api2':{
'jquery':'jquery2'
}
}
});
requirejs(['api'],function(api){
// 当使用api2的时候加载的是jquery2.js
})
waitSeconds配置
下载js等待的时间，默认7秒。
如果设置为0，则禁用等待超时。
urlArgs配置
下载文件时，在url后面增加额外的query参数
urlArgs:"_="+(new Date()).getTime()
示例
requirejs.config({
paths:{
'jquery':'jquery.min'
},
map:{
'api':{
'jquery':'jquery.min'
},
'api2':{
'jquery':'jquery2'
}
},
urlArgs:"_="+(new Date()).getTime()
});
requirejs(['api2'],function(api){
})
跨域问题
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="require.js" ></script>
<script type="text/javascript" src="hbk.js"></script>
</head>
<body>
</body>
</html>
在hbk.js中引入jquery,利用jquery的getJSON方法获取本地的一个data.json文件。这种方法存在跨域问题
hbk.js
requirejs.config({
paths:{
'jquery':'jquery.min'
}
});
requirejs(['api'],function(api){
// 请求本地的一个json文件,这种方法存在跨域问题
$.getJSON('data.json',function(res){
console.log(res);
});
})
使用jsonp的方式
data.js
callData({
username:'huangbaokang',
age:30
})
在页面上引人该js，同时在页面上定义callData函数
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
function callData(data){
console.log(data);
}
</script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
</body>
</html>
jquery请求jsonp的格式
$.ajax({
url:'',
dataType:'jsonp',
jsonpCallback:'onloaded',
success:function(data){
console.log(data);
}
})
上面的success函数是jquery封装的，其实在外层全局定义函数也会执行。
function onloaded(user){
console.log(user);
}
requirejs实现jsonp,通过script标签来加载模块
require(['http://www.baidu.com/user'],function(user){
})
请求拿到define定义的模块
define({
username:'huangbaokang',
age:30
})
