requirejs – 如何加载在单个文件中定义的多个命名AMD模块?

前端之家收集整理的这篇文章主要介绍了requirejs – 如何加载在单个文件中定义的多个命名AMD模块?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的理解是它不应该发生,但是 it does.这些库最合适的解决方法是什么?

笔记:

>我认为在require.js手动(使用脚本标记)之后运行这些脚本应该有效,而且看起来确实如此.但是,RequireJS文档explicitly warns表示数据主脚本是异步运行的.虽然require.js应该正确定义了定义多个命名模块的脚本所需的定义函数,但我还假设如果没有从数据主脚本加载适当的配置,坏事可能会以非确定的方式发生.它是否正确?
>我也没有看到垫片,贴图,束和路径配置属性的任何组合如何在这种情况下有所帮助,尽管我希望我错过它.

澄清第一个注释:(我的不好,现在还不清楚)

我在这里描述的只是手动执行(使用HTML脚本标记)在RequireJS和data-main脚本之后定义多个模块的脚本.知道后者运行异步,我的担忧应该变得更加明显(但请随时让我详细说明).其中很大一部分虽然我似乎可以成功地要求每个命名模块,但我不确定该行为是否具有确定性(同样,它不是很漂亮,我更愿意避免使用其他脚本标记并正确地异步加载所有内容) .

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

这里,datajs-1.1.2.js定义了两个模块,如上面的链接所述,并在下面复制:

// AMD support
if (typeof define === 'function' && define.amd) {
    define('datajs',datajs);
    define('OData',odata);
} ...

解决方法

什么将会和将不会工作取决于如何在应用程序中使用定义多个命名模块的文件的细节.

通常,如果无法确定单个文件中定义的模块(使用命名定义)的顺序,则设置路径以将模块名称映射到定义它们的文件应该可以防止出现问题:

paths: {
    'foo': 'path/to/foobar','bar': 'path/to/foobar'
}

如果需要foo或bar,RequireJS将加载定义它们的文件(path / to / foobar.js),这不是问题.

根据您在问题中添加的详细信息,我可以这样说.首先,这段代码

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

是不正确的.通过< script>加载调用define的模块标签通常是错误的. (我会说它总是错的,但可能有一些非常奇怪的情况,让不兼容的资产一起工作,你必须做一些通常会出错的事情.但这是不寻常的,必须有理由.)当你通过这样做,你打开时间问题.有时它可能有效,有时可能无效.

但是,这应该可以防止任何时间问题:

<script>
require = {
    paths: {
        datajs: 'scripts/datajs-1.1.2',OData: 'scripts/datajs-1.1.2'
    }
};
</script>
<script src="scripts/require.js" data-main="app/main.js"></script>

每当需要datajs-1.1.2.js中的两个模块中的任何一个时,要么因为它调用require,要么因为它调用了带有相应模块名称的define,所以将加载定义这两个模块的文件.

(警告:我在上面的示例中显示的配置是一个有根据的猜测,其中包含足够的细节来说明.一旦与app / main.js中已存在的配置结合使用它可能无法工作,我并不是说它是为您的特定应用程序配置RequireJS的最佳方法.)

对于RequireJS 2.1.10及更高版本,还有bundle选项,它更好用:

<script>
require = {
    bundles: {
      "js/datajs-1.1.2": ["datajs","OData"]
    }
};
</script>
<script src="scripts/require.js" data-main="app/main.js"></script>

我建议在这个选项上阅读documentation,以避免可能的误解.

原文链接:https://www.f2er.com/js/150221.html

猜你在找的JavaScript相关文章