加载JavaScript文件
index.html
<script data-main="scripts/main.js" src="scripts/require.js"></script>
RJ（require.js）是一个以相对于baseUrl的地址来加载所有的代码。
RJ使用<script>上的自定义属性data-main来启动脚本加载过程，例如上述的scripts下main.js文件会作为主模块第一个被RJ加载。
配置
main.js
require.config({
// baseUrl为所有模块查找的根路径。当加载纯.js文件（‘/开头、.js结尾、含有协议’）时不会使用baseUrl。
// baseUrl不设置时默认为main.js所在路径
// baseUrl设置时，相对于RJ所在的HTML页面的路径
baseUrl: 'js/lib',
// 用于映射那些不直接放置在baseUrl下的模块名
// 起始位置是相对于baseUrl的，除非以‘/’开头或含有URL协议（如：http）
paths: {
app: '../app'
}
})
// 各模块是异步加载的
require(['module1','module2','module3'], function(m1,m2,m3) {
// 这个函数在所有依赖模块被加载完成后才调用执行
})
当然，data-main不是必要的。
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
})
require(['module1','module2','module3'], function(m1,m2,m3) {})
</script>
或者
<sctipt>
var require = {
deps: ['module1','module2','module3'],
callback: function(m1,m2,m3) {}
}
</script>
<script src="scripts/require.js"></script>
这时候baseurl为引用RJ的HTML页面所在的路径。
shim：为那些没有使用define()来声明依赖关系、设置模块的“浏览器全局变量注入”型脚本做依赖和导出配置。
requirejs.config({
shim: {
'backbone': {
deps: ['underscore','jquery'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
// this 被赋值为global对象
// 依赖模块可以通过参数传进去
// 返回值作为global.Foo的值
init: function(bar) {
return this.Foo.noConflict()
}
}
}
})
存在而不导出任何模块变量的模块们，shim配置可简单的设为依赖数组。
requirejs.config({
shim: {
'jquery.colorize': ['jquery'],
'jquery.scroll': ['jquery'],
'backbone.layoutmanager': ['backbone']
}
})
定义模块
简单的值对
define({
color: 'black',
sieze: 'unsize'
})
函数是定义
// 自定义模块名会使模块不具备移植性
// 依赖模块可在前面加“./”来引入统一路径下模块
define('myDefineModule', ['module1'], function(m1) {
// 返回值也可以是个函数
return {
color: 'black',
size: 'unsize'
}
})
模块的引用
require(['module1','module2','module3'], function(m1,m2,m3) {})
