RequireJS学习总结

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。
RequireJS的基本思想是：通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。
首先下载require.js文件传送门
然后，将require.js嵌入网页，然后就能在网页中进行模块化编程了。

<script data-main="scripts/main" src="scripts/require.js"></script>

上面的scripts/main是我们脚本的入口文件main.js

define方法：定义模块

define方法用于定义模块，RequireJS要求每个模块放在一个单独的文件里。
按照是否依赖其他模块，可以分成两种情况:

• 定义独立模块，即所定义的模块不依赖其他模块
  示例：

define({    method1: function() {},    method2: function() {},});

上面代码生成了一个拥有method1、method2两个方法的模块
或者这样写：把对象写成一个函数，该函数的返回值就是输出的模块。

define(function () {    return {        method1: function() {},        method2: function() {},    };});

一般采用后一种写法，这样可以在函数体内写一些模块初始化代码。
此外，define定义的模块可以返回任何值，不限于对象。
- 定义非独立模块，即所定义的模块依赖于其他模块

define(['module1', 'module2'], function(m1, m2) {   return {        method: function() {            m1.methodA();            m2.methodB();        }    };});

define方法的第一个参数是一个数组，它的成员是当前模块所依赖的模块。比如，[‘module1’, ‘module2’]表示我们定义的这个新模块依赖于module1模块和module2模块，只有先加载这两个模块，新模块才能正常运行。一般情况下，module1模块和module2模块指的是，当前目录下的module1.js文件和module2.js文件，等同于写成[‘./module1’, ‘./module2’]。
define方法的第二个参数是一个函数，当前面数组的所有成员加载成功后，它将被调用。它的参数与数组的成员一一对应，比如function(m1, m2)就表示，这个函数的第一个参数m1对应module1模块，第二个参数m2对应module2模块。这个函数必须返回一个对象，供其他模块调用。
上面代码表示新模块返回一个对象，该对象的method方法就是外部调用的接口，menthod方法内部调用了m1模块的methodA方法和m2模块的methodB方法。
需要注意的是:回调函数必须返回一个对象，这个对象就是你定义的模块。

如果依赖的模块很多，参数与模块一一对应的写法非常麻烦。RequireJS提供一种更简单的写法。

define(    function (require) {        var dep1 = require('dep1'),            dep2 = require('dep2'),            dep3 = require('dep3'),            dep4 = require('dep4'),            dep5 = require('dep5'),            dep6 = require('dep6'),            dep7 = require('dep7'),            dep8 = require('dep8');            ...    }});

Demo:通过判断浏览器是否为IE，而选择加载zepto或jQuery。

define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) {    return $;});

IE浏览器不支持proto属性

require方法：调用模块

require方法用于调用模块。它的参数与define方法类似。

require(['foo', 'bar'], function ( foo, bar ) {        foo.doSomething();});

上面方法表示加载foo和bar两个模块，当这两个模块都加载成功后，执行一个回调函数。该回调函数就用来完成具体的任务。
require方法的第一个参数，是一个表示依赖关系的数组。
require方法也可以用在define方法内部。
动态加载模块：

define(function ( require ) {    var isReady = false, foobar;    require(['foo', 'bar'], function (foo, bar) {        isReady = true;        foobar = foo() + bar();    });    return {        isReady: isReady,        foobar: foobar    };});

上面代码所定义的模块，内部加载了foo和bar两个模块，在没有加载完成前，isReady属性值为false，加载完成后就变成了true。因此，可以根据isReady属性的值，决定下一步的动作。

服务器端采用JSONP模式

如果服务器端采用JSONP模式，则可以直接在require中调用，方法是指定JSONP的callback参数为define。

require( [     "http://someapi.com/foo?callback=define"], function (data) {    console.log(data);});

require方法允许添加第三个参数，即错误处理的回调函数。

