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

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 都有一个单独的绑定，一个选项是导出一个函数，调用时创建一个 count 变量，returns 一个递增它的函数和 returns 新计数：

// 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;，但在我看来这有点难读）

Answer 2

require 导入一次目标脚本。对该脚本的 require 的后续调用将 return 该脚本的第一次 require 调用的结果。这就是为什么可以使用循环依赖，否则循环依赖会导致死循环。

这意味着如果你想要单独的实例，你应该制作一个东西来制作这些实例，然后导出那个东西。生成事物实例的一些事物是：

类,
构造函数，
工厂函数等

// fooModule.js
export class Counter {
  constructor(count = 0) {
    this.count = count
  }
  countUp() {
    return ++this.count
  }
}

// index.js
const counterA = new Counter(1)
console.log(counterA.countUp()) // 2

const counterB = new Counter(0)
console.log(counterB.countUp()) // 1

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

Should I avoid using top-level variables in module?

javascript

es6-modules