如何对依赖外部变量的JavaScript函数进行模块化拆分？

方案1：优先使用纯函数 + 依赖注入（最推荐） #

把共享变量作为参数传入函数，完全解除函数和全局状态的耦合，函数本身变成可复用的纯函数，测试和维护成本最低。

// add.js
export default function add(num1, num2) {
  return num1 + num2
}

// subtract.js
export default function subtract(num1, num2) {
  return num1 - num2
}

业务调用侧直接传入需要的参数即可：

import add from './add.js'
import subtract from './subtract.js'

const App = {
  num1: 1,
  num2: 2,
  add() {
    return add(this.num1, this.num2)
  },
  subtract() {
    return subtract(this.num1, this.num2)
  }
}

这种方案的优势是函数完全无副作用、和业务状态完全解耦，后续如果其他场景需要用到加减逻辑可以直接复用，也不需要依赖任何全局模块。

方案2：全局状态封装（适合状态需要全局同步更新的场景） #

如果你的num1、num2是需要全局共享、且会动态修改的状态，不要直接导出变量，而是把状态封装成带读写接口的模块，避免多个模块随意修改状态导致的调试困难：

// globalVars.js
let num1 = 1
let num2 = 2

export const getVars = () => ({ num1, num2 })
export const setVars = (newVars) => {
  num1 = newVars.num1 ?? num1
  num2 = newVars.num2 ?? num2
}

函数文件里导入状态读取接口使用即可：

// add.js
import { getVars } from './globalVars.js'

export default function add() {
  const { num1, num2 } = getVars()
  return num1 + num2
}

方案3：高阶函数绑定状态（适合需要预绑定状态、减少重复传参的场景） #

如果你不想每次调用都传参数，可以导出高阶函数，接收状态后返回绑定了对应状态的执行函数：

// add.js
export default function createAdd(num1, num2) {
  return function add() {
    return num1 + num2
  }
}

调用侧初始化时绑定状态即可：

import createAdd from './add.js'
import createSubtract from './subtract.js'

const App = {
  num1: 1,
  num2: 2,
  add: createAdd(this.num1, this.num2),
  subtract: createSubtract(this.num1, this.num2)
}

如果状态是响应式会更新的，还可以改成绑定getter来动态获取最新值。

内容的提问来源于stack exchange，提问作者John Hinrich Joseph G. Galindo