（4）javascript模块化之AMD规范

1.引言

      在上一篇博客中我们提到，虽然我们自己实现了模块化编程，但是还是有两个严重的缺点

• js文件是同步下载，当我们js文件过大时会出现页面假死现象
• 实现模块化编程我们缺少一个规范，就是告诉大家模块应该怎么去写。

      当前比较出名的模块化规范有CMD规范，CommonJS规范，AMD规范，但是在此处我们主要去介绍AMD规范，AMD规范的全称为：Asynchronous Module Definition（异步模块定义），名称告诉我们两个信息，1 异步去加载模块，2.规定了模块定义的规范

2.AMD规范

      在AMD规范中有两个全局函数，一个是require，一个是define，其中require用于加载模块，define用于定义模块，require函数中有两个参数，第一个是模块的名称数组，第二个是加载模块成功之后的回调函数。用法为：require([module], callback)比如：

    require(['dojo/dom'], function (dom) {

    　　　　dom.byId("btn");

    　　});

当前实现了AMD规范函数库主要有：dojo，requirejs,在此处我们主要用dojo为例，简单的介绍一下AMD规范。

• 首先我们加载dojo.js文件(在线的CDN)

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

• 我们利用define定义一个模块

define(function(){
    return {
        deal: function () {
           alert(10);
        }
    };
});

我们定义了一个模块，其中有一个deal方法

• 如果我们想require引入我们的模块，首先我们需要配置一下，告诉dojo，你js模块所在的位置，所以我们使用dojoConfig来配置

var dojoConfig = {
            packages: [{
                name: "js",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
            }]
        };

注意dojoConfig必须在dojo.js加载之前，因为dojo.js要读取dojoConfig的配置信息

• 利用require来加载模块

    require(["js/myModule","dojo/domReady!"],function(myModule){
            myModule.deal()
        })

注意domReady是一个插件，如果加载这个插件，也就意味着等待dom渲染结束之后在执行require函数，类似与window.onload事件

3.dojo简单介绍

前面简单的介绍了一个AMD规范，那么现在我们以模块的思想去看Dojo，其实Dojo便是用AMD规范创建了一系列的模块（一系列的js文件），然后将相似的模块进行分类，然后分为:dojo,dojox,dijit等一些列的子部分，结合我们下载的图片来看：

现在大家有点理解AMD规范了吗？