由于我要将 Javascript 代码转换为 node.js,因此我正在更改旧代码以使其适应 ES6,使用“Class< /strong>”和“模块”,而不是仅仅使用“函数”组件。
我首先更新了服务器端,一切顺利。但现在,我正在尝试进入客户端,但在将旧的编码方式转换为新的编码方式时遇到了问题。
在以下示例中,您可以找到 2 个小程序:
“模块”小程序由 2 个文件组成:“FooClass.js”和“Foo_mod.html”。
“组件”包括“FooComp.js”和“Foo_comp.html”。
所有 4 个文件都存储在同一文件夹中。 两个小程序都应该显示一条警报消息“x = 7”,但“模块”小程序则不会,同时旧的时尚的人做得正确。 不过,在 VS Code 中按 Ctrl+单击 js 文件名时,从 html 代码到达 js 文件是没有问题的。所以我的新代码肯定有错误,但我找不到它。如果有人可以帮助我,请先致谢...
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 - 老方法小程序:(工作正常)
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>
您应该修改
FooClass.js
文件以使用ES6 导出
语法而不是module.exports
:您可以使用
import
语句导入
Foo
类: