Динамический импорт JavasScript

Question

Как правильно импортировать файлы JavaScript (.js) в родительский код JavaScript, пожалуйста?

Я использую следующий код, но он кажется не правильным:

    function loadjscssfile(filename, filetype)
{
    //if filename is a external JavaScript file
    if (filetype=="js")
    {
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    }
    //if filename is an external CSS file
    else if (filetype=="css")
    {
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

Я думаю, что код не является правильным, потому что в основном коде JavaScript я не могу прочитать переменные, определенные в импортированном коде, такие как:

var fileRef = loadjscssfile('Language/svk.js', 'js');
alert("Pet Name: " + PETNAME);

импортированный файл svk.js содержит единственный код:

// JavaScript Document
var PETNAME = "Beauty";

Спасибо.

Answer 1

Причина, по которой вы не можете прочитать PETNAME переменная в том, что динамически внедряемые скрипты, подобные этому, являются асинхронными и неблокирующими. Это означает, что ваш alert выполняется до того, как скрипт действительно был загружен. Вместо этого вам, возможно, придется опросить существование PETNAME переменная:

var waitForPETNAME = function(){
        if (typeof PETNAME === 'undefined') {
            setTimeout(waitForPETNAME, 15);
        } else {
            // execute code that uses PETNAME
        }
    };

waitForPETNAME();

Кроме того, более надежный способ динамического внедрения элементов - это вставить их перед первым элементом сценария, поскольку вы точно знаете, что элемент сценария должен существовать (иначе вы не выполняли бы код). Другими словами, заменить:

document.getElementsByTagName("head")[0].appendChild(fileref)

с:

var insref = document.getElementsByTagName('script')[0];
insref.parentNode.insertBefore(fileref, insref);

Answer 2

Вы не можете использовать переменные и функции, определенные во внешнем файле JS, сразу после вставки <script> тег. Браузеру требуется несколько миллисекунд, чтобы загрузить файл и выполнить его.

Вам придется работать с каким-то обратным вызовом, чтобы иметь правильный порядок загрузки для вашего JavaScript.

Для правильной условной загрузки JavaScript взгляните на Require.js. Там реализован шаблон определения асинхронного модуля.

Answer 3

В svk.js добавьте следующее (после замедления переменной):

svkLoaded();

В файле мастер-кода добавьте следующее:

function svkLoaded()
{
    alert("Pet Name: " + PETNAME);
}