官方网址：http://www.requirejs.org/
中文版翻译：http://makingmobile.org/docs/tools/requirejs-api-zh/
插件作用：对于JS模块文件进行管理。动态载入。项目完毕时合并压缩模块。
一、基本使用方法：
1、外链文件。data-main中为外链的文件名称，无需加后缀：
<script data-main="js/main" src="require.js"></script>
2、页面直接写入代码（可将data-main设为require.config配置文件）：
require.config({
baseUrl:'./js',
paths: {
"a": "other/a",
"b": "other/b",
"c": "some/c",
"d": "some/d"
},
waitSeconds: 150
});
//依赖载入（外层先载入）
require(["a","c","d","b"], function() {
a();
c();
d();
b();
});
二、语法摘要（具体语法參见官方API）
1、引用插件内函数
Test.js:
define({
test:function(msg) {
alert("test" + msg);
},
userName: "111"
});
Requirjs引用：
require(["test"], function (a) { //a按顺序相应载入的文件
a.test("asdf");
});
2、require函数外部调用内部定义的函数，需等require内文件都载入完毕了才有效
3、文件依赖载入(当前插件依赖jquery,需等jquery载入完毕后才会运行)
define(['jquery'],function($){
var returnVar = {
userName: "111",
aa: function(){}
}
return returnVar;
});
4、插件引用外部函数
外部函数：function callE(msg){
alert('e'+msg)
}
function callF(msg){
alert('f'+msg)
}
Require配置：
require.config({
baseUrl:'./js',
paths: {
"e": "other/e",
"f": "other/f"
},
config:{ //外部函数赋值
'e': { //e指相应载入的模块名
size: 'eee',
cal:callE
},
'f':{
size: 'fff',
cal:callF
}
},
waitSeconds: 150
})
插件引用：
define(function(require, exports, module){
function aa(){
module.config().cal('123e');
}
var m={
aa:aa
}
return m;
})
5、jsonp服务。JSONP的callback參数为"callback"，因此"callback=define"告诉API将JSON响应包裹到一个"define()"中。
require(["http://example.com/api/data.json?callback=define"],
function (data) {
//data将作为此条JSONP data调用的API响应
console.log(data);
}
);
JSONP的这样的使用方法应仅限于应用的初始化中。
一旦JSONP服务超时，其它通过define()定义了的模块也可能得不得运行，错误处理不是十分健壮。
6、shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
requirejs.config({
shim: {
'jquery.colorize': {
deps: ['jquery'],
exports: 'jQuery.fn.colorize'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
},
'backbone.layoutmanager': {
deps: ['backbone']
exports: 'Backbone.LayoutManager'
}
}
});
7、paths备错配置
requirejs.config({
//为了在IE中正确检错，强制define/shim导出检測
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//若CDN载入错。则从例如以下位置重试载入
'lib/jquery'
]
}
});
8、DOM Ready
在DOM载入完毕后运行requeire内代码，domReady插件需另外载入。
require(['domReady!'], function (doc) {
//本函数会在DOM ready时调用。
//注意'domReady!'的值为当前的document
});
9、错误捕获
requirejs.onError = function (err) {
console.log(err.requireType);
if (err.requireType === 'timeout') {
console.log('modules: ' + err.requireModules);
}
throw err;
};
三、r.js模块合并压缩
需在文件夹中放置r.js,同一时候有一个合并规则配置文件
比如build.js:
({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
{
name: 'config' //页面中data-main引入文件
exclude:['other/b'] //不合并压缩的文件
},{
name: 'config2'
},{
name: 'main'
}
],
fileExclusionRegExp: /^(r|build).js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
a:'empty:', //empty:指不被压缩合并，单独请求
b:'other/b',
c:'some/c',
d:'some/d',
e:'other/e',
f:'other/f'
}
})
r.js依赖于nodejs环境，用法：进入文件所在文件夹，执行node r.js -o build.js
四、项目实例
项目背景：VC内嵌网页项目，需与VC进行简单数据交互
代码设计：
1、 独立文件配置文件路径，在require.js之前独立引用载入
Config.js:
//将配置作为全局变量"require"在require.js载入之前进行定义。它会被自己主动应用。以下的演示样例定义的依赖会在require.js,一旦定义了require()之后即被载入 var require={ baseUrl:'./js', paths: { "a": "other/a", "b": "other/b", "c": "some/c", "d": "some/d" }, waitSeconds: 150 }
2、 页面引入文件（模块文件使用代码）
<scriptdata-main="test6" src="require.js"></script>
3、 按功能划分模块及文件夹
4、 提取接口。
把须要引用的VC定义的函数。在config.js里通过config.cal()又一次赋值。
提供给VC调用的函数（大部分为事件运行之后的回调），在config.js定义一个初始化对象。然后在各模块里进行对应赋值，如初始化对象：Var vcCallback={
refreshList:function(){}, //刷新列表数据
refreshUserInfo:function(){} //刷新用户数据
}
在require()代码里对其重写，如：vcCallback.refreshList=createView;