基于 AMD（Asynchronous Module Definition）的 JavaScript 设计已经在目前较为流行的前端框架中大行其道，jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。本文介绍的是另一款较为精简的 RequireJS 框架，既想使用 AMD 的特性又不想引入一个庞大的库的开发人员，不妨试试 RequireJS。RequireJS 可以帮助用户异步按需的加载 JavaScript 代码，并解决 JavaScript 模块间的依赖关系，提升了前端代码的整体质量和性能。
AMD 简介
前端开发在近一两年发展的非常快，JavaScript 作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一些前端开发中的共性问题，但是实现又不尽相同。在这个背景 下，CommonJS 社区诞生了，为了让前端框架发展的更加成熟，CommonJS 鼓励开发人员一起在社区里为一些完成特定功能的框架制定规范。AMD（Asynchronous Module Definition）就是其中的一个规范。
传统 JavaScript 代码的问题
让我 们来看看一般情况下 JavaScript 代码是如何开发的：通过 <script> 标签来载入 JavaScript 文件，用全局变量来区分不同的功能代码，全局变量之间的依赖关系需要显式的通过指定其加载顺序来解决，发布应用时要通过工具来压缩所有的 JavaScript 代码到一个文件。当 Web 项目变得非常庞大，前端模块非常多的时候，手动管理这些全局变量间的依赖关系就变得很困难，这种做法显得非常的低效。
AMD 的引入
AMD 提出了一种基于模块的异步加载 JavaScript 代码的机制，它推荐开发人员将 JavaScript 代码封装进一个个模块，对全局对象的依赖变成了对其他模块的依赖，无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的 JavaScript 代码好处很明显，各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载 JavaScript 代码，使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素，如图片、CSS 以及其他 DOM 节点得以先加载完毕，Web 页面加载速度更快，用户也得到更好的体验。
CommonJS 的 AMD 规范中只定义了一个全局的方法，如清单 1 所示。
清单 1. AMD 规范
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 必将使您的前端代码质量得以提升。
目前最新版本的 RequireJS 1.0.8 在 IE 6+、Firefox 2+、Safari 3.2+、Chrome 3+、Opera 10+ 上都工作的很好。
实战 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 文件
<script src="./js/require.js"></script>
<script>
require(["./js/a.js", "./js/b.js"], function() {
myFunctionA();
myFunctionB();
});
</script>
require 方法里的这个字符串数组参数可以允许不同的值，当字符串是以”.js”结尾，或者以”/”开头，或者就是一个 URL 时，RequireJS 会认为用户是在直接加载一个 JavaScript 文件，否则，当字符串是类似”my/module”的时候，它会认为这是一个模块，并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。
这里要指出的是，RequireJS 默认情况下并没有保证 myFunctionA 和 myFunctionB 一定是在页面加载完成以后执行的，在有需要保证页面加载以后执行脚本时，RequireJS 提供了一个独立的 domReady 模块，需要去 RequireJS 官方网站下载这个模块，它并没有包含在 RequireJS 中。有了 domReady 模块，清单 2 的代码稍做修改加上对 domReady 的依赖就可以了。
清单 3. 页面加载后执行 JavaScript
<script src="./js/require.js"></script>
<script>
require(["domReady!", "./js/a.js", "./js/b.js"], function() {
myFunctionA();
myFunctionB();
});
</script>
执行清单 3 的代码后，通过 Firebug 可以看到 RequireJS 会在当前的页面上插入为 a.js 和 b.js 分别声明了一个 <script> 标签，用于异步方式下载 JavaScript 文件。async 属性目前绝大部分浏览器已经支持，它表明了这个 <script> 标签中的 js 文件不会阻塞其他页面内容的下载。
清单 4. RequireJS 插入的 <script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 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
define(function(){
return {
createStudent: function(name, gender){
return {
name: name,
gender: gender
};
}
};
});
清单 6. class 模块，class.js
define(function() {
var allStudents = [];
return {
classID: "001",
department: "computer",
addToClass: function(student) {
allStudents.push(student);
},
getClassSize: function() {
return allStudents.length;
}
};
}
);
清单 7. 主程序
require(["js/student", "js/class"], function(student, clz) {
clz.addToClass(student.createStudent("Jack", "male"));
clz.addToClass(student.createStudent("Rose", "female"));
console.log(clz.getClassSize()); // 输出 2
});
student 模块和 class 模块都是独立的模块，下面我们再定义一个新的模块，这个模块依赖 student 和 class 模块，这样主程序部分的逻辑也可以包装进去了。
清单 8. 依赖 student 和 class 模块的 manager 模块，manager.js
define(["js/student", "js/class"], function(student, clz){
return {
addNewStudent: function(name, gender){
clz.addToClass(student.createStudent(name, gender));
},
getMyClassSize: function(){
return clz.getClassSize();
}
};
});
清单 9. 新的主程序
require(["js/manager"], function(manager) {
manager.addNewStudent("Jack", "male");
manager.addNewStudent("Rose", "female");
console.log(manager.getMyClassSize());// 输出 2
});
通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。还是有一些使用技巧需要提示一下：
- 尽量不要提供模块的 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
<script data-main="js/main" src="scripts/require.js"></script>
因此，我们前面示例中的所有模块依赖，都可以去掉”js/”，直接写 ”student”， ”class”，”manager” 等。
一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如清单 11 所示。
清单 11. 配置 RequireJS
<script type="text/javascript" src="./js/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl: "./js",
paths: {
"some": "some/v1"
},
waitSeconds: 10
});
require( ["some/module", "my/module", "./js/a.js"],
function(someModule, myModule) {}
);
</script>
baseUrl指明的是所有模块的 base URL，比如”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，它可以指定其他符合 CommonJS AMD 规范的目录结构，由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。
其他可配置的选项还包括 locale、context、deps、callback等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。
综合运用 RequireJS
当 RequireJS 与其他框架一起工作的时候，显然它是可以作为统一的加载器来加载其他框架。鉴于 jQuery、Dojo 等已经支持了 AMD ，那么就有可能在定义自己的模块的时候，通过适当配置，直接把其他框架的模块作为依赖对象。
RequireJS 和 Dojo
清单 11是一个基本的 RequireJS 和 Dojo 集成配置方法，这里关键是将 dojo 和 dijit 都在 packages 里面注册一下。
清单 12. 配置 RequireJS 和 Dojo
<script>
require = {
packages: [
{
name: “dojo”,
location: “dojo”,
main:”lib/main-browser”,
lib: “.”
},
{
name: “dijit”,
location: “dijit”,
main:”lib/main”,
lib: “.”
}
],
paths: {
require: “./js”
},
ready: function () {
require([“my/module”], function (module) {
});
}
};
</script>
在定义 module 这个模块时就可以直接将 dojo 和 dijit 里的模块作为依赖对象了。
RequireJS 和 jQuery
把 jQuery 作为一个依赖模块来使用也非常简单，只需要在 RequireJS 里的 config 里做相应的配置就可以了。
清单 13. 配置 RequireJS 和 jQuery
require.config({
paths: {
"jquery": "./js/jquery-1.7"
}
});
require(["jquery"],function(jQ){
console.log(jQ);
});
RequireJS 和 Web Workers
Web Workers 是多线程的 JavaScript，每个 worker 里面的脚本都 会启动一个新的线程来执行，通过在 worker 里面用 importsScript 来加载 require.js 可以直接在 worker 里面使用 RequireJS 。
清单 14. RequireJS 和 Web Workers
importScripts('./js/require.js');
require(["require"],
function(require) {
postMessage("test");
}
);
小结
本 文简单介绍了 AMD 的概念和它带来的好处，深入介绍了如何使用 RequireJS 来定义自己的 JavaScript 模块，管理这些模块的依赖关系，异步按需加载这些模块。并进一步讨论了如何用 RequireJS 和其他框架协同工作，有兴趣的读者可以继续阅读相关文档了解更多详细的用法。
******************************************************************************************
简介如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 异步模块定义(AMD)谈起RequireJS，你无法绕过提及JavaScript模块是什么，以及AMD是什么。 JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则) 的代码段，它暴露了一个公开的API。在现今JavaScript开发中，你可以在模块中封装许多功能，而且在大多数项目中，每个模块都有其自己的文件。 这使得JavaScript开发者日子有点难过，因为它们需要持续不断的关注模块之间的依赖性，按照一个特定的顺序加载这些模块，否则运行时将会放生错 误。 |
|
当你要加载JavaScript模块时，就会使用script标签。为了加载依赖的模块，你就要先加载被依赖的，之后再加载依赖的。使用script标签时，你需要按照此特定顺序安排它们的加载，而且脚本的加载是同步的。可以使用async和defer关键字使得加载异步，但可能因此在加载过程中丢失加载的顺序。另一个选择是将所有的脚本捆绑打包在一起，但在捆绑的时候你仍然需要把它们按照正确的顺序排序。 AMD就是这样一种对模块的定义，使模块和它的依赖可以被异步的加载，但又按照正确的顺序。
CommonJS, 是对通用的JavaScript模式的标准化尝试，它包含有 AMD 定义 ，我建议你在继续本文之前先读一下。在ECMAScript 6这个下一版本JavaScript 规范中，有关于输出，输入以及模块的规范定义，这些将成为JavaScript语言的一部分，而且这不会太久。这也是关于RequireJS我们想说的东西。 |
RequireJS?RequireJS是一个Javascript 文件和模块框架，可以从 http://requirejs.org/下载，如果你使用Visual Studio也可以通过Nuget获取。它支持浏览器和像node.js之类的服务器环境。使用RequireJS,你可以顺序读取仅需要相关依赖模块。 RequireJS所做的是，在你使用script标签加载你所定义的依赖时，将这些依赖通过head.appendChild()函数来加载他们。当依 赖加载以后，RequireJS计算出模块定义的顺序，并按正确的顺序进行调用。这意味着你需要做的仅仅是使用一个“根”来读取你需要的所有功能，然后剩 下的事情只需要交给RequireJS就行了。为了正确的使用这些功能，你定义的所有模块都需要使用RequireJS的API，否者它不会像期望的那样 工作。 |
|
RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:
在后面，我们将教你如果使用这些函数，但首先让我们先了解下RequireJS的加载流程。 |
data-main属性当你下载RequireJS之后，你要做的第一件事情就是理解RequireJS是怎么开始工作的。当RequireJS被加载的时候，它会使用 data-main属性去搜寻一个脚本文件（它应该是与使用src加载RequireJS是相同的脚本）。data-main需要给所有的脚本文件设置一 个根路径。根据这个根路径，RequireJS将会去加载所有相关的模块。下面的脚本是一个使用data-main例子：
另外一种方式定义根路劲是使用配置函数，后面我们将会看到。requireJs假设所有的依赖都是脚本，那么当你声明一个脚本依赖的时候你不需要使用.js后缀。 |
配置函数如果你想改变RequireJS的默认配置来使用自己的配置，你可以使用require.configh函数。config函数需要传入一个可选参数对象，这个可选参数对象包括了许多的配置参数选项。下面是一些你可以使用的配置：
下面是使用配置的一个例子：
在这个例子中把根路径设置为了scripts/app，由lib开始的每个模块都被配置在scripts/lib文件夹下面，backbone 加载的是一个shim依赖。 |
用RequireJS定义模块模块是进行了内部实现封装、暴露接口和合理限制范围的对象。ReuqireJS提供了define函数用于定义模块。按章惯例每个Javascript文 件只应该定义一个模块。define函数接受一个依赖数组和一个包含模块定义的函数。通常模块定义函数会把前面的数组中的依赖模块按顺序做为参数接收。例 如，下面是一个简单的模块定义:
我们看，一个包含了logger的模块依赖数组被传给了define函数,该模块后面会被调用。同样我们看所定义的模块中有一个名为logger的参数， 它会被设置为logger模块。每一个模块都应该返回它的API.这个示例中我们有两个属性(firstName和lastName)和一个函数 (sayHello)。然后，只要你后面定义的模块通过ID来引用这个模块，你就可以使用其暴露的API。 |
使用require函数在RequireJS中另外一个非常有用的函数是require函数。require函数用于加载模块依赖但并不会创建一个模块。例如：下面就是使用require定义了能够使用jQuery的一个函数。
小结在这篇文章中我介绍了RequireJS库,它是我创建每个Javascript项目都会用到的库函数之一。它不仅仅用于加载模块依赖和相关的命令，RequireJS帮助我们写出模块化的JavaScript代码，这非常有利于代码的可扩展性和重用性。 |
转载请注明：学时网 » 使用 RequireJS 优化 Web 应用前端入门指南
