一、使用原因
1、实现js异步加载,避免网页失去响应;
2、管理模块之间的依赖性,便于代码编写和维护;
二、使用说明
1.加载require.js
加载这个文件,也可能造成网页失去响应。解决办法有两个,一个是把它放在网页底部加载,另一个是写成下面这样:
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
2.主模块
<script src="js/require.js" data-main="js/main"></script>
(1).config
require.config({
baseUrl: "js/lib",//基目录
shim: {//加载没有采用AMD规范的模块 (例如:jquery插件) ,没有用define()定义的模块方法
'jquery.scroll': {
deps: ['jquery'],//依赖于jquery
exports: 'jQuery.fn.scroll'//输出名字
}
},
paths: {//路径
"jquery": ["https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" ,“jquery.min”],
// 远程cdn库没有加载成功,可以加载本地的库
"underscore": "underscore.min"
}
});
3.定义模块
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
//如果这个模块还依赖于其他模块
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
4.加载模块方法
require(['模块名称'], function ( 输出变量 ){
//加载成功后执行
});
require(["jquery","underscore"],function($, ){
$(function(){
.each([1,2,3],alert);
})
})