RequireJS 入门

优质

小牛编辑

119浏览

2023-12-01

注意: 如果你使用 jQuery, 这里是针对 jQuery 的教程

获取 RequireJS

去下载页面下载文件。

添加 RequireJS

注意: 关于 jQuery 集成的意见, 请看 jQuery 集成页面

假定你的项目中 JavaScript 都放在一个 "scripts" 目录。例如, 你的项目中有一个 project.html 页面和一些 scripts, 目录布局如下：

项目目录/
- project.html
- scripts/
  - main.js
  - helper/
    - util.js

添加 require.js 到 scripts 目录, 如下:

项目目录/
- project.html
- scripts/
  - main.js
  - require.js
  - helper/
    - util.js

为了充分利用的优化工具，建议您将所有的scripts放到的HTML外面, 然后只引用 require.js 来请求加载你其它的scripts:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</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>My Sample Project</h1>
    </body>
</html>

如果你不希望加载require.js脚本时阻止页面渲染的话，你也可以把脚本标签放在<body>部分的结束地方。你还可以在脚本标签上添加一个async 属性，前提是浏览器支持该功能。

在 main.js, 你可以使用 require() 来加载所有你需要运行的scripts. 这可以确保你所有的scripts都是在这里加载的, 你可以指定 data-main script 使用异步加载.

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".
});

这样将加载 helper/util.js 脚本. 想要充分利用 RequireJS, 请看 API 文档去了解更多相关定义和模块的使用

优化

如果你最终决定在你在代码中使用, 可以使用优化结合 JavaScript 文件来减少加载时间. 在上面的例子中, 你可以结合 main.js 和 helper/util.js 加到一个文件中.

例子

如果你想在一个项目开始尝试使用RequireJS，这里有一些选择：