关于requireJS的同步加载和异步加载

这篇随笔主要记录require('name')和require(['name1','name2'])在同步和异步加载使用的区别

1、require('name')同步加载模块的形式

 

define(function(require, exports, module) {
        var a = require('a'),
            b = require('b');

        //Return the module value
        return function () {};
    }
);

 

(1)首先看上面的代码，使用了var a = require('a')这样的写法，这是一种同步调用模块的写法(因为加载a模块后直接返回而不必放在回调函数中使用), 说明此时在该define函数作用域里，模块a已被加载装配完毕，并可以通过require函数返回a模块，注意此时require函数中使用的参数是模块名而非数组；

 

(2)其次，该define函数是一种commonJS的简化写法，回调函数前并未声明依赖关系的数组，即并非define(['require','exports','module'],function(require, exports, module) {});这样的写法。此时require会使用

Function.prototype.toString() 对回调函数进行解析，并通过解析发现require('a')和require('b')。由于在调用回调函数之前，require会预先加载模块的所有依赖，所以在调用回调函数前会预先装配a模块和b模块，因此在调用require('a')和require('b')时，a和b模块已经提前装配好了；

 

(3)此外还需要注意的是，当define函数声明依赖关系数组时，当需要在回调函数使用var a = require('a')这样的写法时必须要将所需的模块a添加到依赖关系数组中，因为当define包含依赖关系数组时，require会将依赖关系数组中的依赖视为回调函数所需的所有依赖，即上面的代码就应改为如下形式，否则会报依赖关系没有加载的错误:

define(['require','exports','module','a','b'],function(require, exports, module) {
        var a = require('a');
            b = require('b');

        //Return the module value
        return function () {};
    }
);

 

(4) 由于使用require('name')的原理是将所需的依赖预先加载然后再能进行调用，所以不能再全局作用域中使用var a = require('a')这样的写法，这样的写法必须包含在define或require([...],function(){})的回调函数中；

 

(5)由于使用commonJS写法时，require检测依赖关系的机制是通过调用Function.prototype.toString() ，所以不能使用以下写法，否则会报依赖关系没有加载的错误:

define(function(require, exports, module) {
        var a = getRequireModule(require, 'a');
              b = getRequireModule(require, 'b');

        //Return the module value
        return function () {};
    }
);

function getRequireModule(require, moduleName) {
    return require(moduleName);  
}

 

2、 require(['name1', 'name2'])异步加载模块的形式

(1)通过require([...])形式获取模块的依赖，和上面不同的是，调用require函数使用的参数是数组而非模块名，这种调用方式是异步调用的方式，即不能使用var a = require(['a'])这样的方式同步返回一个模块，require(['a'])返回的是一个函数，而非a模块向外部暴露的接口，应该在回调函数中使用模块a，即如下的方式才是正确的:

define(['a'], function(a) {
   console.log(a); 
})

 

(2)和require('a')的另一个区别是，由于require(['a'])是一种异步依赖模块的方法，所以在使用commonJS简化的define写法时，加载依赖关系时不会检测到['a']中所包含的a模块

 

(3)由于异步加载的关系，所以在使用时仍应注意有两种情况:

     1、当依赖的模块遵循AMD规范时，该模块将会被包含在define函数中，会拥有自己的作用域和向外部暴露的接口，需要通过回调函数才能使用这些模块向外提供的接口；

     2、当依赖的模块不遵循AMD规范时，该模块被加载后，由于模块中的js代码具有全局作用域，理论上能够在外部而不必在回调函数中使用模块的接口，但是由于模块是异步加载的，在使用依赖模块提供的接口时，在外部无法保证模块是否已加载完毕，所以仍然应在回调函数中使用依赖模块。

 

（4）当require调用需要使用回调函数时，正确的写法应该是:

    require(['dependency'], function (dependency) {});

           写成require('dependency', function (dependency) {});   是错误的