从 index.html 访问 javascript 模块类/对象

Question

我在我的 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 变量的引用（我不想要）......有没有办法引用模块中定义的东西？

我想要获得该参考的最重要原因是能够从谷歌浏览器控制台访问我的应用程序 object ...

谢谢！

Answer 1

您可以通过以下方式从 html 访问 js 文件中的 class -

我的主页.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);
}

}

从 index.html 访问 javascript 模块类/对象

问题描述

1 个解决方案

解决方案1
0 2021-01-29 18:21:29

从 index.html 访问 javascript 模块类/对象

问题描述

1 个解决方案

解决方案1 0 2021-01-29 18:21:29

解决方案1
0 2021-01-29 18:21:29