Question

显然，我是一名初学者并试图找出基本人员，所以请耐心等待我！

我将所有这些文件（index.html，app.js和calc.js）放在同一个文件夹中，其内容如下所示。

我有两个问题：

1：为什么在文件（app.js）中，导入类 Calc 并创建它的新实例，而在文件（calc.js）中类似的过程不适用于类测试？

2：我如何在* .html文件中使用“Calc”类？

注意：我在mac OS 10.13上使用chrome（62.0.3202.94（官方构建）（64位））

// app.js
import { Calc } from './calc.js';

class Test {
    static hello() {
        console.log("hello from class1");
    }
}

let c = new Calc(); // this works!

console.log(c.sum(2, 3) + 1); // 6

export { Test };

和

// calc.js
import { Test } from "./app.js";

class Calc {
    sum(a, b) {
        return a + b;
    }
}

let t = new Test(); // Uncaught ReferenceError: Test is not defined
t.hello();

export { Calc };

最后是HTML文件：

<html>

<head>
    <meta charset="utf-8" />
    <script src="./app.js" type="module"></script>
    <script src="./calc.js" type="module"></script>
</head>

<body>
    <h1>ES6</h1>
<script>
    let c = new Calc();
    // simulate input summation from two textboxes for example
    console.log(c.sum(2, 1)); //Uncaught ReferenceError: Calc is not defined
</script>
</body>

</html>

Answer 1

问题1：

您有循环依赖关系 - app.js导入calc.js，但calc.js导入app.js。

通常模块系统将确保模块本身之前执行所有模块的依赖关系，但是当依赖关系树具有循环时，这是不可能的 - 选择其中一个首先运行。在这种情况下，首先运行calc.js，此时尚未定义Test！

如果你小心的话，有很多方法可以解决这个问题，但循环依赖关系几乎总是表明你的代码构造错误 - 最好的解决方案是重新组织它，这样你就不再有循环了。 / p>

问题2：

ES2016模块不在全局范围内执行。如果你想让窗口整体可用，你需要明确：

window.Calc = Calc;

ES6中的Javascript类，如何在其他js文件和html文件中导入它们？

1 个答案: