0

我有一个用例，其中我有一个延迟加载的 JS 文件。在开发过程中，这个 JS 文件将是文件 A 和文件 B 的组合。但是在生产中，它应该先加载文件 A，然后再加载文件 B 以进行分离。当将它们直接添加到 DOM 时，这可以正常工作

for(int i =0; i < urls.length; i++) {
    document.write("<script type='text/javascript' src='" + urls[i] + "'></script>");
}

即使 FileB 在 FileA 之前加载，它也不会首先被评估。

我的代码如下

createScript: function(url, id) {
    var m = this;
    // flag as loaded
    var myonload = function() {
        Logger.debug(formatMessage(Library.RESOURCES["load.success"], [this.src, id]), "core");
        this.library_loaded = true;
    };

    // log loading error
    var myonerror = function() {
        Logger.warn(formatMessage(Library.RESOURCES["load.failure"], [this.src, id]), "core");
    };

    //If currently being grabbed
    // || m.currentAsyc[ids[i]+"/async"]
    if (Library.findScript(url))
        return;
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.library_loaded = false;

    // mozilla
    script.onload = myonload;
    script.onerror = myonerror;
    // ie
    script.onreadystatechange = function() {
        if (this.readyState == "complete" || this.readyState == "loaded") {
            setTimeout(myonload.bindAsEventListener(this), 10);
            this.onreadystatechange = null;
        }
    };

    script.src = url;
    m.head.appendChild(script);         

},

这导致 DOM 具有

<script type="text/javascript" src="/path/to/FileA"></script>
<script type="text/javascript" src="/path/to/FileB"></script>

但是当 FileB 加载速度比 FileA 快时，它会首先尝试评估自己。有什么办法可以防止这种情况发生吗？

进一步说明

我正在尝试在遗留系统中实现类似 Sprockets 的功能。当我通常要求'/dyn/path/to/FileA'时，它会在顶部有 //= require FileB 发送响应

document.write("<script type="text/javascript" src="/path/to/FileA"></script>");
document.write("<script type="text/javascript" src="/path/to/FileB"></script>");

这很好用，因为它可以同步调用。在这种情况下，我进行了 AJAX 调用以查看动态 FileA 需要哪些文件（即 FileA 和 FileB）。这返回说我们需要请求 FileA 和 FileB。问题是我需要回电以确认这两个文件何时实际加载，因为我对其他需要此代码的区域也有等待功能。他们目前正在等待 /dyn/path/to/FileA 完成加载，但是我们现在需要他们等待 FileA 和 FileB 也完成加载。

4

0 回答 0