动态导入使用JavasScript(Dynamically Importing JavasScrip

什么是动态导入的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);
}

文章来源: Dynamically Importing JavasScript