Da ich meinen Javascript-Code in node.js umwandle, ändere ich den alten Code, um ihn an ES6 anzupassen, und verwende dabei „Class< /strong>“ und „Module“ statt nur „Function " "Komponente.
Ich habe zuerst die Serverseite aktualisiert und alles verlief reibungslos. Aber jetzt versuche ich, in den Client zu gelangen, und habe Probleme beim Konvertieren der alten Kodierung in die neue.
Im folgenden Beispiel finden Sie 2 Applets:
Das „Modul“-Applet besteht aus 2 Dateien: „FooClass.js“ und „Foo_mod.html“.
„Komponenten“ umfassen „FooComp.js“ und „Foo_comp.html“.
Alle 4 Dateien werden im selben Ordner gespeichert. Beide Applets sollten eine Warnmeldung „x = 7“ anzeigen, das „Module“-Applet jedoch nicht, während die altmodischen Leute es richtig machen. Wenn Sie jedoch Strg drücken und auf den JS-Dateinamen in VS Code klicken, ist es kein Problem, über den HTML-Code auf die JS-Datei zuzugreifen. Mit meinem neuen Code muss also etwas nicht stimmen, aber ich kann ihn nicht finden. Wenn mir jemand helfen kann, danke im Voraus...
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 – Altes Methoden-Applet: (funktioniert gut)
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> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您应该修改
FooClass.js文件以使用ES6 导出语法而不是module.exports：export class Foo { constructor() { this.foo = ""; } cinq(x) { return x + 5; } }您可以使用
import语句导入Foo类：<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>