Question

我的项目包括以下文件：

./index.html
./js/main.js
./js/vendor/require.js
./js/viewmodel/vm.js

index.html包含以下相关摘录：

<script data-main="js/main.js" src="js/vendor/require.js"></script>
<script type="text/javascript">
    require(['viewmodel/vm', 'ko'], 
        function(viewmodel, ko) {
            ko.applyBindings(viewmodel);
        }
    );
</script>

js/main.js文件如下：

var root = this;
define('jquery', ['http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js'], function () { return root.$; });
define('ko', ['http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'], function (ko) { return ko; });

js/viewmodel/vm.js档案......

define(['jquery', 'ko'], 
    function($, ko) {
        return {
            subject: 'world',
            greeting: 'hello'
        }
    }
);

当您打开浏览器到index.html时，浏览器会尝试加载名为js/ko.js的文件，而不是使用main.js中定义的模块。似乎data-main属性指向的js文件不能保证在依赖项解析之前运行。这对我来说似乎不正确，因为data-main js文件的一个目的是定义require配置（即path，shim等）。我使用的是必需的v2.1.2。

如果我将main.js文件的内容复制到index.html中的脚本块中，这样就可以了。通过“完全正常”我的意思是它解决了ko成为一个模块并找到合适的CDN链接来解析ko而不是尝试下载./js/ko.js。

Answer 1

要使用data-main属性配置整个应用程序，必须为所有代码单个入口点。

您的第二个脚本块通过提供第二个入口点来打破此要求。由于这些入口点将彼此独立地（并且异步地）解决，因此您不能依赖一个入口点来影响另一个入口点。

要解决它，以一种为应用程序提供单一入口点的方式重构代码，并通过此入口点进行配置。

Answer 2

那是因为requirejs设置了async。脚本上的属性。

脚本元素上的布尔异步属性允许外部 JavaScript文件在可用时运行，不会延迟页面加载第一

这意味着两个脚本都是并行加载和评估的，因此这两个脚本都不能从另一个脚本访问方法或函数。如果要在一个脚本中定义requirejs变量，则不得使用require js加载该脚本。

对我而言，如何解决这个问题有三种可能性：

将main.js的内容添加到您的网页（如您所述）
加载main.js文件，不带requirejs作为普通脚本
在加载脚本（link to requirejs docu）

Answer 3

我遇到了同样的问题。我工作的网站的体系结构是在页面的每个部分都异步加载的组件。每个组件都有自己的html，css和js代码。因此，我的解决方案是为所有必需的依赖代码保留一个保护功能，以保护它们不会在主javascript文件之前运行：

<强>的index.html

<head>
<script type="text/javascript">
    window.BeforeMainGuard = {
        beforeMainLoadedFunctions: [],
        hasMainLoaded: false,
        guard: function( func ) {
            console.assert( typeof func === 'function' );
            if( this.hasMainLoaded ) {
                func();
            }else {
                this.beforeMainLoadedFunctions.push( func );
            }
        },
        onMainLoaded: function() {
            for( var i = 0; i<this.beforeMainLoadedFunctions.length; ++i ) {
                var beforeMainLoadedFunction = this.beforeMainLoadedFunctions[i];
                  beforeMainLoadedFunction();
            }
            this.beforeMainLoadedFunctions = null;
            this.hasMainLoaded = true;
        }
    };
</script>
<script data-main="js/main.js" src="js/vendor/require.js"></script>
<script type="text/javascript">
    window.BeforeMainGuard.guard( function() {
        require(['viewmodel/vm', 'ko'], 
            function(viewmodel, ko) {
                ko.applyBindings(viewmodel);
            }
        );
    });
</script>
</head>

<强> JS / main.js

require.config({
  // your config
});

require( [ 'AppLogic' ], function( AppLogic ){      
    AppLogic.Init();
    window.BeforeMainGuard.onMainLoaded();
} );

RequireJS在加载所需模块之前不运行数据主脚本

3 个答案: