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具有单独的绑定，则一种选择是导出 function ，该函数在被调用时会创建一个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

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

2 个答案: