如何开始使用REQUIREJS

注意:如果您使用的是jQuery,则有针对性的jQuery教程

添加 RequireJS § 2

注意:如果您使用的是jQuery,则有针对性的jQuery教程

此设置假定您将所有JavaScript文件都保留在项目的"scripts"目录中。例如,如果您有一个包含project.html页面的项目,其中包含一些脚本,则目录布局可能如下所示:

  • project-directory/
    • project.html
    • scripts/
      • main.js
      • helper/
        • util.js

将require.js添加到脚本目录,因此如下所示:

  • project-directory/
    • project.html
    • scripts/
      • main.js
      • require.js
      • helper/
        • util.js

为了充分利用优化工具,建议您将所有内联脚本都保留在HTML之外,并且仅通过requirejs调用引用require.js即可加载脚本:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main属性告诉require.js要加载
             加载require.js后的scripts/main.js -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

如果您不想加载require.js脚本来阻止渲染,也可以将script标签放在<body>部分的末尾。对于支持它的浏览器,您还可以在script标签中添加async属性

在main.js内部,您可以使用requirejs()来加载需要运行的其他脚本。这确保了一个入口点,因为您指定的数据主脚本是异步加载

requirejs(["helper/util"], function(util) {
    //此函数在加载scripts/helper/util.js时调用。
    //如果util.js调用define(),则直到
    //util的依赖项已加载,util参数将保持
    //“helper/util"的模块值。
});

这将加载helper/util.js脚本。要充分利用RequireJS,请参阅API文档,以了解有关定义和使用模块的更多信息。

优化 § 3

一旦完成开发并希望为最终用户部署代码,就可以使用优化器将JavaScript文件组合在一起并进行最小化。在上面的示例中,它可以将main.js和helper/util.js合并到一个文件中并最小化结果。

例子 § 4

如果您想使用一个开始的项目来试用RequireJS,可以使用以下选项: