时间戳

首页 > 解决方案 > 动态将脚本注入文档时无法实例化类

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

问题描述

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

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

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

myclass.js 包含以下内容：

class MyClass {
    constructor() {
    }
}

这按预期工作。

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

未捕获的 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 位）上进行测试

标签： javascriptjqueryes6-class

解决方案

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

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

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

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

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);
});

推荐阅读