requireJs笔记
官方网址：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;