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

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每个导入fooModule都具有一个单独的count绑定，则一个选择是导出一个函数 ，该函数在被调用时创建一个count变量，并返回将其递增并返回新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;在上面的两个代码中，但这很难阅读IMO）

Answer 2

require一次导入目标脚本。 随后对该脚本的require调用将返回对该脚本的第一个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