问题描述
我在我的 javascript 文件中定义了 Class...我将该文件导入到 html 页面中：
<script type="module" src="./js/controller.js"></script>
我现在如何访问该 js 文件中的类？ 我想要这样的东西（在我的 html 文件中）：
<script>
let app = null;
document.addEventListener('DOMContentLoaded',function () {
//Init app on DOM load
app = new MyApp();
});
</script>
但它不起作用（我收到 Uncaught ReferenceError: MyApp is not defined）...如果我将此 DOMContentLoaded 侦听器包含在我的 controller.js 文件的末尾，它会起作用。但是我以这种方式丢失了对 app 变量的引用（我不想要）......有没有办法引用模块中定义的东西？
我想要该引用的最重要原因是能够从谷歌浏览器控制台访问我的应用程序对象...
谢谢！
解决方法
您可以通过以下方式从 html 访问 js 文件中的类-
我的 Home.html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<script type="module">
import { Car } from "./main.js";
let obj= null;
alert("Working! ");
obj = new Car("Mini",2001);
obj.PrintDetails();
document.addEventListener('DOMContentLoaded',function () {
let obj2 = new Car("Merc",2010);
obj2.PrintDetails();
});
</script>
</head>
<body>
<h1> Lets try something <br></h1>
</body>
</html>
我的 main.js 文件：
export class Car {
constructor(name,year) {
this.name = name;
this.year = year;
}
PrintDetails() {
console.log(" Name = "+ this.name);
console.log(" year = "+ this.year);
}
}