Question

使用RequireJS时，将脚本包含在

之间的区别是什么

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

和

<script src="scripts/require.js"></script>

即。 data-main属性在脚本中加载有什么变化？我已经read through the docs on this，而且对我来说并不完全清楚。

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

文档提到您通常使用数据主脚本来设置配置选项并加载第一个应用程序模块 - 但是您也可以通过普通模式执行此操作旧的script代码？使用data-main属性对应用程序模块进行配置加载是否有好处？

与data-main异步加载的唯一区别是什么？或者还有什么？

Answer 1

function random_username($string) { $pattern = " "; $firstPart = strstr(strtolower($string), $pattern, true); $secondPart = substr(strstr(strtolower($string), $pattern, false), 0, 3); $nrRand = rand(0, 100); $username = $firstPart.$secondPart.$nrRand; return $username; } echo random_username("Mike Test");只是执行应用程序初始data-main调用的另一种方法。为了说明......这个：

require

相当于：

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

这两种形式都是异步的。这就是它的全部内容。关于您拥有多少入口点或RequireJS配置所在位置的注意事项与<script src="scripts/require.js"></script> <script>require(["scripts/main"])</script>的使用完全正交。换句话说，这些注意事项在您使用data-main时起到的作用与它们在您使用data-main中的作用完全相同。

您引用的文档部分只是通过提及加载了require(["scripts/main"])的脚本在data-main元素中创建script元素并使用head属性来掩盖事物设置，因为这与通过RequireJS 加载任何脚本没有什么不同。 RequireJS加载的每个脚本都会在async中为其创建script个元素，并设置head属性。

对于只有一个入口点的应用程序，通常使用async，并将RequireJS＆＃39; data-main中指定的模块中的配置，但不是必需的。例如，这是一个非常有效的用途：

data-main

在加载RequireJS之前，通过在全局空间中设置<script> require = { // RequireJS config here... }; </script> <script data-main="scripts/main" src="scripts/require.js"></script> <script> require(["foo"], function (foo) { foo.something(); }); </script>来为RequireJS提供配置。（如果在加载RequireJS之前定义require，则会将require的值作为其配置。）除了通过加载require启动应用程序之外，此代码还会加载scripts/main并在其上调用一个方法：两个入口点。

Answer 2

data-main适用于您希望应用程序具有单一入口点的情况。该单个脚本行将加载RequireJS和scripts/main.js并启动您的应用程序。

的结果

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

是<script async src="scripts/main.js"></script>在运行时附加到文档;这是包含require.config()块的脚本，并提取您的第一个应用程序脚本。如果您没有指定data-main，那么除非您明确加载配置文件和第一个模块，否则您只需加载Require而不加载任何应用脚本。

如果您没有告诉它加载任何内容，您认为需要加载什么？

如果你不使用data-main，你必须在加载后提供一个入口点需要（这是我一直以来的做法，没有好处除此之外的原因我是如何学习它的。）阅读configuration options以了解你将如何做到这一点。

我在开发中使用this pattern：

<script src="js/lib/require.js"></script> <script src="js/config.js"></script> <script> // same as data-main require.config({baseUrl : 'js'}); require(['js/main']); </script>

作为单个入口点，config.js和后续require(['js/main'])调用的内容将出现在data-main引用的任何脚本中。

如果您使用静态优化器来构建生产捆绑包，那么这一切都不重要，因为您只需加载捆绑包。

Answer 3

data-main是require.js将处理的脚本。正如文档所述，在该脚本中设置配置选项是很常见的。但还有其他方法可以做到这一点。在许多情况下，它是最简单和最有效的地方。但不总是。

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

回复评论的附录：

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

首先，没有一个（或几个，甚至几个）脚本。这种类型的加载器旨在处理大量非常小的脚本。每个都具有非常特定且通常（优选地）单一目的。调用这些脚本模块（或单元）。

任何给定的模块可能依赖于任意数量的其他模块才能运行。 AMD模式允许在该模块的定义中列出每个模块的依赖关系。

RequireJS将根据他们所依赖的所有模块加载并准备就绪来理清谁需要什么以及以什么顺序执行，而不是让脚本执行。

所以这根本不像在我们都长大的时候在页面中放置一个脚本链接（或多个链接）。这是一种与javascript开发截然不同的方法。一旦你了解它并弄清楚如何将你的代码细分为谨慎的功能单元，它真的很光滑。

Answer 4

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

src将首先加载“ scripts / vendor / requirejs / require.js”。然后data-main属性将执行“ scripts / main.js”。

数据主加载和普通脚本之间的区别

4 个答案: