RequireJS入门指导（转）

最近在百度实习做的一个项目用到了 Require JS 这个库，之前从来没有了解过，经过一番大概的搜索后找到一篇非常不错的文章，看完后能够让你对 Require JS 的运行机制、使用方法以及为什么使用 Require JS 有一个基础的认识。下面我就对这篇文章进行一个简单的翻译，如果有错漏的地方希望指正。

原文链接：http://undefinedblog.com/primer-for-require-js/

谁适合读这篇文章

对 JavaScript 有一定的了解，写过一定规模的 JavaScript 代码，尤其能够掌握 JavaScript 匿名函数、回调等概念，并希望了解 Require JS 的用法、概念、意义等。

一些基本信息

Require JS(官网) 是一个 JavaScript 文件或模块的加载器，它可以根据不同页面对不同模块的需求，按照你的设置依次加载并执行所有的 JavaScript 文件。使用 Require JS 主要有两个目的：

解耦代码，方便代码重用和管理
加速页面加载，内置优化引擎（需服务器支持），自动异步加载依赖项，将所有需要加载的文件自动合并为一个文件，减少 HTTP 请求

Require JS 同时支持整合 jQuery、CommonJS、Node JS 等，而且对浏览器有不错的兼容性（IE 6+，你懂的）。

没有 Require JS 的时候

下面我们将以一个没有使用 Require JS 的模块开始，讲讲如何将你的代码解耦并使用 Require JS 来加载：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
    <title>Phase 1</title>
</head>
<body>
    <div>
        <h1>Modular Demo 1</h1>
    </div>
    <div id="messagebox"></div>

    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var baseUrl = '/api/messenger/';

        function ShowMessage(id) {
            $.ajax({
                url: baseUrl + id,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $("#messagebox").html(data);
                }
            });
        }

        var id = 55;
        ShowMessage(id);

    </script>
</body>
</html>

以上是一个很简单而且很常见的 ajax 请求页面，可以看到这个页面里的代码虽然简单，但是耦合度很高，下面我们将其中的 JavaScript 代码解耦，把不同的模块独立出来。

//模块1，全局设置模块  
        var config = (function() {
            var baseUrl = '/api/messenger/';

            return {
                baseUrl: baseUrl
            };
        })();

//模块2，请求数据模块
        var dataservice = (function($, config) {
            var callApi = function (url, type, callback) {
                    $.ajax({
                        url: url,
                        type: type,
                        dataType: 'json',
                        success: function (data) {
                            callback(data);
                        }
                    });
                },
                getMessage = function (id, callback) {
                    url = config.baseUrl + id;
                    callApi(url, 'GET', callback);
                };

            return {
                getMessage: getMessage
            };
        })($, config);

//模块3，封装的一个 messenger 模块，显示 ajax 放回的数据
        var messenger = (function ($, dataservice) {
            var showMessage = function(id) {
                dataservice.getMessage(id, function(message) {
                    $("#messagebox").html(message);
                });
            };

            return {
                showMessage: showMessage
            };
        })($, dataservice);

//模块4，匿名函数，传 id, 调用 messenger 的showMessage() 方法 （直接执行）
        (function (messenger) {
            var id = 55;
            messenger.showMessage(id);
        })(messenger);

将这些代码放到原来的、没有重构前的页面中去，将实现同样的效果。但是我们将这些功能独立出来后，就可以很好的重复利用部分代码。

下面假设我们将这 4 个模块放到 4 个独立的 js 文件中：

模块1：config.js
模块2：dataservice.js
模块3：messenger.js
模块4：main.js

这样，在我们的 html 页面中，我们需要依次加载这 4 个模块：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
    <title>Phase 1</title>
</head>
<body>
    <div>
        <h1>Modular Demo 1</h1>
    </div>
    <div id="messagebox"></div>

    <script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="config.js" type="text/javascript"></script>
    <script src="dataservice.js" type="text/javascript"></script>
    <script src="messenger.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>

</body>
</html>

这个时候，代码一样可以工作的非常顺利，没有任何问题。但是需要考虑一个问题：js 文件的加载顺序。当一个模块2需要依赖模块1中的功能时，必须要求模块1加载完成后再执行模块2中的代码。对于简单的代码（如本文涉及的仅4个模块）还好考虑，若有数十个模块需要加载，那么依赖的顺序一旦处理出错，很可能就会报 xxx is undefined 错误。

这个时候就是 Require JS 需要大显身手的时候。

