0

javascript ファイルでクラスを定義しました...そのファイルを 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 変数への参照を失いました (これは望ましくありません)... モジュールで定義されたものを参照する方法はありますか?

その参照が必要な最も重要な理由は、Google Chrome コンソールからアプリ オブジェクトにアクセスできることです...

ありがとう！

4

1 に答える 1

0

次の方法で、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);
}

}

于 2021-01-29T18:21:29.640 に答える