重构回调函数

Question

我很难重构颜色开关的代码。颜色最终是未定义的。

如何在传递回调的同时，将颜色变量从主模块传递到模块？

main.js

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

let color = "green"

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

changeColor.js

function changeColor(callback) {
    if (color === "green") {
        color = "red"
    }
    else {
        color = "green"
    }
    callback()
}

export { changeColor };

showColor.js

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

export { showColor };

Answer 1

将color值作为参数发送到您定义为回调引用的函数，然后将参数添加到函数定义中：

​

let color = "green";

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

function changeColor(callback) {
  color = color === 'green' ? 'red' : 'green';
  callback(color)
}

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

<button id="button">Toggle</button>

​