javascript - RequireJS:如何控制并行加载的js脚本的执行顺序

Question

我对并行脚本加载步骤没有疑问，但我想知道RequireJS如何控制并行加载脚本的执行顺序。

示例定义如下。

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

main.js:

define(['a', 'b'], function() {
    window.alert("scheduler loaded!");
})

如何保证a.js先于b.js执行？ 当获取 main.js 并解析依赖项时，稍后如何处理它以使其作为脚本元素显示在 dom 中，而无需再次进行 http 获取。当我们向 dom 添加 script 元素时，总会有一个 http fetch(没有启用缓存的情况)，不是吗？

Answer 1

你的 main.js 脚本实际上确实被加载为 <script>首先标记并运行；只是里面的函数要到 a 才会运行和b已加载。如果您使用 requirejs，则不需要自己添加任何脚本标签。

确保 a的内容函数在 b 之前运行的，只需定义 a作为 b 内部的依赖项

// b.js
define(['a'], function(a) {
  // use a for initiation here
}

如果添加 'c'到该数组，然后 c也将成为 main.js 的间接依赖.

编辑:作为对评论的回应，这可能会让人更好地理解。每个编号的项目都是一个 HTTP 请求。

1. 已检索 HTML
2. Requirejs 本身是第一个看到的脚本，因此首先加载。
3. Requirejs 看到它的标签有 data-main属性，因此检索 main.js作为<script>标签。一旦 main.js 加载完毕，它就会简单地运行其中的函数，但是，看起来这个文件具有尚未加载的依赖项(数组)。所以，它创建了 <script>同时标记...
4. a.js
5. 和b.js 。现在，假设这个首先完成加载 - 也许 a.js真的很大。但!看起来 b 依赖于 A。所以，它还不会运行内部函数。 Requirejs 知道它已经在等待 a.js的脚本标记，因此它不会发送单独的请求 - 它可以只是等待它。一旦加载，a 的函数就会运行，然后是 b 的函数，然后是 main 的函数。

这里不会浪费任何 HTTP 请求 - Requirejs 一旦意识到依赖关系就会发出请求，并且不会多次请求单个脚本，除非在极少数情况下，它无法知道将要发生什么事情已加载。

这种罕见情况的一个例子可能是 if SmallWidget.js是一个单独的依赖项，编译成一个名为 BundleOfWidgets.js 的大文件。 (对于最终构建，许多脚本通常被包装成一个)如果一个脚本请求 BundleOfWidgets.js但另一个脚本请求 SmallWidget.js在此之前，它不会知道它实际上正在加载 SmallWidget.js在一个大包中，因此它将自行检索该单个文件。