一、require优势
使用块级作用域来声明function防止污染全局变量,声明不同js文件之间的依赖,可以按需额、并行、延时载入js库,代码以模块化的方式组织
二、文件引入
<script src="js/require.js" data-main="js/main"></script>
js放到body的末尾,防止js阻塞浏览器渲染,使用async:true异步加载,避免网页失去响应
三、主文件配置
require.config({
baseUrl:"js",//设置根路径
paths:{
hello:"hello",
jquery:["http://libs.baidu.com/jquery/2.0.3/jquery","jquery"]//远程模块没有加载成功,加载本地模块
},//设置路径
shim:{
hello:{
deps:['jquery'],//加载依赖关系数组
exports:"hello"//暴露一个变量
init:function(){
return{
hello:hello,
hello2:hello2
}
}//暴露多个变量
}
}//使用没有函数依赖并初始化函数(paths里找到属于它的模块,这部分忽略)
map:{
'*':{'jquery':'jquery-private'},
'jquery-private':{'jquery':'jquery'}
}//使用这个模块名时最先执行jquery-private,map可以解决同一模块不同版本问题
})
四、无主与有主模块
define('jquery',[],function(){...});//有主模块,引用时不能修改模块名字
define([],function(){...});//无主模块,引用时可以自定义模块名字
定义有主模块主要是为了让系统只载入它们一次
五、内部机制
requireJS加载的每个模块作为script Tag,使用head.appendChild()方法,在模块的定义时,requireJS等到所有的依赖都加载完毕,计算出模块正确调用顺序,然后依次调用。