JavaScript ES6 动态加载 class 并检查是否已加载？

Question

我正在尝试动态加载 class 并检查它之前是否加载过。
下面的代码不起作用，知道为什么吗？

我无法理解为什么这部分不起作用：

if (typeof window['Car'] == 'undefined')

完整来源：

if (typeof window['Car'] == 'undefined') {
    alert("Car class not loaded!");
   }
      
var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';

head.append(script);
      
 setTimeout(function(){
           if (typeof window['Car'] == 'undefined') {
          alert("Even After X seconds, Car class not loaded!");
        }else{
          alert("After X seconds, Car class loaded!");
        } 

  }, 3000);

更新我在这里添加解决方案源，以防 fiddle 丢失：

function testClass(cls) {
  return eval("typeof " + cls + " === 'function'");
}


if (!testClass('Car')) {
        console.log("Car class not loaded when starting as expected!");
}

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';

head.append(script);

 setTimeout(function(){
           if (!testClass('Car')) {
          alert("Even After X seconds, Car class not loaded!");
        }else{
          alert("After X seconds, Car class loaded!");
        } 

  }, 3000);

还有这个url (http://m.uploadedit.com/bbtc/1572125047736.txt) 包含一个简单的 class:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

Answer 1

像您一样动态插入脚本异步运行脚本，因此您要在动态加载的脚本完成加载然后执行之前检查已加载的 class。

您可以使用 script.onload 来确定脚本何时完成加载，然后检查您的 class 是否出现在该回调中。

此外，class 构造函数未添加到 window 对象，因此您必须更改测试其存在的方式，如下所示。

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';
script.onload = function() {
    if (typeof Car === "function") {
        alert("Car class loaded!");
    } else {
         alert("Car class not loaded!");
    }
}

head.append(script);

此处的工作演示：http://jsfiddle.net/v6hay9nb/4/

如果您希望能够将要测试的 class 名称存储在变量中，您可以这样做：

function testClass(cls) {
  return eval("typeof " + cls + " === 'function'");
}

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';
script.onload = function() {
  let cls = "Car"
  if (testClass(cls)) {
    alert("Car class loaded!");
  } else {
    alert("Car class not loaded!");
  }
}

head.append(script);

此处的工作演示：http://jsfiddle.net/jfriend00/9q7yo645/4/

注意：这些工作演示必须通过 http:// 访问，因为它们正在尝试加载 OP 提供的脚本，该脚本仅可用 http://。因此，它们不能在此处显示为 Whosebug 片段（脚本资源需要 https://）。这就是他们使用 jsFiddle 演示的原因。

Answer 2

四件事！您的代码可能没问题，这与服务器相关。

您的文件是 mime 类型 text/plain。应该是 text/javascript or application/javascript.

curl -I  "http://m.uploadedit.com/bbtc/1572125047736.txt"

HTTP/1.1 200 OK

Content-Length: 162

Content-Type: text/plain

Last-Modified: Sat, 26 Oct 2019 21:24:07 GMT

您的文件是通过 http 而不是 https 提供的。当您的页面使用 error blocked mixed content!

作为 https 提供时，浏览器可能会阻止

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users

您的文件没有提供 CORS header。如果您的页面在 https 上运行，则您的浏览器正在阻止：

fetch("http://m.uploadedit.com/bbtc/1572125047736.txt")

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://m.uploadedit.com/bbtc/1572125047736.txt. (Reason: CORS request did not succeed).

Test CORS online

Dynamic module import landed in Firefox 67+!

(async () => {
   await import('//.../synth/BubbleSynth.js')
})()

有错误处理：

(async () => {
    await import('//.../synth/BubbleSynth.js').catch((error) => console.log('Loading failed' + error))
})()

https://caniuse.com/#feat=es6-module-dynamic-import

JavaScript ES6 动态加载 class 并检查是否已加载？

JavaScript ES6 Dynamically load class and check if it was loaded?

javascript

es6-class