1、
概述 define 方法：
定义模块 require 方法：
调用模块 AMD 模式小结
配置 require.js：config 方法
插件 优化器 r.js
参考链接
概述
RequireJS 是一个工具库，主要用于客户端的模块管理。
它 可以让客户端的代码分成一个个模块，实现异步或动态加载，
从而提高代码的性能和可维护性。
它的模块管理遵守 AMD 规范（Asynchronous Module Definition）。
RequireJS 的基本思想是，通过 define 方法，
将代码定义为 模块；
通过 require 方法，实现代码的模块加载。
首先，将 require.js 嵌入网页，然后就能在网页中进行模块 化编程了。
<script data-main="scripts/main" src="scripts/require.js"></script>
上面代码的 data-main 属性不可省略，用于指定主代码所在 的脚本文件，
在上例中为 scripts 子目录下的 main.js 文件。
用户自定义的代码就放在这个 main.js 文件中。
define 方法：定义模块
define 方法用于定义模块，RequireJS 要求每个模块放在一 个单独的文件里。
按照是否依赖其他模块，可以分成两种情况讨论。
第一种情
况是定义独立模块，即所定义的模块不依赖其他模块；
第二 种情况是定义非独立模块，即所定义的模块依赖于其他模块。
（1）独立模块
如果被定义的模块是一个独立模块，不需要依赖任何其他模 块，可以直接用 define 方法生成。
1 define({ 2 method1:function(){ 3 4 }, 5 method2:function(){ 6 7 } 8 });
上面代码生成了一个拥有 method1、 method2 两个方法的模 块。
另一种等价的写法是，把对象写成一个函数，该函数的返回 值就是输出的模块。
1 define(function () { 2 return { 3 method1: function () { 4 5 }, method2: function () { 6 7 }, 8 }; 9 });
后一种写法的自由度更高一点，可以在函数体内写一些模块 初始化代码。
值得指出的是，define 定义的模块可以返回任何值，不限于 对象。
（2）非独立模块 如果被定义的模块需要依赖其他模块，
则 define 方法必须采 用下面的格式。
define(['module1','module2'],function(m1,m2){
...
});
define 方法的第一个参数是一个数组，它的成员是当前模块 所依赖的模块。
比如，['module1', 'module2']表示我们定义 的这个新模块依赖于 module1 模块和 module2 模块，
只有 先加载这两个模块，新模块才能正常运行。
一般情况下， module1 模块和 module2 模块指的是，
当前目录下的 module1.js 文件和 module2.js 文件，
等同于写成['./module1', './module2']。
1 define(['module1','module2'],function(m1,m2){ 2 return { 3 method:function(){ 4 m1.methodA(); 5 m2:methodB(); 6 } 7 } 8 });
上面代码表示新模块返回一个对象，
该对象的 method 方法 就是外部调用的接口，
menthod 方法内部调用了 m1 模块的 methodA 方法和 m2 模块的 methodB 方法。
需要注意的是，回调函数必须返回一个对象，
这个对象就是 你定义的模块。
如果依赖的模块很多，参数与模块一一对应的写法非常麻烦。
1 define(['dep1', 'dep2', 'dep3', 'dep4', 'dep5',
2
3 'dep6', 'dep7', 'dep8'], function (dep1, dep6, dep7,...
4 } )
5 ;dep2, dep3, dep4, dep5,
6
7 dep8
8 )
9 {
为了避免像上面代码那样繁琐的写法，RequireJS 提供一种 更简单的写法。
1 define( 2 function (require) { 3 var dep1 = require('dep1'), dep2 = require('dep2'), dep3 = require('dep3'), dep4 = require('dep4'), 4 dep5 = require('dep5'), dep6 = require('dep6'), dep7 = require('dep7'), dep8 = require('dep8'); 5 6 ... 7 } 8 9 }) 10 ;
下面是一个 define 实际运用的例子。
1 define(['math', 'graph'], function (math, graph) { 2 return { 3 plot: function (x, y) { 4 return graph.drawPie(math.randomGrid(x, y)); 5 } 6 } 7 });
上面代码定义的模块依赖 math 和 graph 两个库，然后返回 一个具有 plot 接口的对象。
另一个实际的例子是，通过判断浏览器是否为 IE，而选择加 载 zepto 或 jQuery。
define(('__proto__' in {} ? ['zepto'] : ['jquery']), function ($) {
return $;
});
上面代码定义了一个中间模块，该模块先判断浏览器是否支 持__proto__属性（除了 IE，其他浏览器都支持）
，如果返 回 true，就加载 zepto 库，否则加载 jQuery 库。
require 方法：调用模块
require 方法用于调用模块。它的参数与 define 方法类似。
require(['foo', 'bar'], function (foo, bar) {
foo.doSomething();
});
上面方法表示加载 foo 和 bar 两个模块，
当这两个模块都加 载成功后，
执行一个回调函数。
该回调函数就用来完成具体 的任务。
require 方法的第一个参数， 是一个表示依赖关系的数组。
这 个数组可以写得很灵活，请看下面的例子。
1 require([window.JSON ? undefined : 'util/json2'], function (JSON) { 2 JSON = JSON || window.JSON; 3 console.log(JSON.parse('{ "JSON" : "HERE" }')); 4 });
上面代码加载 JSON 模块时，
首先判断浏览器是否原生支持 JSON 对象。
如果是的，则将 undefined 传入回调函数，
否 则加载 util 目录下的 json2 模块。
require 方法也可以用在 define 方法内部。
define(function (require) {
var otherModule = require('otherModule');
});
下面的例子显示了如何动态加载模块。
1 define(function (require) { 2 var isReady = false, foobar; 3 4 require(['foo', 'bar'], function (foo, bar) { 5 isReady = true; 6 foobar = foo() + bar(); 7 }); 8 9 return {isReady: isReady, foobar: foobar}; 10 });
上面代码所定义的模块，
内部加载了 foo 和 bar 两个模块，
在没有加载完成前，isReady 属性值为 false，
加载完成后就 变成了 true。
因此，可以根据 isReady 属性的值，决定下一 步的动作。
下面的例子是模块的输出结果是一个 promise 对象。
1 define(['lib/Deferred'], function (Deferred) { 2 var defer = new Deferred(); 3 require(['lib/templates/?index.html', 'lib/data/?st ats'], function (template, data) { 4 defer.resolve({template: template, data: data}); 5 }); 6 return defer.promise(); 7 });
上面代码的 define 方法返回一个 promise 对象，
可以在该对 象的 then 方法，指定下一步的动作。
如果服务器端采用 JSONP 模式， 则可以直接在 require 中调 用，
方法是指定 JSONP 的 callback 参数为 define。
require(["http://someapi.com/foo?callback=define"], function (data) {
console.log(data);
});
require 方法允许添加第三个参数，即错误处理的回调函数。
1 require(["backbone"], function (Backbone) { 2 return Backbone.View.extend({/* ... */}); 3 }, 4 function (err) { 5 6 } 7 );
require 方法的第三个参数， 即处理错误的回调函数，
接受一 个 error 对象作为参数。
require 对象还允许指定一个全局性的 Error 事件的监听函数。
所有没有被上面的方法捕获的错误，都会被触发这个监听函 数。
requirejs.onError = function (err) { // ... };
AMD 模式小结
define 和 require 这两个定义模块、调用模块的方法，合称 为 AMD 模式。
它的模块定义的方法非常清晰，不会污染全 局环境，能够清楚地显示依赖关系。
AMD 模式可以用于浏览器环境，
并且允许非同步加载模块，
也可以根据需要动态加载模块。
配置 require.js：config 方法
require 方法本身也是一个对象，它带有一个 config 方法，
用来配置 require.js 运行参数。
config 方法接受一个对象作 为参数。
1 require.config({ 2 paths: { 3 jquery: [ 4 5 '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jqu ery.min.js', 'lib/jquery'] 6 } 7 });
config 方法的参数对象有以下主要成员：
（1）paths
paths 参数指定各个模块的位置。
这个位置可以是同一个服 务器上的相对位置，也可以是外部网址。
可以为每个模块定 义多个位置，
如果第一个位置加载失败， 则加载第二个位置，
上面的示例就表示如果 CDN 加载失败，则加载服务器上的 备用脚本。
需要注意的是，指定本地文件路径时，可以省略 文件最后的 js 后缀名。
require(["jquery"], function($) { // ... });
上面代码加载 jquery 模块，因为 jquery 的路径已经在 paths 参数中定义了，
所以就会到事先设定的位置下载。
（2）baseUrl
baseUrl 参数指定本地模块位置的基准目录，
即本地模块的 路径是相对于哪个目录的。
该属性通常由 require.js 加载时 的 data-main 属性指定。
（3）shim
有些库不是 AMD 兼容的，
这时就需要指定 shim 属性的值。
shim 可以理解成“垫片”， 用来帮助 require.js 加载非 AMD 规 范的库。
1 require.config({ 2 paths: { 3 "backbone": "vendor/backbone", 4 "underscore": "vendor/underscore" 5 }, 6 shim: { 7 "backbone": {deps: ["underscore"], exports: "Backbone"}, 8 "underscore": { 9 exports: "_" 10 } 11 } 12 });
上面代码中的 backbone 和 underscore 就是非 AMD 规范的 库。
shim 指定它们的依赖关系（backbone 依赖于 underscore）
，以及输出符号（backbone 为“Backbone”， underscore 为“_”）。
插件
RequireJS 允许使用插件，加载各种格式的数据。
完整的插 件清单可以查看官方网站。
下面是插入文本数据所使用的 text 插件的例子。
define([ 'backbone', 'text!templates.html' ], function( Backbone, template ){ // ...
});
上面代码加载的第一个模块是 backbone，第二个模块则是 一个文本，用'text!'表示。
该文本作为字符串，存放在回调函 数的 template 变量中。
优化器 r.js
RequireJS 提供一个基于 node.js 的命令行工具 r.js，
用来压 缩多个 js 文件。
它的主要作用是将多个模块文件压缩合并成 一个脚本文件，
以减少网页的 HTTP 请求数。
第一步是安装 r.js（假设已经安装了 node.js）。
npm install -g requirejs
然后，使用的时候，直接在命令行键入以下格式的命令。
node r.js -o <arguments>
<argument>表示命令运行时， 所需要的一系列参数， 比如像 下面这样：
node r.js -o baseUrl=. name=main out=main-built.js
除了直接在命令行提供参数设置，也可以将参数写入一个文 件，
假定文件名为 build.js。
({ baseUrl: ".", name: "main", out: "main-built.js" })
然后，在命令行下用 r.js 运行这个参数文件，就 OK 了，不 需要其他步骤了。
node r.js -o build.js
下面是一个参数文件的范例，假定位置就在根目录下，文件 名为 build.js。
1 ({ 2 appDir: './', 3 baseUrl: './js', 4 dir: './dist', 5 modules: [ 6 7 {name: 'main'}], 8 fileExclusionRegExp: /^(r|build)\.js$/, 9 optimizeCss: 'standard', 10 removeCombined: true, 11 paths: { 12 jquery: 'lib/jquery', 13 underscore: 'lib/underscore', 14 backbone: 'lib/backbone/backbone', 15 backboneLocalstorage: 'lib/backbone/backbone.localStorage', 16 text: 'lib/require/text' 17 }, 18 19 shim: { 20 underscore: {exports: '_'}, 21 backbone: {deps: ['underscore', 'jquery'], exports: 'Backbone'}, 22 backboneLocalstorage: { 23 deps: ['backbone'], exports: 'Store' 24 25 } 26 } 27 })
上面代码将多个模块压缩合并成一个 main.js。
参数文件的主要成员解释如下：
appDir：项目目录，相对于参数文件的位置。
baseUrl：js 文件的位置。
dir：输出目录。
modules：一个包含对象的数组，每个对象就是一个要被优 化的模块。
fileExclusionRegExp：凡是匹配这个正则表达式的文件名， 都不会被拷贝到输出目录。
optimizeCss: 自动压缩 CSS 文件，可取的值包括“none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”。
removeCombined： 如果为 true， 合并后的原文件将不保留在 输出目录中。
paths：各个模块的相对路径，可以省略 js 后缀名。
shim：配置依赖性关系。如果某一个模块不是 AMD 模式定 义的，就可以用 shim 属性指定模块的依赖性关系和输出值。
generateSourceMaps：是否要生成 source map 文件。
更详细的解释可以参考官方文档。
运行优化命令后，可以前往 dist 目录查看优化后的文件。
下面是另一个 build.js 的例子。
1 ({ 2 mainConfigFile: "js/main.js", 3 baseUrl: "js", 4 removeCombined: true, 5 findNestedDependencies: true, 6 dir: "dist", 7 modules: [{ 8 9 name: "main", exclude: ["infrastructure"] 10 }, {name: "infrastructure"}] 11 })
上面代码将模块文件压缩合并成两个文件， 第一个是 main.js （指定排除 infrastructure.js） ， 第二个则是 infrastructure.js。
浙公网安备 33010602011771号