结合javascript中的两个功能

Question

我有这两个函数，它们的代码大多相似..所以我想将它们组合成一个 function..

previousMonthImg.onclick = function() {
    if (!(monthSelect.value === "Jan" && yearSelect.value === "2010")) {
        monthSelect.selectedIndex--;
        if (monthSelect.selectedIndex === -1) {
            monthSelect.value = "Dec";
            yearSelect.selectedIndex--;
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
};

nextMonthImg.onclick = function() {
    if (!(monthSelect.value === "Dec" && yearSelect.value === "2030")) {
        monthSelect.selectedIndex++;
        if (monthSelect.selectedIndex === -1) {
            monthSelect.value = "Jan";
            yearSelect.selectedIndex++;
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
}

Answer 1

您可以使用 function 创建事件处理程序。

function makeHandler(monthEnd, monthStart, year, inc) {
    return function(){
        if (!(monthSelect.value === monthEnd && yearSelect.value === year)) {
            monthSelect.selectedIndex += inc;
            if (monthSelect.selectedIndex === -1) {
                monthSelect.value = monthStart;
                yearSelect.selectedIndex += inc;
            }
        }
        triggerEvent(monthSelect, "change");
        triggerEvent(yearSelect, "change");
    }
};
previousMonthImg.onclick = makeHandler("Jan", "Dec", "2010", -1);
nextMonthImg.onclick = makeHandler("Dec", "Jan", "2030", 1);

Answer 2

您可以组合这两个功能，如下所示：

monthImg.onclick = function() {
    let maxMonth = 0;
    let minMonth = 0;
    if (!(monthSelect.value === "Dec" && yearSelect.value === "2030")) {
        maxMonth = 1;
    }
    if (!(monthSelect.value === "Jan" && yearSelect.value === "2010")) {
        minMonth = 1;
    }
    if ((maxMonth) || (minMonth)) {
        if (maxMonth) {
            monthSelect.selectedIndex++;
        } else {
            monthSelect.selectedIndex--;
        }
        if (monthSelect.selectedIndex === -1) {
            if (minMonth) {
                monthSelect.value = "Jan";
                yearSelect.selectedIndex++;
            } else {
                monthSelect.value = "Dec";
                yearSelect.selectedIndex--;
            }                
        }
    }
    triggerEvent(monthSelect, "change");
    triggerEvent(yearSelect, "change");
}

但它会在 function 中增加一点复杂性。 您仍然可以将它们分开。

Answer 3

你可以使用这个：

const myNewFunc = (month, year, num) => {
  if (!(monthSelect.value === month && yearSelect.value === year)) {
    monthSelect.selectedIndex = monthSelect.selectedIndex + num;
    if (monthSelect.selectedIndex === -1) {
      monthSelect.value = month == 'Jan' ? 'Dec' : 'Jan';
      yearSelect.selectedIndex = yearSelect.selectedIndex + num * -1;
    }
  }
  triggerEvent(monthSelect, 'change');
  triggerEvent(yearSelect, 'change');
}

nextMonthImg.addEventListener('click', () => {myNewFunc(...)})
previousMonthImg.addEventListener('click', () => {myNewFunc(...)})