Question

我的javascript文件存在非常令人沮丧的问题。我有一个全局命名空间，包含page_data，实用程序，模块等命名空间。

我的目录看起来像这样： /utilities/single_utility.js /modules/module.js等tec

无论如何，我在模块之前加载实用程序（使用实用程序），但一直遇到问题。

我的装载程序脚本看起来像这样（它包裹在SEAF中）：

    for (var index in file_list) {

    var url = file_list[index];
    var new_script = document.createElement('script');

    new_script.setAttribute("type", "text/javascript");
    new_script.setAttribute("src", url);

    element.appendChild(new_script);
}

Project是我的全局命名空间，它包含所有这些其他命名空间。但是当我尝试在我的一个模块中使用Project.utilities.session.exist（）等引用一个实用程序时，它有时会抛出一个无法找到Project的错误？

如何解决此问题以确保我的文件正确加载或我做错了什么？

Answer 1

使用async = false可以保护您的加载订单。

这是我用来加载和维护订单的快速代码段。

var loadScript = function( url ) {
    if (url) {
        var doc = document,
        t = doc.createElement("script"),
        s = doc.getElementsByTagName("script")[0];
        t.type = "text/javascript";
        // Keep script order!
        t.async = false;
        t.src = url;
        s.parentNode.insertBefore(t, s);
    }
};

从MDN和Microsoft

支持此逻辑（以及有关浏览器支持）的一些参考资料

Answer 2

将脚本标记添加到页面时，浏览器必须外出并下载这些脚本。无法保证他们将按照您创建的顺序下载和执行。

根据浏览器的不同，您需要向new_script添加一个事件监听器，以便加载onload或onreadystatechange。但我确实建议使用一个脚本加载库（例如RequireJS）来处理所有讨厌的细节。

顺便说一下，为什么不直接将所有脚本标记添加到您的页面？在这种情况下，他们按顺序加载。

Answer 3

如果使用脚本加载器解决此问题，最好。

正如Matt所说，RequireJS是一个不错的选择，如果您还想处理脚本依赖项。

仅对于脚本加载，您可以查看LAB.js，这是非常小而直截了当的：

for (var index in file_list) {
    $LAB.script(file_list[index]);
}

如果脚本具有依赖关系并且必须按顺序加载，则可以使用.wait()来保持脚本返回的链对象。你可以重新编写循环以保持链：

var chain;
for (var index in file_list) {
    if (!chain) { 
         chain = $LAB.script(file_list[index]).wait(); 
    } else {
         chain.script(file_list[index]).wait();
    }
}

或者忘记file_list数组并直接使用$ LAB：

$LAB.script('file1.js').wait()
    .script('file2.js').wait()
    /* ... */

JS文件乱序

3 个答案: