cari
Soal Jawab Gunakan modul JS dalam fail HTML
Gunakan modul JS dalam fail HTML
P粉301523298 2023-09-07 14:46:07 pandangan 769

0

Memandangkan saya sedang menukar kod Javascript saya kepada node.js, saya menukar kod lama untuk menyesuaikannya kepada ES6, menggunakan "Class< /strong>" dan "Module" dan bukannya "Fungsi" " "Komponen.

Saya mengemas kini bahagian pelayan dahulu dan semuanya berjalan lancar. Tetapi sekarang, saya cuba masuk ke klien dan saya menghadapi masalah menukar pengekodan lama kepada yang baharu.

Dalam contoh berikut, anda boleh menemui 2 applet:

Aplet "modul" terdiri daripada 2 fail: "FooClass.js" dan "Foo_mod.html".

"Komponen" termasuk "FooComp.js" dan "Foo_comp.html".

Kesemua 4 fail disimpan dalam folder yang sama. Kedua-dua applet harus memaparkan mesej makluman "x = 7", tetapi applet "Module" tidak, manakala orang fesyen lama melakukannya dengan betul. Namun, apabila menekan Ctrl+klik nama fail js dalam Kod VS, tiada masalah untuk mencapai fail js daripada kod html. Jadi mesti ada sesuatu yang tidak kena dengan kod baharu saya, tetapi saya tidak menemuinya. Jika ada yang boleh membantu saya, terima kasih terlebih dahulu...

1 - Applet berorientasikan modul (tidak berfungsi):

FooClass.js:

class Foo {
    constructor() {
        this.foo = "";
    }
    cinq (x) {  //(real)->real
        return x + 5;
     }
}
module.exports = Foo;

Foo_mod.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page2</title>
</head>
<body>
    <script type="module" src="./FooClass.js"></script>
    <script type="text/javascript">
        var fx = new Foo();
        var x = fx.cinq(2);
        alert("x = " + x);  // must display "x=7"
    </script>
</body>
</html>

2 - Applet kaedah lama: (berfungsi dengan baik)

FooComp.js

function cinq (x)  { //(real)->real
        return x + 5;
     }
// end of file FooComp.js

Foo_Comp.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FooComp</title>
</head>
<body>
    <script type="text/javascript" src="./FooComp.js"></script>
    <script type="text/javascript">
        var y = 2;
        var x = cinq(y);
        alert("x = " + x);  // must display "x=7"
    </script>
    
</body>
</html>

Your Answer
serahkan

1 jawapan
0

Anda harus mengubah suai FooClass.js 文件以使用 ES6 导出语法而不是 module.exports:

export class Foo {
  constructor() {
    this.foo = "";
  }
  cinq(x) {
    return x + 5;
  }
}

Anda boleh menggunakan import语句导入FooKelas:

<script type="module">
    import { Foo } from "./FooClass.js";
    var fx = new Foo();
    var x = fx.cinq(2);
    alert("x = " + x); // should display "x=7"
</script>
2023-09-08 09:35:10

serahkan

Hot Tools

vc9-vc14 (32+64 bit) koleksi perpustakaan masa jalan (pautan di bawah)

vc9-vc14 (32+64 bit) koleksi perpustakaan masa jalan (pautan di bawah)

Muat turun koleksi perpustakaan runtime yang diperlukan untuk pemasangan phpStudy

VC9 32-bit

VC9 32-bit

VC9 32-bit phpstudy pustaka masa jalan persekitaran pemasangan bersepadu

Kotak alat pengaturcara PHP versi penuh

Kotak alat pengaturcara PHP versi penuh

Programmer Toolbox v1.0 PHP Persekitaran Bersepadu

VC11 32-bit

VC11 32-bit

VC11 32-bit phpstudy pustaka masa jalan persekitaran pemasangan bersepadu

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan