javascript - 我应该避免在模块中使用顶级变量吗？

Question

我正在使用 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)

谢谢。

添加:感谢您在短时间内的多次回复!我修复了错误的示例代码。

Answer 1

您的第二个代码将不起作用，因为 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;，但这在我看来有点难以阅读)