AMD

基于AMD(AsynchronousModuleDefinition)的JavaScript设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS等纷纷在其最新版本中加入了对AMD的支持。本文介绍的是另一款较为精简的RequireJS框架,既想使用AMD的特性又不想引入一个庞大的库的开发人员,不妨试试RequireJS。RequireJS可以帮助用户异步按需的加载JavaScript代码,并解决JavaScript模块间的依赖关系,提升了前端代码的整体质量和性能。

AMD简介

前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了,这些框架都在尝试着解决一些前端开发中的共性问题,但是实现又不尽相同。在这个背景下,CommonJS社区诞生了,为了让前端框架发展的更加成熟,CommonJS鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD(AsynchronousModuleDefinition)就是其中的一个规范。

传统JavaScript代码的问题

让我们来看看一般情况下JavaScript代码是如何开发的:通过<script>标签来载入JavaScript文件,用全局变量来区分不同的功能代码,全局变量之间的依赖关系需要显式的通过指定其加载顺序来解决,发布应用时要通过工具来压缩所有的JavaScript代码到一个文件。当Web项目变得非常庞大,前端模块非常多的时候,手动管理这些全局变量间的依赖关系就变得很困难,这种做法显得非常的低效。

AMD的引入

AMD提出了一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的JavaScript代码好处很明显,各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载JavaScript代码,使Web页面上其他不依赖JavaScript代码的UI元素,如图片、CSS以及其他DOM节点得以先加载完毕,Web页面加载速度更快,用户也得到更好的体验。

CommonJS的AMD规范中只定义了一个全局的方法,如清单1所示。

清单1.AMD规范

1

2

define(id?,dependencies?,factory);

该方法用来定义一个JavaScript模块,开发人员可以用这个方法来将部分功能模块封装在这个define方法体内。

id表示该模块的标识,为可选参数。

dependencies是一个字符串Array,表示该模块依赖的其他所有模块标识,模块依赖必须在真正执行具体的factory方法前解决,这些依赖对象加载执行以后的返回值,可以以默认的顺序作为factory方法的参数。dependencies也是可选参数,当用户不提供该参数时,实现AMD的框架应提供默认值为[“require”,”exports”,“module”]。

factory是一个用于执行改模块的方法,它可以使用前面dependencies里声明的其他依赖模块的返回值作为参数,若该方法有返回值,当该模块被其他模块依赖时,返回值就是该模块的输出。

CommonJS在规范中并没有详细规定其他的方法,一些主要的AMD框架如RequireJS、curl、bdload等都实现了define方法,同时各个框架都有自己的补充使得其API更实用。

RequireJS简介

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

目前最新版本的RequireJS1.0.8在IE6+、Firefox2+、Safari3.2+、Chrome3+、Opera10+上都工作的很好。

实战RequireJS

在Web应用中使用RequireJS

在RequireJS官方主页上下载最新的版本的require.js,放到Web页面中。示例的Web项目结构图1所示。

图1.Web项目结构

通过在index.html中加入一个<script>标签直接引入require.js即可。

RequireJS功能初探

RequireJS使用起来非常的简单,但是这些功能确是在Web前端开发中非常重要的,下面我们来逐一看看如何使用RequireJS的各项功能。

使用RequireJS加载JavaScript文件

即使您的Web前端由于种种历史原因还没有打算进行模块化的设计,RequireJS作为JavaScript文件的加载器,还是可以帮助您来完成异步非阻塞的文件加载。

如清单2所示,有两个JavaScript文件a.js和b.js,里面各自定义了myFunctionA和myFunctionB两个方法,通过下面这个方式可以用RequireJS来加载这两个文件,在function部分的代码可以引用这两个文件里的方法。

清单2.加载JavaScript文件

1

2

<scriptsrc="./js/require.js"></script>

3

<script>

4

require(["./js/a.js","./js/b.js"],function(){

5

myFunctionA();

6

myFunctionB();

7

});

8

</script>

require方法里的这个字符串数组参数可以允许不同的值,当字符串是以”.js”结尾,或者以”/”开头,或者就是一个URL时,RequireJS会认为用户是在直接加载一个JavaScript文件,否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的baseUrl和paths来加载相应的模块所在的JavaScript文件。配置的部分会在稍后详细介绍。