require(    [ "backbone" ],     function ( Backbone ) {        return Backbone.View.extend({ /* ... */ });    },     function (err) {        // ...    });

require方法的第三个参数，即处理错误的回调函数，接受一个error对象作为参数。
require对象还允许指定一个全局性的Error事件的监听函数。所有没有被上面的方法捕获的错误，都会被触发这个监听函数。

requirejs.onError = function (err) {    // ...};

小结

define和require这两个定义模块、调用模块的方法，合称为AMD模式。它的模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。
AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。

配置require.js：config方法

require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。config方法接受一个对象作为参数。
config方法的参数对象有以下主要成员：
- baseUrl ：指定本地模块位置的基准目录，即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。
- paths ： path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的，除非该path设置以”/”开头或含有URL协议（如http:）。
paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置，也可以是外部网址。可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置，上面的示例就表示如果CDN加载失败，则加载服务器上的备用脚本。需要注意的是，指定本地文件路径时，可以省略文件最后的js后缀名。

 require.config({    baseUrl: "/another/path",    paths: {        "some": "some/v1.0"    }  });  require( ["some/module", "my/module", "a.js", "b.js"],    function(someModule,myModule){    }  );

“my/module”的标签src值是”/another/path/my/module.js”。当加载纯.js文件(依赖字串以/开头，或者以.js结尾，或者含有协议)，不会使用baseUrl。因此a.js及b.js都在包含上述代码段的HTML页面的同目录下加载。
注意：如未显式设置baseUrl，则默认值是加载require.js的HTML所处的位置。如果用了data-main属性，则该路径就变成baseUrl。
在上述的配置下，”some/module”的script标签src值是：

"/another/path/some/v1.0/module.js"

• shim
  有些库不是AMD兼容的，这时就需要指定shim属性的值。shim可以理解成“垫片”，用来帮助require.js加载非AMD规范的库。

require.config({    paths: {        "backbone": "vendor/backbone",        "underscore": "vendor/underscore"    },    shim: {        "backbone": {            deps: [ "underscore" ],            exports: "Backbone"        },        "underscore": {            exports: "_"        }    }});

上面代码中的backbone和underscore就是非AMD规范的库。shim指定它们的依赖关系（backbone依赖于underscore），以及输出符号（backbone为“Backbone”，underscore为“_”）。

优化器r.js

RequireJS提供一个基于node.js的命令行工具r.js，用来压缩多个js文件。它的主要作用是将多个模块文件压缩合并成一个脚本文件，以减少网页的HTTP请求数。
第一步是安装r.js（假设已经安装了node.js）。

npm install -g requirejs

然后，使用的时候，直接在命令行键入以下格式的命令。

node r.js -o <arguments>

arguments表示命令运行时，所需要的一系列参数，比如像下面这样：

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。

({    appDir: './',    baseUrl: './js',    dir: './dist',    modules: [        {            name: 'main'        }    ],    fileExclusionRegExp: /^(r|build)\.js$/,    optimizeCss: 'standard',    removeCombined: true,    paths: {        jquery: 'lib/jquery',        underscore: 'lib/underscore',        backbone: 'lib/backbone/backbone',        backboneLocalstorage: 'lib/backbone/backbone.localStorage',        text: 'lib/require/text'    },    shim: {        underscore: {            exports: '_'        },        backbone: {            deps: [                'underscore',                'jquery'            ],            exports: 'Backbone'        },        backboneLocalstorage: {            deps: ['backbone'],            exports: 'Store'        }    }})

上面代码将多个模块压缩合并成一个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的例子：

({    mainConfigFile : "js/main.js",    baseUrl: "js",    removeCombined: true,    findNestedDependencies: true,    dir: "dist",    modules: [        {            name: "main",            exclude: [                "infrastructure"            ]        },        {            name: "infrastructure"        }    ]})

上面代码将模块文件压缩合并成两个文件，第一个是main.js（指定排除infrastructure.js），第二个则是infrastructure.js。