我正在使用 React 编写代码,并且尝试将一些逻辑移至模块,但我很困惑。
我一直在编写如下所示的模块。
// fooModule.js
let count = 0
export function countUp() {
count += 1
}
export function getCount() {
return count
}
此count变量无法按预期从外部模块访问。
但是,我注意到这个变量状态保持不变, 当我两次导入这个模块时, 变量状态在两者中共享。
那么,我应该改为关注吗?
// fooModule.js
export function countUp(count) {
return count + 1
}
// someClass.js
import { countUp } from './fooModule.js'
const count = 0
const newCount = countUp(count)
谢谢。
添加:感谢您在短时间内的多次回复! 我修复了错误的示例代码。
最佳答案
您的第二个代码将不起作用,因为 count
不在 fooModule
的范围内,因为您在 someClass
中创建了它。如果您希望 fooModule
的每个导入程序都有一个单独的 count
绑定(bind),一种选择是导出一个函数,该函数在调用时会创建一个 count
变量,并返回一个递增该变量并返回新计数的函数:
// fooModule.js
export function makeCount() {
let count = 0;
return () => {
count++;
return count;
};
}
// someClass.js
import { makeCount } from './fooModule.js';
const counter = makeCount();
console.log(counter()); // 1
console.log(counter()); // 2
或者,使用生成器:
// fooModule.js
function* makeCount() {
let count = 0;
while (true) {
count++;
yield count;
}
}
// someClass.js
const counter = makeCount();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
(您也可以在上面的两个代码中使用 return++count
而不是 count++; return count;
,但这在我看来有点难以阅读)
关于javascript - 我应该避免在模块中使用顶级变量吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53218708/