当脚本动态注入到文档中时，无法实例化类

Question

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

<script src="myclass.js></script>
<script>
    var test = new MyClass();
</script>

myclass.js 包含以下内容：

class MyClass {
    constructor() {
    }
}

这按预期工作。

但是，如果我使用 jQuery.getScript（） 函数动态加载"myclass.js"，浏览器会返回以下错误：

未

捕获的引用错误：未定义 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

看看这个问题及其答案以及文档，例如成功回调在加载后运行，但不一定在执行脚本后运行。

总而言之，通过附加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);
});

Answer 2

最后，只有以下方法对我有用（而不是使用jQuery.getScript）

var script = document.createElement('script');
script.onload = function () {
      var test = new MyClass();
};
script.src = '/myclass.js';
document.head.appendChild(script);