Проблема области переменных - ссылка на переменную во внешнем файле 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 не определяется, хотя библиотека jQuery все еще успешно вставляется в html веб-страницы.Необходимо проверить, был ли jQuery определен так, чтобы остальная часть кода не выполнялась до тех пор, пока jQuery не станет активным и доступным.

Может кто-нибудь предложить некоторые причины этой проблемы, а также решения?Кроме того, кто-нибудь может предложить улучшения моей новой функции jsLoader(), чтобы сделать ее более умной / профессиональной?

Answer 1

Похоже, вам нужен файл jquery, загруженный до того, как плагины сработают, поэтому я бы не стал пытаться загрузить все три сразу (как пытается второй код), но приблизиться к нему, вероятно, как то, что вызывает первоначальная функция 3 сделал (может быть).

Как показывают комментарии, я бы не использовал цикл (если у вас не много файлов плагинов), а использовал бы не вложенную функцию загрузки, такую ​​как jsLoader. Первый вызов загружает jQuery с функцией nextFunction, вызывающей jsLoader для первого файла плагина, а функция nextFunction вызывает последний файл. Тогда вы знаете, когда все ваши файлы загружены.