結合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(...)})