Require JS 的基础操作

定义模块

define(['jquery'],  
    function ($) {
        var text = 'I am a module',
            showMessage = function() {
                $("#messagebox").html(text);
            };

        return {
            showMessage: showMessage
        };
    }
);

可以看到，一个 JavaScript 模块（如上面提到的 config、dataservice、messenger 等），都被一个 define() 函数包起来。

其中 define() 函数接受 3 个参数：

模块名
依赖项，以数组形式传递
模块内容

但是注意，上面的模块定义中，我们并没有传模块名这个参数，理由如下：

Require JS 会自动根据文件名（不含后缀名，即不含 ".js"）来给定义的模块命名，这样在最后优化（将所有的 js 文件合并为一个）时就能自动调用所有的文件。如果你显示的给定义的一个模块命名了，那么在日后进行修改时（比如改动了文件名或模块名），Require JS 将无法自动加载。因此最佳实践是：不要显式的定义模块名，让文件名成为默认的模块名，方便 Require JS 管理。

说完了第一个参数，再看看第二个参数依赖项。依赖项我们传递的是一个字符串数组，每个字符串均代表要实现本模块的功能，需要预先加载的其他模块的模块名。如上例中我们的依赖项就是 jquery。

最后一个参数就是我们需要定义的模块内容。在上例中，我们的模块是一个 function，其中函数的形参即为对依赖项的引用。比如我们的模块有两个依赖项：

define(['moduleA','moduleB'],function(a,b){  
        //a.blabla(); b.blabla = ooxx;
});

就可以在模块中分别使用形参来调用我们依赖的模块。需要注意的一点是，依赖项的书写顺序和在模块定义的函数中的形参顺序要一致。

另外，Require JS 定义的模块并不一定是 function，也可以是普通的对象，详见 Require JS 文档。

将解耦后的代码改写为 Require JS 模块

我们在上面把一个简单的 ajax 调用解耦成 4 个独立的模块，下面我们就把这 4 个模块根据 Require JS 定义模块的风格进行改写。

//config.js  
define([],  
    function () {
        var baseUrl = '/api/messenger/';

        return {
            baseUrl: baseUrl
        };
    }
);

//dataservice.js
define(['jquery', 'config'],  
    function ($, config) {
        var
            callApi = function (url, type, callback) {
                $.ajax({
                    url: url,
                    type: type,
                    dataType: 'json',
                    success: function (data) {
                        callback(data);
                    }
                });
            },

            getMessage = function (id, callback) {
                url = config.baseUrl + id;
                callApi(url, 'GET', callback);
            };

        return {
            getMessage: getMessage
        };
    }
);

//messenger.js
define(['jquery', 'dataservice'],  
    function ($, dataservice) {
        var showMessage = function (id) {
            dataservice.getMessage(id, function (message) {
                $("#messagebox").html(message);
            });
        };

        return {
            showMessage: showMessage
        };
    }
);

//main.js
(function() {
    requirejs.config(
        {
            paths: {
                'jquery': '../Scripts/jquery-1.8.2.min'
            }
        }
    );

    require(
        ['messenger'],
        function(messenger) {
            var id = 55;
            messenger.showMessage(id);
        }
    );
})();

你可能注意到了 main.js 中定义模块的方式似乎不同于其它 3 个模块。没错，因为严格意义上来说，main.js 是调用了其它 3 个模块的功能并最终获得数据。因此下面就要引出怎么在定义了 Require JS 模块后最终设置和调用的问题。

设置和调用模块

Require JS 对于模块的设置和调用提供了两种方式：

1、定义一个 script 标签，并增加 data-main 属性，指向我们的设置文件；同时添加 src 属性，指向 require-js.js 文件（即主库）

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

2、先引入 Require JS 库，再显式的设置

<script src="require-js.js"></script>  
<script>
require({  
        baseUrl : 'scripts', //设置查找所有模块的根目录
        paths:'',//如果在 baseUrl 下没有找到相应的模块，则加上 paths 继续查找
        shim:{},//加载依赖项，传对象
});
require(['dataservice.js']); //加载完上述所有依赖项后，再加载自己编写的模块  
</script>

详细参数见 Require JS 文档。

以上就是 Require JS 的一些简单使用方法和实践，话再说回 iOS 开发……很快回归！

posted on 2015-12-14 14:53 雨为我停阅读(259) 评论(0) 编辑收藏举报

RequireJS入门指导 （转）