Javascript 数据主脚本和正常脚本加载之间的差异

使用RequireJS时，将脚本包含在

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

及

i、 e.

data main

属性在脚本中加载时会发生什么变化？我知道，但我并不完全清楚其中的不同

通常，您将使用数据主脚本设置配置选项，然后加载第一个应用程序模块。注意：为数据主模块生成的脚本标记require.js包含async属性。这意味着您不能假设数据主脚本的加载和执行将在同一页面稍后引用的其他脚本之前完成

文档中提到，您通常会使用数据主脚本来设置配置选项并加载第一个应用程序模块，但您不能也通过普通的

脚本
标记来实现这一点吗？使用
data main
属性配置加载应用程序模块是否有好处

与
data main
异步加载唯一不同的是什么？或者还有别的吗？
data main是require.js将处理的脚本。正如文档所述，在该脚本中设置配置选项是常见的。但还有其他方法可以做到这一点。在许多情况下，这是最容易和最有效的地方。但并非总是如此

data main指向的脚本还将列出文件定义的代码的依赖项。依赖关系就是肉的所在。虽然不是必需的，但是典型的做法是加载第一个模块并执行最终实际的应用程序

回复评论的附录：

您需要了解一些概念，这些概念将有助于理解这种方法

首先是没有一个（或几个，甚至几个）脚本。这种类型的加载程序设计用于处理大量非常小的脚本。每一个都有一个非常具体的，通常（最好）单一的目的。调用这些脚本模块（或单元）

任何给定的模块都可能依赖于任意数量的其他模块才能正常工作。AMD模式允许在该模块的定义中列出每个模块的依赖项

RequireJS将确定谁需要什么以及以什么顺序执行，并且在它们所依赖的所有模块都加载并准备就绪之前不让脚本执行

所以这根本不像我们从小在一个页面中放置一个脚本链接（或多个链接）。这是一种非常不同的javascript开发方法。一旦你想清楚了如何将代码分解成独立的功能单元，它就变得非常灵活了。
data main
适用于你想在应用程序中有一个单一入口点的时候。这一行脚本将加载RequireJS和
scripts/main.js
并启动你的应用程序

结果

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

作为单个入口点，
config.js
的内容和随后的
require（['js/main']）
调用将在作为
data main
引用的脚本中


如果您使用静态优化器构建生产捆绑包，这一切都无关紧要，因为您只需加载捆绑包。
data main
只是执行应用程序初始
require
调用的另一种方法。为了说明。。。这：

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

在加载RequireJS之前，通过在全局空间中设置
require
，将配置提供给RequireJS。（如果在加载RequireJS之前定义了
require
，它将以
require
的值作为其配置。）除了通过加载
scripts/main
启动应用程序外，此代码还加载
foo
，并对其调用一个方法：两个入口点。

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


src将首先加载“scripts/vendor/requirejs/require.js”。然后数据主属性将执行“scripts/main.js”
 谢谢你的回复，我很感激，但这和手册一样让人困惑。很明显，你已经内化了一些知识，但我没有得到，因为我没有你的背景。为什么if require.js处理主数据以加载它与仅通过普通浏览器方式加载文件不同。asyc正在加载它吗？还是还有别的？（我在实现层面对此感兴趣，不一定只是一个用户程序员）请参阅扩展的答案。希望我已经透露了一些内化的知识。谢谢@Louis——这正是我想要的澄清！是的，文档不是很好，“你通常会使用…”但是他们没有解释为什么。
<script data-main="scripts/main" src="scripts/require.js"></script>

<script src="scripts/require.js"></script>
<script>require(["scripts/main"])</script>

<script>
    require = {
        // RequireJS config here...
    };
</script>
<script data-main="scripts/main" src="scripts/require.js"></script>
<script>
    require(["foo"], function (foo) {
        foo.something();
    });
</script>

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