javascript - 将脚本动态注入(inject)文档时无法实例化类

Question

我正在试验 javascript 中可用的类，并设置了一个简单的测试用例，如下所示:

<script src="myclass.js></script>

<script>
    var test = new MyClass();
</script>

myclass.js 包含以下内容:

class MyClass {
    constructor() {
    }
}

这按预期工作。

但是，如果我使用 jQuery.getScript() 函数动态加载“myclass.js”，浏览器会返回以下错误:

Uncaught ReferenceError :未定义 MyClass

我仔细检查过的是:

实例化类的代码放在 getScript 函数的成功回调中

而且脚本实际上正在加载和执行(使用简单的控制台日志)

但是我似乎对此一无所知。如果包含类的文件是使用 jQuery.getScript 函数从 javascript 文件加载的，是否有任何原因无法实例化类？

这是不起作用的代码:

<script>
    $(document).ready(function() {
        $.getScript('myclass.js', function () {
            var test = new MyClass();
        });
    });
</script>

在 Chrome 版本 71.0.3578.98(64 位)上测试

Answer 1

看看 this question and its answers 以及 documentation 这样说成功回调在加载后运行但不一定在执行脚本后运行。

总而言之，通过附加 then(或 done)处理程序来运行您的代码可能就足够了:

$.getScript(url).then(function() {
    var test = new MyClass();
});

如果这还不够，您应该回退到使用 setInterval 触发的检查类是否存在(找到类后停止间隔)。 这样，当脚本在加载后执行时，您就可以避免对特定浏览器行为的任何依赖。

function afterScriptExecuted() {
    var test = new MyClass();
}

function testScriptExecuted() {
    return window.MyClass !== undefined;
}

$.getScript(url).then(function() {
    var id = setInterval(function() {
        if (testScriptExecuted()) {
            clearInterval(id);
            afterScriptExecuted();
        }
    }, 50);
});