以函数式方式重构 JS 代码 - 闭包

Question

我有以下重复代码，用于在满足特定条件时突出显示一段 html/css 代码。 即当我对select三个元素的布局。 因为，选择顺序无关紧要，我必须重复代码三次，为每个元素创建侦听器。

因此，我想将其重构为更实用的样式，例如闭包。

for (var m=0; m < selectedDessert.length; m++){
    selectedDessert[m].addEventListener("click", function(){
    if (buyImages.length + buyImagesDrink.length + buyImagesDessert.length === 3){
        footerStyle[0].classList.add("order");
        footerStyleSpan.innerHTML = "string";
        
    }});
    selected[m].addEventListener("click", function(){
    if (buyImages.length + buyImagesDrink.length + buyImagesDessert.length === 3){
        footerStyle[0].classList.add("order");
        footerStyleSpan.innerHTML = "string";
    }});
    selectedDrink[m].addEventListener("click", function(){
    if (buyImages.length + buyImagesDrink.length + buyImagesDessert.length === 3){
        footerStyle[0].classList.add("order");
        footerStyleSpan.innerHTML = "string";
        
    }});
};

我想在这些方面重构他：

let combinedVar = buyImages.length + buyImagesDrink.length + buyImagesDessert.length;
var funcOrder = function(selectVar) {
    let selectedVar = selectVar;
    selectVar[i].addEventListener("click", function(){
    if (combinedVar === 3){
        footerStyle[0].classList.add("order");
        footerStyleSpan.innerHTML = "Fechar pedido";
    }
    });
};

var pSelectedDessert = funcOrder(selectedDessert);
var pSelectedDrink = funcOrder(selectedDrink);
var pSelected = funcOrder(selected);

for (var i = 0; i < selected.length; i++) {
    pSelectedDessert();
    pSelectedDrink();
    pSelected();
}

Error:
highlight-all.js:29 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at funcOrder (highlight-all.js:29)
    at highlight-all.js:37

Error-line:
selectVar[i].addEventListener("click", function(){

问题是：我如何将变量传递给这个 function，因为它尚未定义（不同的执行）。

---

演示： https://jsfiddle.net/BuddhiLW/q3mwe9ky/13/

Answer 1

无需使用闭包或尝试功能性方法（使用 dom 和响应事件无论如何都需要命令式风格）。

您可以进行的第一个简化是使用命名的 function 而不是重复相同的 function 表达式三次 - 它是完全相同的代码，它甚至不依赖于具有不同值的闭包变量。

function handleClick() {
    if (buyImages.length + buyImagesDrink.length + buyImagesDessert.length === 3) {
        footerStyle[0].classList.add("order");
        footerStyleSpan.innerHTML = "string";
    }
}
for (var m=0; m < selectedDessert.length; m++) {
    selectedDessert[m].addEventListener("click", handleClick);
    selected[m].addEventListener("click", handleClick);
    selectedDrink[m].addEventListener("click", handleClick);
}