Question

我认为下面的问题与变量范围有关，虽然我可能弄错了。

我创建了一个javascript bookmarklet，它将一些外部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调用最后一个文件。然后你知道文件何时全部加载。

可变范围问题 - 引用外部JS文件中的变量

1 个答案: