一篇文章掌握RequireJS常用知识

下面是一篇关于RequireJS常用知识的完整攻略。

1. RequireJS简介

RequireJS 是一个 JavaScript 类库和文件加载器，主要用于在浏览器上加载模块和文件。通过 RequireJS，我们可以使用模块化的方式来编写 JavaScript 代码，简化代码的编写和维护，同时也有利于代码的重用。

2. 使用RequireJS

2.1. 引入RequireJS

使用 RequireJS 首先需要下载并引入 RequireJS 库文件。

<script src="path/to/require.js"></script>

2.2. 配置RequireJS

在引入 RequireJS 后，我们需要配置 RequireJS，告诉它我们的 JavaScript 文件位于哪个目录下，以便 RequireJS 能够正确地加载这些文件。配置方法如下：

require.config({
    baseUrl: "path/to/js",
    paths: {
        "jquery": "path/to/jquery",
        "underscore": "path/to/underscore"
    }
});

其中，baseUrl 表示 JavaScript 文件的基础目录，paths 表示每个模块的路径。

2.3. 定义模块

在 RequireJS 中，每一个 JavaScript 文件都是一个模块，它们之间可以相互依赖和调用。我们可以使用 define() 函数来定义一个模块。

define(["jquery", "underscore"], function($, _) {
    // 这里是模块的代码
});

其中，["jquery", "underscore"] 表示该模块所依赖的其他模块；$ 和 _ 分别表示 jQuery 和 Underscore，用来在模块中使用 jQuery 和 Underscore 的函数。

2.4. 加载模块

在定义好模块后，我们可以使用 RequireJS 的 require() 函数来加载这些模块，并在回调函数中使用这些模块。

require(["path/to/module"], function(module) {
    // 这里是代码，可以使用 module 中的函数
});

2.5. 示例

下面是一个简单的使用 RequireJS 的例子。

首先，在 HTML 文件中引入 RequireJS：

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

然后，在 main.js 中配置 RequireJS：

require.config({
    baseUrl: "path/to/js",
    paths: {
        "jquery": "path/to/jquery",
        "underscore": "path/to/underscore"
    }
});

require(["path/to/module1", "path/to/module2"], function(module1, module2) {
    // 这里是代码，可以使用 module1 和 module2 中的函数
});

在 module1.js 中定义模块：

define(["jquery"], function($) {
    function func1() {
        // 这里是代码，可以使用 $ 中的函数
    }

    return {
        func1: func1
    };
});

在 module2.js 中定义模块：

define(["underscore"], function(_) {
    function func2() {
        // 这里是代码，可以使用 _ 中的函数
    }

    return {
        func2: func2
    };
});

3. RequireJS常用配置项

3.1. baseUrl

baseUrl 表示 JavaScript 文件的基础目录，所有模块的路径都相对于此目录。默认值为当前页面的根目录。

3.2. paths

paths 表示每个模块的路径，可以是绝对路径或相对路径。如果是相对路径，那么相对的是 baseUrl。

3.3. shim

shim 用来为没有使用 AMD 规范的库定义模块，使它们可以按照 AMD 规范来使用。

require.config({
    shim: {
        "underscore": {
            exports: "_"
        }
    }
});

这个例子中，我们使用 shim 来为 Underscore 定义模块。exports 表示该模块的导出值是什么，这里指定为 _。

3.4. map

map 用来修改模块的路径，可以用来为模块定义不同的路径。

require.config({
    map: {
        "*": {
            "jquery": "path/to/jquery.min"
        }
    }
});

这个例子中，我们使用 map 来将所有引用 jQuery 的模块路径修改为 path/to/jquery.min。

4. 总结

到这里，我们已经介绍了 RequireJS 的基本用法和常用配置项。在实际的开发中，使用 RequireJS 可以大大简化代码的编写和维护，并且有利于代码的重用。