数据主要和正常脚本加载之间的区别

Question

使用RequireJS时,包含脚本的区别是什么

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

和

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

即data-main属性在脚本中加载有什么变化？我已经阅读了关于此的文档,而且对我来说并不完全清楚.

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

文档提到您通常会使用数据主脚本来设置配置选项并加载第一个应用程序模块 - 但是您不能通过普通的旧script标签来实现吗？使用data-main属性进行配置加载应用程序模块有什么好处？

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

Answer 1

data-main只是执行require应用程序初始调用的另一种方法.为了说明......这个:

<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"]).

您引用的文档部分只是通过提及加载的脚本在具有属性集data-main的script元素中创建元素来掩盖事物,因为这与通过RequireJS加载任何脚本没有区别.RequireJS加载的每个脚本都将为其创建一个元素,并在其中设置属性.headasyncscriptheadasync

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

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

通过require在加载RequireJS之前设置全局空间来为RequireJS提供配置.(如果require在加载RequireJS之前定义,它将使用require其值作为其配置.)除了通过加载启动应用程序之外scripts/main,此代码还加载foo并调用其上的方法:两个入口点.

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()块的脚本,并提取您的第一个应用程序脚本.如果您没有指定a data-main,那么除非您显式加载配置文件和第一个模块,否则您只需加载Require 而不加载任何应用脚本.

如果你不告诉它加载什么,你认为需要加载什么？

如果你不使用data-main,你必须在加载后提供一个入口点Require(这是我一直这样做的原因,除了我学习它之外没有任何理由.)阅读配置选项以了解如何做到这一点.

我在开发中使用这种模式:

<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.

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