重构颜色切换代码遇color未定义：如何同时传递变量与回调？

你的问题核心是模块作用域隔离：main.js里的color是局部变量，changeColor.js和showColor.js作为独立模块，根本访问不到这个变量，所以会报未定义。下面给你几种实用的解决思路：

思路一：通过参数传递变量 #

直接把color作为参数传给子模块的函数，修改后再同步回主模块：

修改后的代码： #

main.js：

import { changeColor } from "./changeColor.js"
import { showColor } from "./showColor.js"

let color = "green"

document.getElementById("button").addEventListener("click", () => {
  // 接收changeColor返回的新颜色，更新主模块的color
  color = changeColor(color)
  // 把更新后的color传给showColor
  showColor(color)
})

changeColor.js：

function changeColor(currentColor) {
  // 直接基于传入的参数修改，返回新颜色
  return currentColor === "green" ? "red" : "green"
}

export { changeColor };

showColor.js：

function showColor(color) {
  console.log(color);
}

export { showColor };

思路二：集中管理状态（推荐） #

把color变量和操作它的函数封装在同一个模块里，避免跨模块传递变量的麻烦：

新增colorManager.js： #

// 模块内部维护color状态
let color = "green"

function changeColor() {
  color = color === "green" ? "red" : "green"
}

function showColor() {
  console.log(color)
}

// 对外暴露操作方法
export { changeColor, showColor }

修改main.js： #

import { changeColor, showColor } from "./colorManager.js"

document.getElementById("button").addEventListener("click", () => {
  changeColor()
  showColor()
})

这种方式让状态和操作绑定在一起，代码更清晰，也不容易出作用域问题。

思路三：回调函数传递更新后的颜色 #

如果一定要保留原有的模块拆分，可以让changeColor调用回调时把新颜色传进去：

修改后的代码： #

main.js：

import { changeColor } from "./changeColor.js"
import { showColor } from "./showColor.js"

let color = "green"

document.getElementById("button").addEventListener("click", () => {
  // 把当前color和回调传给changeColor
  changeColor(color, (newColor) => {
    color = newColor
    showColor(color)
  })
})

changeColor.js：

function changeColor(currentColor, callback) {
  const newColor = currentColor === "green" ? "red" : "green"
  // 调用回调时把新颜色传回去
  callback(newColor)
}

export { changeColor };

showColor.js同思路一，接收color参数即可。

内容的提问来源于stack exchange，提问作者Ray