require.js介绍以及用法

随着网页的交互逻辑越累越复杂，js语言本身不完善的继承机制与越来越庞大的js代码之间的矛盾越来越突出，于是，js模块化编程应运而生。

目前，通行的Javascript模块规范共有两种：CommonJS和 AMD。

1.CommonJS是随着node.js发展起来的，示例如下：

//Math.js
var add = function(x,y){
    return x+y;
}
exports.add = add;
//Math2.js
 var add = function(x,y){
    return x + y;
}
module.exports = add;

//index.js
 var MyMath = require('./Math.js');
 var MyMath2 = require('./Math2.js');

 //使用module.exports 与 exports导出文件的不同
 var result = MyMath.add(2,3);

 console.log(result);
 console.log('---------------------')

 var result2 = MyMath2(2,3);
 console.log(result2);

CommonJS是同步的，不适用与浏览器端，会造成浏览器的假死。

2.浏览器端可以使用遵循AMD（Asynchronous Module Definition）规范的require.js。
它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require(['math'], function (math) {

　math.add(2, 3);

});

2.1 require.js解决的问题：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

2.2 require.js的加载

使用require.js的第一步，是先去官方网站下载最新版本。

下载后，假定把它放在js子目录下面，就可以加载了。

<script src="js/require.js"></script>

有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

<script src="js/require.js" defer async="true" ></script>

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

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

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

2.3主模块的加载

// main.js

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　// some code here

});

2.4模块的加载

    require.config({

　　　　paths: {

　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"

　　　　}

　　});

require.config({

　　　　baseUrl: "js/lib",

　　　　paths: {

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

require.config({

　　　　paths: {

　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

　　　　}

　　});

1. AMD模块的写法

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

4.加载非规范的模块
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({

　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},

　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}

　　});