RequireJS简介（二）--- data-main 入口点

最新推荐文章于 2021-02-26 13:43:38 发布

转载最新推荐文章于 2021-02-26 13:43:38 发布 · 1.4w 阅读

文章标签：

#RequireJS #代码的模块化

前端开发专栏收录该内容

14 篇文章

订阅专栏

本文介绍了require.js如何通过data-main属性加载main.js，并在其中设置路径映射等配置。需要注意的是，在main.js中配置的脚本是异步加载的，因此如果页面中有其他依赖这些脚本的JS代码，可能会因为加载顺序问题而引发错误。

require.js 在加载的时候会检察data-main 属性:

<!--when require.js loads it will inject another script tag
    (with async attribute) for scripts/main.js-->
<script data-main="scripts/main" src="scripts/require.js"></script>

你可以在data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。

.注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

例如：

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

// contents of main.js:
require.config({
    paths: {
        foo: 'libs/foo-1.1.3'
    }
});

// contents of other.js:

// This code might be called before the require.config() in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {

});