时间戳

首页 > 解决方案 > 我应该避免在模块中使用顶级变量吗？

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

问题描述

我正在使用 React 编写代码，并且正在尝试将一些逻辑移动到模块中，但我很困惑。

我一直在编写如下几行的模块。

// fooModule.js
let count = 0

export function countUp() {
    count += 1
}

export function getCount() {
    return count
}

无法按预期从外部模块访问此计数变量。

但是，我注意到此变量状态保持不变，当我两次导入此模块时，变量状态已在两者中共享。

那么，我应该改为关注吗？

// fooModule.js
export function countUp(count) {
    return count + 1
}

// someClass.js
import { countUp } from './fooModule.js'

const count = 0
const newCount = countUp(count)

谢谢。

补充：感谢您在短时间内的许多回复！我修复了错误的示例代码。

标签： javascriptes6-modules

解决方案

您的第二个代码将不起作用，因为count不在范围内fooModule，因为您在someClass. 如果您希望 的每个导入fooModule器对 具有单独的绑定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）

推荐阅读