二、异步加载模块 require.async方法

二、 异步加载模块 require.async方法

在浏览器端使用一个文件的时候要到服务器端加载， 这个加载的过程是异步行为， seajs为了实现这样的功能， 在模块内部提供了require.async，可以实现异步的加载模块文件

• require.async方法:

  • 第一个参数 是模块的依赖集合

    • 可以是一个字符串, 表示的是一个模块文件

    • 可以是一个数组， 表示多个模块文件

  • 第二个参数是回调函数

    • 回调函数中的参数，就是前面加载模块向外暴露的功能（一一对应）

• require.async方法与seajs.use方法一样，但是seajs建议:

  • 在模块外部使用seajs.use方法

  • 在模块的内部使用require.async方法

• require.async方法只能在模块中使用，在模块外是不能被访问的

• require.async方法与seajs.use方法一样不能加载具有id的模块

• 可以通过模块依赖集合加载模块文件从而成功实现async方法加载具有id的模块

define(["js/dom"], function (require, exports, module) {
    // var dom = require("js/dom");
    // console.log(dom);

    // 异步加载
    var dom = require.async("myId", function (dom) {
        // var dom = require.async("myId", function(dom) {
        //    
        // });
        var dom = require.async(["js/dom", "js/color"], function(dom, color) {
            console.log(arguments);
        });
    });
});

require.async与require方法：

• 在条件语句中：

  • 对于require：

    • 在if执行块中

    • 加载并执行模块

    • 在if不执行块中

    • 加载文件，没有执行加载模块

    • Require方法尽量放在最前面，不要写在代码块中

  • 对于require.async：

    • 在if执行快中

    • 加载并执行模块

    • 在if不执行块中

    • 没有加载文件，也没有执行模块

if (true) {
    // 这里会执行
    var dom = require('js/dom');
    console.log(dom);  // 加载文件并执行模块

    require.async('js/dom', function (dom) {
        console.log(dom);  // 加载文件并执行模块
    });

} else {
    // 这里不会执行
    var color = require('js/color');
    console.log(color);  // 加载文件，但不执行模块

    require.async('js/color', function (color) {
        console.log(color);  // 不加载文件，也不执行模块
    });
}

在异步操作中：

对于require

立即加载文件，但是会在异步语句执行之后去执行加载require

对于async

没有立即加载文件，会在异步语句执行之后执行加载require.async

setTimeout(function () {
    // var dom = require("js/dom");
    // console.log(dom);

    require.async("js/dom", function (dom) {
        console.log(dom);
    });
}, 1000);