Question

我有以下代码，恰好是少于20行的Redux的明智实现。我希望state，beforeSetStateCallbacks和afterSetStateCallbacks仅在模块首次导入时才被初始化。我真的希望这段代码尽可能短，并且在一个文件中。是否有更好的方法可以做到，而又不需要使用全局变量污染window对象？

let state
let beforeSetStateCallbacks
let afterSetStateCallbacks

if (!window.REDUCS_INITIALISED) {
  window.REDUCS_INITIALISED = 1
  state = {}
  beforeSetStateCallbacks = []
  afterSetStateCallbacks = []
}

export const beforeSetState = (fn) => beforeSetStateCallbacks.push(fn)
export const afterSetState = (fn) => afterSetStateCallbacks.push(fn)

export const setState = async (key, value) => {
  for (const fn of beforeSetStateCallbacks) await fn(key, value)
  state[key] = value
  for (const fn of afterSetStateCallbacks) await fn(key, value)
}

export const getState = (key) => {
  return state[key]
}

Answer 1

首次导入该模块时，ES6模块的顶级代码将只运行一次。随后导入模块将仅获取对导出项目的引用。因此，您只需更改代码即可在顶层无条件创建3个变量：

const state = {}
const beforeSetStateCallbacks = []
const afterSetStateCallbacks = []

ES6模块中的静态变量（仅初始化一次）

1 个答案: