添加 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文档,以了解有关定义和使用模块的更多信息。