<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
首页index.html只需要引入requireJs库文件,并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置,
main.js内容如下:main.js这个文件做的事情就是:由requirejs异步载入所有文件
require.config({
paths:{
//一些库文件
'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
//js文件
'bootstrap': "../scripts/bootstrap",
'app': "../scripts/app",
'router': "../scripts/router"
.....以及其他的js文件,这里省略
},
shim:{
'angular':{
exports:'angular'
},
'angular-route':{
deps:['angular'],
exports: 'angular-route'
}
},
deps:['bootstrap'],
urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存,调试用
});
requirejs一共提供了两个全局变量:
1. requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
声明模块及js文件地址
2. define: requirejs的方式来定义模块:
define([], function() {
return {
hello: function() {
alert("hello, app~");
}
}
});
普通的方式定义了一个函数,我们能在requirejs里使用它吗?
暴露单个变量exports:
可以把某个非requirejs方式的代码中的某一个全局变量暴露出去,当作该模块以引用。
shim: {
hello: { exports: 'hello' }
}
暴露多个变量:init
这时就不能再用 exports 了,必须换成 init 函数:
shim: {
hello: {
init: function() {
return {
hello1: hello1,
hello2: hello2
}
}
}
}
当exports与init同时存在的时候, exports将被忽略。
有主的模块(不能重新起模块名)
它们声明为有主的,那么所有的模块只能使用同一个名字引用它们,这样系统就只会载入它们一次。
声明了一个确定的模块名。define('jquery', [], function() { ... });
无主的模块
define([...], function() {
...
});
我们可以在 requirejs.config 里,使用任意一个模块名来引用它