这篇随笔主要记录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) {});
是错误的