gpt4 book ai didi

javascript - 使用模块模式 javascript 调用独立文件类(已编辑)

转载 作者:行者123 更新时间:2023-11-30 20:01:15 24 4
gpt4 key购买 nike

我不确定自己的解释是否正确。我有一个被很多 *.js 文件使用的通用类让我们说 TestClass。

class TestClass {   

constructor(a,b) {
this.a = a || 0;
this.b = b || 0;
}
// methods
suma(a,b)
{
return a+b;
}
}

我需要的是从使用“模块模式”构建的几个 *.js 文件中使用这个“经典”类

//const {moduloTest} = require("scripts/testClass.js");不起作用甚至使用答案 How do I include a JavaScript file in another JavaScript file?

//从“scripts/testClass.js”导入{TestClass};不起作用(即使使用扩展名 *.mjs)

示例文件:

var MyNameSpace = {};
MyNameSpace = (function () {

// global variables
var object1 = new TestClass();

// Private methods
function PrivateMethod () {
console.log("result = ", object1.suma(3,4));
}

// ..........................................................
// public methods
return {
init: function () {},
anotherPublicMethod: function () {}
}
}());

新版本展示了我如何在非常简单的 html 代码中包含对命名空间的调用

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title> module pattern with testClass. </title>

</head>


<!--here the call.-->
<body onload="moduloTest.init();">
<script src="scripts/ClasePrueba.js"></script>
<script src="scripts/modulePattern.js"></script>

</body>

</html>

最佳答案

有趣的问题。我不得不花几分钟弄清楚它是如何工作的。抱歉使用旧的模块语法,我懒得配置 webpack,因此我需要一个可以通过 VSCode 和节点运行的环境。我认为它也适用于新的导入/导出语法:

“模块”文件,已简化为最小示例:

module.exports = {
MyNameSpace: (function() {
//global variables
var p1 = 0;

// Private methods
function private() {
return 'whatever';
}

// Public methods
function public() {
p1 += 1;
return p1;
}

return {
public: public
};
})()
};

我们导入“模块”的文件:

// Destructurizing is recommended, otherwise we need to call 
// our methods like MyNameSpace.MyNameSpace.init()

const { MyNameSpace } = require("./Module.js");

console.log(MyNameSpace) // public: [Function: public] <-- No private methods or vars!
console.log(MyNameSpace.public()); // 1
console.log(MyNameSpace.public()); // 2
console.log(MyNameSpace.public()); // 3

编辑 显示如何将 TestClass 附加到全局对象的代码,以便其他脚本可以访问它(不需要导入/导出或捆绑):

HTML重要的部分是首先同步加载具有共享类的脚本。然后,当附加到全局对象时,所有其他对象都可以访问它。

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> module pattern with testClass. </title>
<script src="./TestClass.js"></script>
</head>
<script>
alert(window.testClass.suma(1,2))
</script>
<body>
</body>
</html>

JS

class TestClass {
constructor(a, b) {
this.a = a || 0;
this.b = b || 0;
}
// methods
suma(a, b) {
return a + b;
}
}

window.testClass = new TestClass();

关于javascript - 使用模块模式 javascript 调用独立文件类(已编辑),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53355208/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com