javascript - 使用 jQuery 动态加载 JavaScript 类文件时如何避免执行延迟竞争条件？

Question

我现在有大约六个 JS 类文件。我没有放入一堆标签，而是使用 jQuery 动态加载它们——按顺序——就像这样:

var classes = ["A","B","C"...];
blah.load = function(callback) {
    for (var i in classes) {
        console.log("Loading "+blah.RootURL+"/"+classes[i]+".js");
        $.ajax({
            async: true,
            url: blah.RootURL+"/"+classes[i]+".js",
            dataType: "script",
            error: function(jqxhr, status, error) {
                console.log("Unable to load "+classes[i]+": "+status+", "+error);
            },
            success: function(data, status, xhr) {
                if (window.tmpLoadCount) {
                    window.tmpLoadCount++;
                } else {
                    window.tmpLoadCount = 1;
                }

                if (window.tmpLoadCount == classes.length) {
                    console.log("Initializing...");
                    callback();
                }
            }
        });
    }
};

目前我正在使用多个脚本标签，这样我就可以继续工作。我在使用 jQuery 方法时遇到的问题是，有时，当 [重新] 加载时，以前的脚本似乎没有在加载下一个脚本之前执行(或完成执行)，即使使用 async: true 也是如此。 .我的类(class)非常简短。我会通过“加载”日志看到脚本加载，但后来看到类似“无法加载 B:A 不是构造函数”的错误(如果 B 继承自 A)，这向我暗示 A 不完全在 B.prototype=new A(); 时加载行被执行。

我在网上找到了一个引用资料，建议添加一个 setTimeout()调用引擎一些时间，并建议这只发生在处理 jQuery 的“成功”回调中的东西时......不幸的是，我不确定如何确保在不使用成功回调的情况下以动态方式按顺序加载所有内容.

除了许多<script/>标签或缩小(这使得调试更难)或需要类更改，有没有人对如何彻底避免这种“竞争条件”有建议？我目前不太喜欢的想法是让每个类文件的最后一行将其类名添加到全局静态属性，并让 ajax 调用使用一个时间间隔来检查该属性以确定它是否应该加载下一个文件……呸。

Answer 1

RequireJS其实就是为这种情况设计的。你应该认真考虑使用它。我个人认为this blog post by Aaron Hardy比他们自己的文档中实际包含的内容更好、更短、更清楚地描述 RequireJS 是什么以及如何使用它。您可能需要花几分钟时间通读一遍，我认为您会发现这是一个非常好的解决方案。