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> 
1
0
0
您應(yīng)該修改 FooClass.js 文件以使用 ES6 導(dǎo)出語(yǔ)法而不是 module.exports ：
export class Foo {
constructor() {
this.foo = "";
}
cinq(x) {
return x + 5;
}
}
您可以使用import語(yǔ)句導(dǎo)入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>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
