异步模块定义--AMD

AMD

AMD是“asynchronous Module Definition”的缩写，意思就是“异步模块定义”，
它采用异步方式加载模块，模块的加载不影响他后面语句的运行。所有依赖这个模块的语句，
都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD采用require()语句加载模块，它要求两个参数

require([module],callback);

第一个参数[module]，是个数组，里面的成员就是要加载的模块；
第二个参数callback，则是加载成功后的回调函数。

require(['math'],function(math){
    math.add(2,3);
});

目前，主要有两个JavaScript库实现了AMD规范：require.js和curl.js

require.js的作用

当代码比较多，一个js文件不够时，必须分成多个文件，依次加载。但是
多个文件一起加载的时候，浏览器会停止网页渲染，加载的文件越多，网页失去响应的时间就会越长；
其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定放到最后加载
，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js就是为了解决这两个问题。即实现js文件的异步加载，避免网页失去响应；管理模块之间的依赖性，便于代码的编写和维护

require.js的加载

使用require.js的第一步是在官网下载最新版本

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

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

一般为了提高网页性能，将加载的文件放在网页的底部进行加载，另一个方法是将该文件的加载写成下面的额格式

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

asymc属性表明这个问价需要一部加载，避免网页失去响应。IE不支持这个属性，只支持defer。

加载require.js后，下一步就是加载我们自己的代码。假定我们自己的代码文件main.js，也放在js目录下，那么只需写成下面这样就行了

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

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

主模块的写法

上一节中的main.js,我们把它称为“主模块”，意思就是整个网页的入口代码。所有代码都从这儿开始运行，主模块的名字可以自定义

下面介绍怎样写main.js

如果代码不依赖任何其他模块，那么可以直接写入JavaScript代码。但是这样没必要使用require.js了。真正常见的情况是，柱模板依赖于其他模块，这时就要使用AMD规范定义的require()函数。

 //main.js
 require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
    //coding
    })

require()函数接受两个参数，第一个参数是一个数组，表示的是所依赖的模块，上例中的意思是主模块依赖[‘moduleA’,’moduleB’,’moduleC’]这三个模块；第二个参数是一个回调函数，当前指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题

假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写（假定这三个模块与main.js在同一个目录）

 require(['jquery','underscore','backbone'],
 function($,_,Backbone){
    //coding
})

require.js会先加载jquery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中

模块的加载

使用require.config()方法，可以对模块的加载行为进行自定义。

require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
    paths:{
        "jquery":"lib/jquery.min",
        "underscore":"lib/underscore.min",
        "backbone":"lib/backbone.min"
    }
    });

上例也可以通过直接改变基目录（baseUrl)完成

require.config({
    baseUrl:"js/lib",
    paths:{
        "jquery":"jquery.min",
        "underscore":"underscore.min",
        "backbone":"backbone.min"
    }
});

如果某个模块在另一台主机上，也可以指定网址。

AMD模块的写法

require.js加载的模块采用AMD规范。也就是说，模块必须按照AMD的规则来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
define的语法规则如下

define("模块名",["依赖的模块名"]，callback）

其中模块名可以省略，当省略模块名时，其模块的文件名即为该模块名，第二个参数是一个数组，定义了依赖的模块名，第三个参数为回调函数，该回调函数传入所依赖的模块，在回调函数中可以运用依赖模块提供的接口。
假定现有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

//math.js
define(function(){
    var add=function(x,y){
        return x+y;
    };
    return{
        add:add;
    };
    })

其中，return返回的值相当于模块的接口 当其他模块引入该模块后，可以加载return返回的值。加载方法如下：

//main.js
require(['math'],function(math){
    alert(math.add(1,1));
    })

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'],function(myLib){
    function foo(){
        myLib.doSomething();
    }
    return{
        foo:foo;
    }
    });

当require()函数加载上面这个模块时，就会先加载myLib.js文件，加载完全后再执行回调函数