数据主脚本加载与常规脚本加载之间的区别 [英] Difference Between data-main and normal script loading

问题描述

使用RequireJS时，将脚本包含在

When using RequireJS, what's the difference between including your script with

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

和

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

即加载脚本时， data-main 属性会发生什么变化?我已经通读了有关此文档的文档，但不同之处并不完全是对我清楚.

i.e. what does the data-main attribute change about loading in a script? I've read through the docs on this, and the different isn't entirely clear to me.

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

You will typically use a data-main script to set configuration options and then load the first application module. Note: the script tag require.js generates for your data-main module includes the async attribute. This means that you cannot assume that the load and execution of your data-main script will finish prior to other scripts referenced later in the same page.

文档中提到，您通常会使用数据主脚本来设置配置选项并加载第一个应用程序模块-但您也不能通过普通的脚本标签?进行配置以使用 data-main 属性加载应用程序模块有好处吗?

The documentation mentions that you'll typically use a data-main script to set configuration options and load the first application module — but can't you also do that via a plain old script tag? Is there a benefit to doing configuration loading the application module with a data-main attribute?

与 data-main 唯一的不同是异步加载吗?还是还有其他东西?

Is the only different with data-main the asynchronous loading? Or is there something more?

推荐答案

数据主域只是对应用程序执行初始 require 调用的另一种方法.为了说明这一点……

data-main is just another way to perform the initial require call of your application. To illustrate... this:

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

等效于此:

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

这两种形式都是异步的.这实际上就是它的全部.关于您拥有多少个入口点或RequireJS配置将位于何处的考虑与 data-main 的使用完全正交.换句话说，这些考虑因素在您使用 data-main 时起的作用与它们在您使用 require(["scripts/main"]时起的作用).

The two forms are both asynchronous. This is really all there is to it. Considerations about how many entry points you have or where the RequireJS configuration is going to be located are completely orthogonal to the use of data-main. To put it differently, these considerations play a role in your use of data-main to the exact same extent that they play a role in your use of require(["scripts/main"]).

您引用的文档部分只是通过提及 data-main 加载的脚本在 head 中创建了 script 元素而使事情变得晦涩.设置了 async 属性的code>元素，因为这与通过RequireJS 加载任何脚本没有什么不同.RequireJS加载的每个脚本都将在 head 中为其创建一个 script 元素，并设置 async 属性.

The part of the documentation you quoted is just obscuring things by mentioning that the script loaded with data-main creates a script element in the head element with the async attribute set, because this is not different from loading any script through RequireJS. Every single script loaded by RequireJS will have a script element created for it, in the head, and have the async attribute set.

通常将 data-main 用于只有一个入口点的应用程序，并将RequireJS的配置放入 data-main 中指定的模块中，但这绝不是必需的.例如，这是一种完全有效的用法:

It is common to use data-main for applications that have only a single entry point, and to put RequireJS' configuration in the module specified in data-main, but it is not required by any means. For instance, this is a perfectly valid use:

<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之前在全局空间中设置 require 来为RequireJS进行配置.(如果在加载RequireJS之前定义了 require ，它将以 require 的值作为配置.)除了通过加载 scripts/main <来启动应用程序./code>，此代码还会加载 foo 并在其上调用一个方法:两个入口点.

The configuration is given to RequireJS by setting require in the global space before loading RequireJS. (If require is defined before RequireJS is loaded, it will take require's value as its configuration.) Besides kicking off the application by loading scripts/main, this code also loads foo and calls a method on it: two entry points.

这篇关于数据主脚本加载与常规脚本加载之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！