AMD和requirejs简单学习

Git 地址

require.js 主要解决了两个问题

1. 实现 js 文件的异步加载，避免页面失去响应；
2. 管理模块之间的依赖性，便于代码的编写和维护。

requirejs 的加载

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

async 属性表明这个文件需要异步加载，便面网页失去响应。IE 不支持这个属性，只支持 defer。

加载完 require.js 后，下面要加载自己的代码。data-main 属性的作用是，指定网页程序的主模块。由于 require.js 默认的文件名是 js，所以后缀可以省略。上面代码在加载完 require.js 后，会继续加载 main.js。

主模块的写法

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
});

require 接受两个参数，第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面的模块被加载成功之后，它将被调用。加载的模块会以参数的形式传入该模块，从而回调函数内部就可以使用这些模块。

require 异步加载三个模块，浏览器不会失去响应；它指定的回调函数会在前面三个模块加载完之后再执行。

模块的加载

使用 require.config() 方法，可以对模块的加载行为进行自定义。require.config() 就写在主模块的头部，参数是一个对象，这个对象的 paths 属性指定各个模块的加载路径。

// 假定文件都在 main.js 下
require.config({
　　paths: {
　　　　"jquery": "jquery.min",
       "underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

如果模块在其它文件夹下，可以指定基目录（基目录指定规则在代码中）

// 假定模块在 js/lib 下
require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery.min",
        "underscore": "underscore.min",
        "backbone": "backbone.min"
    }
});

path 也可以是一个网址的形式

require.config({
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
    }
});

AMD 模块的写法

// 写一个 main 模块  math.js
define(function () {
    var add = function (x, y) {
        return x + y;
    };

    return {
        add: add
    };
});


// 加载 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 文件。

加载非规范的模块

理论上，require.js 加载的模块必须是按照 AMD规范、用 define() 函数定义的模块。但实际上，require.js 可以加载非规范的模块。