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配置文件）：

[javascript]  view plain copy

1. require.config({    
2.     baseUrl:'./js',  
3.     paths: {    
4.         "a": "other/a",    
5.         "b": "other/b",    
6.         "c": "some/c",    
7.         "d": "some/d"  
8.     },  
9.     waitSeconds: 150  
10. });  
11.   
12. //依赖加载（外层先加载）  
13. require(["a","c","d","b"], function() {    
14.         a();  
15.         c();  
16.         d();  
17.         b();  
18. });  

二、语法摘要（详细语法参见官方API）

1、引用插件内函数

Test.js:

[javascript]  view plain copy

1. define({  
2.     test:function(msg) {  
3.         alert("test" + msg);  
4.     },  
5.     userName: "111"  
6. });  

Requirjs引用：

[javascript]  view plain copy

1. require(["test"], function (a) {  //a按顺序对应加载的文件  
2.     a.test("asdf");  
3. });  

2、require函数外部调用内部定义的函数，需等require内文件都加载完成了才有效

3、文件依赖加载(当前插件依赖jquery,需等jquery加载完成后才会执行)

[javascript]  view plain copy

1. define(['jquery'],function($){  
2.     var returnVar = {  
3.         userName: "111",  
4.         aa: function(){}  
5.     }  
6.     return returnVar;  
7. });  

4、插件引用外部函数

外部函数：

[javascript]  view plain copy

1. function callE(msg){  
2.     alert('e'+msg)  
3. }  
4. function callF(msg){  
5.     alert('f'+msg)  
6. }  

Require配置：

[javascript]  view plain copy

1. require.config({  
2.     baseUrl:'./js',  
3.     paths: {    
4.         "e": "other/e",    
5.         "f": "other/f"  
6.     },  
7.     config:{  //外部函数赋值  
8.         'e': {   //e指对应加载的模块名  
9.             size: 'eee',  
10.             cal:callE  
11.         },  
12.         'f':{  
13.             size: 'fff',  
14.             cal:callF  
15.         }  
16.     },  
17.     waitSeconds: 150  
18. })  

插件引用：

[javascript]  view plain copy

1. define(function(require, exports, module){  
2.       
3.     function aa(){  
4.         module.config().cal('123e');  
5.     }  
6.     var m={  
7.         aa:aa  
8.     }  
9.     return m;  
10. })  

5、jsonp服务，JSONP的callback参数为"callback"，因此"callback=define"告诉API将JSON响应包裹到一个"define()"中。

[javascript]  view plain copy

1. require(["http://example.com/api/data.json?callback=define"],  
2.     function (data) {  
3.         //data将作为此条JSONP data调用的API响应  
4.         console.log(data);  
5.     }  
6. );  

JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时，其他通过define()定义了的模块也可能得不得执行，错误处理不是十分健壮。

6、shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

[javascript]  view plain copy

1. requirejs.config({  
2.     shim: {  
3.         'jquery.colorize': {  
4.             deps: ['jquery'],  
5.             exports: 'jQuery.fn.colorize'  
6.         },  
7.         'jquery.scroll': {  
8.             deps: ['jquery'],  
9.             exports: 'jQuery.fn.scroll'  
10.         },  
11.         'backbone.layoutmanager': {  
12.             deps: ['backbone']  
13.             exports: 'Backbone.LayoutManager'  
14.         }  
15.     }  
16. });  

7、paths备错配置

[javascript]  view plain copy

1. requirejs.config({  
2.     //为了在IE中正确检错，强制define/shim导出检测  
3.     enforceDefine: true,  
4.     paths: {  
5.         jquery: [  
6.            'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',  
7.             //若CDN加载错，则从如下位置重试加载  
8.             'lib/jquery'  
9.         ]  
10.     }  
11. });  

8、DOM Ready

在DOM加载完成后执行requeire内代码，domReady插件需另外加载。

[javascript]  view plain copy

1. require(['domReady!'], function (doc) {  
2.     //本函数会在DOM ready时调用。  
3.     //注意'domReady!'的值为当前的document  
4. });  

9、错误捕获

[javascript]  view plain copy

1. requirejs.onError = function (err) {  
2.     console.log(err.requireType);  
3.     if (err.requireType === 'timeout') {  
4.         console.log('modules: ' + err.requireModules);  
5.     }  
6.     throw err;  
7. };  

三、r.js模块合并压缩

需在目录中放置r.js,同时有一个合并规则配置文件

例如build.js:

[javascript]  view plain copy

1. ({  
2.     appDir: './',  
3.     baseUrl: './js',  
4.     dir: './dist',  
5.     modules: [  
6.         {  
7.             name: 'config'         //页面中data-main引入文件  
8.             exclude:['other/b']    //不合并压缩的文件  
9.         },{  
10.             name: 'config2'  
11.         },{  
12.             name: 'main'  
13.         }  
14.     ],  
15.     fileExclusionRegExp: /^(r|build)\.js$/,  
16.     optimizeCss: 'standard',  
17.     removeCombined: true,  
18.     paths: {  
19.         a:'empty:',     //empty:指不被压缩合并，单独请求  
20.         b:'other/b',  
21.         c:'some/c',  
22.         d:'some/d',  
23.         e:'other/e',  
24.         f:'other/f'  
25.     }  
26. })  

r.js依赖于nodejs环境，使用方法：进入文件所在目录，运行node r.js -o build.js

四、项目实例

项目背景：VC内嵌网页项目，需与VC进行简单数据交互

代码设计：

1、  独立文件配置文件路径，在require.js之前独立引用加载

Config.js:

[javascript]  view plain copy

1. //将配置作为全局变量"require"在require.js加载之前进行定义，它会被自动应用。下面的示例定义的依赖会在require.js,一旦定义了require()之后即被加载  
2. var require={    
3.     baseUrl:'./js',  
4.     paths: {    
5.         "a": "other/a",    
6.         "b": "other/b",    
7.         "c": "some/c",    
8.         "d": "some/d"   
9.     },  
10.     waitSeconds: 150  
11. }  

2、  页面引入文件（模块文件使用代码）

<scriptdata-main="test6" src="require.js"></script>

3、  按功能划分模块及目录

4、  提取接口。

把需要引用的VC定义的函数，在config.js里通过config.cal()重新赋值。

提供给VC调用的函数（大部分为事件执行之后的回调），在config.js定义一个初始化对象，然后在各模块里进行相应赋值，如初始化对象：

[javascript]  view plain copy

1. Var vcCallback={  
2.     refreshList:function(){},   //刷新列表数据  
3.     refreshUserInfo:function(){}   //刷新用户数据  
4. }  

在require()代码里对其重写，如：vcCallback.refreshList=createView;