这里要指出的是,RequireJS默认情况下并没有保证myFunctionA和myFunctionB一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS提供了一个独立的domReady模块,需要去RequireJS官方网站下载这个模块,它并没有包含在RequireJS中。有了domReady模块,清单2的代码稍做修改加上对domReady的依赖就可以了。

清单3.页面加载后执行JavaScript

1

2

<scriptsrc="./js/require.js"></script>

3

<script>

4

require(["domReady!","./js/a.js","./js/b.js"],function(){

5

myFunctionA();

6

myFunctionB();

7

});

8

</script>

执行清单3的代码后,通过Firebug可以看到RequireJS会在当前的页面上插入为a.js和b.js分别声明了一个<script>标签,用于异步方式下载JavaScript文件。async属性目前绝大部分浏览器已经支持,它表明了这个<script>标签中的js文件不会阻塞其他页面内容的下载。

清单4.RequireJS插入的<script>

1

2

<scripttype="text/javascript"charset="utf-8"async=""data-requirecontext="_"

3

data-requiremodule="js/a.js"src="js/a.js"></script>

使用RequireJS来定义JavaScript模块

这里的JavaScript模块与传统的JavaScript代码不一样的地方在于它无须访问全局的变量。模块化的设计使得JavaScript代码在需要访问”全局变量”的时候,都可以通过依赖关系,把这些”全局变量”作为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或者函数,有效的避免大量而且复杂的命名空间管理。

如同CommonJS的AMD规范所述,定义JavaScript模块是通过define方法来实现的。

下面我们先来看一个简单的例子,这个例子通过定义一个student模块和一个class模块,在主程序中实现创建student对象并将student对象放到class中去。

清单5.student模块,student.js

01

02

define(function(){

03

return{

04

createStudent:function(name,gender){

05

return{

06

name:name,

07

gender:gender

08

};

09

}

10

};

11

});

清单6.class模块,class.js

01

02

define(function(){

03

varallStudents=[];

04

return{

05

classID:"001",

06

department:"computer",

07

addToClass:function(student){

08

allStudents.push(student);

09

},

10

getClassSize:function(){

11

returnallStudents.length;

12

}

13

};

14

}

15

);

清单7.主程序

1

2

require(["js/student","js/class"],function(student,clz){

3

clz.addToClass(student.createStudent("Jack","male"));

4

clz.addToClass(student.createStudent("Rose","female"));

5

console.log(clz.getClassSize());//输出2

6

});

student模块和class模块都是独立的模块,下面我们再定义一个新的模块,这个模块依赖student和class模块,这样主程序部分的逻辑也可以包装进去了。

清单8.依赖student和class模块的manager模块,manager.js

01

02

define(["js/student","js/class"],function(student,clz){

03

return{

04

addNewStudent:function(name,gender){

05

clz.addToClass(student.createStudent(name,gender));

06

},

07

getMyClassSize:function(){

08

returnclz.getClassSize();

09

}

10

};

11

});

清单9.新的主程序

1

2

require(["js/manager"],function(manager){

3

manager.addNewStudent("Jack","male");

4

manager.addNewStudent("Rose","female");

5

console.log(manager.getMyClassSize());//输出2

6

});

通过上面的代码示例,我们已经清楚的了解了如何写一个模块,这个模块如何被使用,模块间的依赖关系如何定义。还是有一些使用技巧需要提示一下:

•尽量不要提供模块的ID,如AMD规范所述,这个ID是可选项,如果提供了,在RequireJS的实现中会影响模块的可迁移性,文件位置变化会导致需要手动修改该ID。

•每个JavaScript文件只定义一个模块,模块名称和文件路径的查找算法决定了这种方式是最优的,多个的模块和文件会被优化器进行优化。

•避免模块的循环依赖,如果实在避免不了,可以模块中加上对”require”模块的依赖,在代码中直接用require(”dependencyModuleName”)。

配置RequireJS

前面的介绍中,我们似乎忽略了一个基本问题,模块名字是怎么来的?当我在require一个模块时,这个模块是如何映射到具体的JavaScript文件上去?这就涉及到如何配置RequireJS。

