JS 使用 RequireJS 载入模块

RequireJS 是一个 JS 文件，主要的功能是优化页面 JS 的载入，在平时我们在 html 页面使用的是 script 标签来载入 JS，如下示例：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于 js 文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的 1.js 要在 2.js 的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js 的诞生，就是为了解决这两个问题：
（1）实现 js 文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。
使用 require.js 后你将不再使用 script 标签在 HTML 中引入 JS 文件，以及不用通过 script 标签顺序去管理依赖关系，我们要做的就是在页面中引入 require.js，然后做相应的配置即可，这样不仅可以简化页面的 js 导入配置，还可以提高网页的访问速度。
浏览器支持：
IE 6+ ………. compatible ✔
Firefox 2+ ….. compatible ✔
Safari 3.2+ …. compatible ✔
Chrome 3+ …… compatible ✔
Opera 10+ …… compatible ✔

RequireJS 应用

1 、首页我们在官网下载 RequireJS 应用，下载地址：http://requirejs.org/
2 、新建一个测试目录 rjs，结构如下：

3 、将下载的 require.js 放入 script 目录中

4 、在 rjs 目录下添加 project.html 文件，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>RequireJs 测试</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>RequireJs 测试: 弹出 「RequireJs 测试」</h1>
    </body>
</html>

我们发现在 script 标签中增加了 data-main 属性，这个 main 指主模块或入口模块，data-main 属性的作用是，就是 js 目录下面的 main.js，这个文件会第一个被 require.js 加载。由于 require.js 默认的文件后缀名是 js，所以可以把 main.js 简写成 main，这个 main 指主模块或入口模块，好比 c 或 java 的主函数 main 。

5 、在 main.js 中添加如下代码：

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

6 、在 scripts/helper/util.js 添加如下代码

alert("RequireJs 测试");

7 、用浏览器打开 project.html 可以看到 js 的弹出窗口。

8 、测试包下载：点击下载

8 、如果我们需要加载第三方库，本站已 jquery-1.10.1.min.js 为例，则下载 jquery-1.10.1.min.js, 将文件放置你的 helper 目录下，如下图：

修改 main.js 文件，代码如下：

require.config({
	baseUrl: 'scripts/helper',
    paths: {
        jquery: 'jquery-1.10.1.min',
        util: 'util'
    }
});

require(['jquery'], function($) {
    alert($().jquery);
});
require(["util"], function(util) {
    //加载 scripts/helper/util.js.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

baseUrl 为加载第三方库的路径
path 为各个包的名称
main.js 中就两个函数调用 require.config 和 require 。
require.config 用来配置一些参数，它将影响到 requirejs 库的一些行为。
require.config 的参数是一个 JS 对象，常用的配置有 baseUrl，paths 等。
这里配置了 paths 参数，使用模块名「jquery」，其实际文件路径 jquery-1.10.1.min.js（后缀.js 可以省略）。
我们知道 jQuery 从 1.7 后开始支持 AMD 规范，即如果 jQuery 作为一个 AMD 模块运行时，它的模块名是「jquery」。注意「jquery」是固定的，不能写「jQuery」或其它。
注：如果文件名「jquery-1.7.2.js」改为「jquery.js」就不必配置 paths 参数了。

AMD 模块的写法说明

require.js 加载的模块，采用 AMD 规范。也就是说，模块必须按照 AMD 的规定来写。
具体来说，就是模块必须采用特定的 define() 函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在 define() 函数之中。
假定现在有一个 math.js 文件，它定义了一个 math 模块。那么，math.js 就要这样写：

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

加载方法如下：

　　// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

如果这个模块还依赖其他模块，那么 define() 函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

当 require() 函数加载上面这个模块的时候，就会先加载 myLib.js 文件。

RequireJS 相关资源

RequireJS 首页：http://requirejs.org/
RequireJS 下载：http://requirejs.org/docs/download.html
RequireJS 文档：http://requirejs.org/docs/api.html
测试 DEMO： http://www.wpnoob.cn/wpsource/rjs.zip