1、引入文件 必须要引入requireJS包,下载地址:http://requirejs.org/ <script src="js/require.js"data-main="js/main"></s
1、引入文件
必须要引入requireJS包,下载地址:http://requirejs.org/
<script src="js/require.js" data-main="js/main"></script>
data-main表示要加载的第一个JS文件,放到网页底部。不放入底部可以这样实现:
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。
2、模块的加载
require.js假定这这个模块与main.js在同一个目录,文件名为jquery.js然后自动加载。
require.config({ baseUrl: "js/lib", paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] , "underscore": "underscore.min" = = ("underscore": "lib/underscore.min") }})
require.config主要是配置加载文件,如果这些模块在其他目录,比如js/lib目录,则有两种写法。一种是逐一指定路径。还有一种就是设置baseUrl改变文件基目录。
3、AMD模块的写法
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
该文件是私有的匿名函数,必须return才能被外部调用。
4、加载非规范的模块
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
如果是非规范的模块,比如没有该模块没有使用AMD模块的写法(define),如果要加载它的话必须要先定义它的特征。
5、主模块的写法
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleA', 'moduleB', 'moduleC'],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
写的不够详细,有待完善。