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

Question

我有以下重复代码，用于在满足特定条件时突出显示html/css代码的一部分。也就是说，当我选择布局的三个元素时。因为，选择的顺序无关紧要，我必须重复代码trice，为每个元素创建监听器。

因此，我想重构为一种更具功能性的风格，作为闭包。

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(){

问题是：我如何将变量传递给这个函数，因为它还没有定义(执行不同(。

---

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

Answer 1

无需使用闭包或尝试函数方法(使用dom和响应事件无论如何都需要命令式风格(。

你可以做的第一个简化是使用一个命名函数，而不是重复同一个函数表达式三次——它完全是同一个代码，甚至不依赖于具有不同值的闭包变量。

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);
}