最简化的加载RequireJS的方式如清单2所示,在这种情况下,我们没有指定一个baseUrl和paths给RequireJS,如果通过如清单10所示方式,则data-main指定了一个在当前index.html目录并行的文件夹下的/js/main.js作为程序入口,而/js目录也将作为baseUrl在其他模块定义时候使用。

清单10.载入require.js

1

2

<scriptdata-main="js/main"src="scripts/require.js"></script>

因此,我们前面示例中的所有模块依赖,都可以去掉”js/”,直接写”student”,”class”,”manager”等。

一种更为直接的方式显示指定baseUrl和paths就是利用require.config来设置这些参数。如清单11所示。

清单11.配置RequireJS

01

02

<scripttype="text/javascript"src="./js/require.js"></script>

03

<scripttype="text/javascript">

04

require.config({

05

baseUrl:"./js",

06

paths:{

07

"some":"some/v1"

08

},

09

waitSeconds:10

10

});

11

require(["some/module","my/module","./js/a.js"],

12

function(someModule,myModule){}

13

);

14

</script>

baseUrl指明的是所有模块的baseURL,比如”my/module”所加载的script实际上就是/js/my/module.js。注意,以.js结尾的文件加载时不会使用该baseUrl,它们仍然会使用当前index.html所在的相对路径来加载,所以仍然要加上”./js/”。如果baseUrl没有指定,那么就会使用data-main中指定的路径。

paths中定义的路径是用于替换模块中的路径,如上例中的some/module具体的JavaScript文件路径是/js/some/v1/module.js。

waitSeconds是指定最多花多长等待时间来加载一个JavaScript文件,用户不指定的情况下默认为7秒。

另外一个重要的配置是packages,它可以指定其他符合CommonJSAMD规范的目录结构,由此带来了丰富的扩展性。如Dojo、jQuery等的模块也可以通过该配置来让RequireJS加载。

其他可配置的选项还包括locale、context、deps、callback等,有兴趣的读者可以在RequireJS的官方网站查阅相关文档。

综合运用RequireJS

当RequireJS与其他框架一起工作的时候,显然它是可以作为统一的加载器来加载其他框架。鉴于jQuery、Dojo等已经支持了AMD,那么就有可能在定义自己的模块的时候,通过适当配置,直接把其他框架的模块作为依赖对象。

RequireJS和Dojo

清单11是一个基本的RequireJS和Dojo集成配置方法,这里关键是将dojo和dijit都在packages里面注册一下。

清单12.配置RequireJS和Dojo

01

02

<script>

03

require={

04

packages:[

05

{

06

name:“dojo”,

07

location:“dojo”,

08

main:”lib/main-browser”,

09

lib:“.”

10

},

11

{

12

name:“dijit”,

13

location:“dijit”,

14

main:”lib/main”,

15

lib:“.”

16

}

17

],

18

paths:{

19

require:“./js”

20

},

21

ready:function(){

22

require([“my/module”],function(module){

23

});

24

}

25

};

26

</script>

在定义module这个模块时就可以直接将dojo和dijit里的模块作为依赖对象了。

RequireJS和jQuery

把jQuery作为一个依赖模块来使用也非常简单,只需要在RequireJS里的config里做相应的配置就可以了。

清单13.配置RequireJS和jQuery

1

2

require.config({

3

paths:{

4

"jquery":"./js/jquery-1.7"

5

}

6

});

7

require(["jquery"],function(jQ){

8

console.log(jQ);

9

});

RequireJS和WebWorkers

WebWorkers是多线程的JavaScript,每个worker里面的脚本都会启动一个新的线程来执行,通过在worker里面用importsScript来加载require.js可以直接在worker里面使用RequireJS。

清单14.RequireJS和WebWorkers

1

2

importScripts('./js/require.js');

3

require(["require"],

4

function(require){

5

postMessage("test");

6

}

7

);

小结

本文简单介绍了AMD的概念和它带来的好处,深入介绍了如何使用RequireJS来定义自己的JavaScript模块,管理这些模块的依赖关系,异步按需加载这些模块。并进一步讨论了如何用RequireJS和其他框架协同工作,有兴趣的读者可以继续阅读相关文档了解更多详细的用法。

文章出处:IBMdeveloperWorks

相关推荐