变量作用域问题 - 引用外部 JS 文件中的变量

Question

我相信下面的问题与变量范围有关，尽管我可能是错误的。

我创建了一个 javascript 书签，它将一些外部 javascript 文件插入到网页中。对于这个小书签，我需要插入 3 个外部 js 文件。为了插入这些文件，我使用了大约 6 个不同的函数，所有这些函数都非常相似。我尝试创建一个新函数来整合这些函数，但总是失败。我相信它因变量范围问题而失败，但我可能是错的。

下面是用于插入（3 个）外部 js 文件之一的代码：

jQueryCheck();
function jQueryLoader() {
    var jQ = document.createElement('script');
    jQ.type = 'text/javascript';
    jQ.onload = jQueryCheck;
    jQ.src = 'http://example.com/jquery.js';    
    document.body.appendChild(jQ); //the jQuery variable get defined here

}

function jQueryCheck() {
    if (typeof jQuery == 'undefined') {
        jQueryLoader();
    } else {
        tableSorterLoader();
    }
}

上面的代码可以工作，但我必须运行几乎相同的函数 3 次才能插入 3 个单独的外部文件。我尝试将代码合并为以下内容（失败）：

var scripts = [];
    scripts[0] = 'http://example.com/jquery.js';
    scripts[1] = 'http://example.com/plugin2.js';
    scripts[2] = 'http://example.com/plugin3.js';
jsLoader(scripts, mainFunction);
function jsLoader(file,nextFunction) {//nextFunction is the function that runs after jsLoader is finished
    for (var i = 0; i <= scripts.length; i++) {
        function insertScript() {
            var js = document.createElement('script');
            js.type = 'text/javascript';
            js.onload = scriptCheck;
            js.src = file[i];   
            document.body.appendChild(js);//the jQuery variable fails to get defined here
        }
        function scriptCheck() {
            var variableTest = (typeof jQuery);
            if (typeof jQuery == 'undefined') {
                insertScript();
            }
        }
        scriptCheck();
    }
    nextFunction();
}

我相信我隔离了问题发生的位置：在 document.body.appendChild(js); 之后（请参阅评论）。在第一组函数中，在这行代码中成功定义了 jQuery 变量（因为插入了 jQuery 库）。然而，在第二个函数中，即使 jQuery 库仍然成功插入到网页的 html 中，jQuery 变量也没有被定义。有必要验证 jQuery 是否已定义，以便在 jQuery 处于活动状态且可用之前不会执行其余代码。

谁能提出这个问题的一些原因以及解决方案？另外，有人可以对我的新函数 jsLoader() 提出改进建议，使其更加智能/专业吗？

Answer 1

看起来你需要在插件工作之前加载 jquery 文件，所以我不会尝试一次加载所有三个文件（就像第二个代码正在尝试的那样），但要接近它可能就像最初的 3 个函数调用所做的那样（也许）。

正如评论所建议的，我不会使用循环（除非你有很多插件文件），而是使用像 jsLoader 这样的非嵌套加载函数。第一个调用使用 nextFunction 加载 jQuery，为第一个插件文件调用 jsLoader，而 nextFunction 调用最后一个文件。然后您就知道文件何时全部加载。