如何組合兩塊相似的 JavaScript 代碼？

Question

我正在嘗試找到一種編寫某種 function 的方法，這樣我就不必繼續重寫相同類型的代碼。

正如您在下面看到的，兩個代碼塊幾乎相同，除了一個用於lunchTimeSelector另一個用於napTimeSelector ？ 有什么方法可以編寫 function 以便我可以通過將[lunchTimeSelector, napTimeSelector, dinnerTimeSelector]等數組輸入 function 來替換此代碼來自動執行此操作？

// Activates Lunch selector
var lunchTimeSelector =  document.getElementById("lunchTimeSelector");

var lunchEvent = function()
{
    lunchtime = lunchTimeSelector.value;
};

lunchTimeSelector.addEventListener("change", lunchEvent);





// Activates Nap-Time selector
var napTimeSelector =  document.getElementById("napTimeSelector");

var napEvent = function()
{
    naptime = napTimeSelector.value;
};

napTimeSelector.addEventListener("change", napEvent);

Answer 1

你可以像這樣實現它：

function addChangeEvent(id, handler){
    document.getElementById(id).addEventListener("change", handler);
}
[["lunchTimeSelector", function(){lunchtime = this.value}], 
 ["napTimeSelector", function(){naptime = this.value}]]
    .forEach(([id,handler])=>addChangeEvent(id,handler));

Answer 2

也許你可以試試：

// wrap all your logic 
function lanuchNapTimeSelector(id,state){

 var target =  document.getElementById(id);

// your handelers
 var lunchEvent = function()
 {
    lunchtime = target.value;
 };

 var napEvent = function()
 {
    naptime = target.value;
 };

 target.addEventListener("change", state === "nap" ? napEvent : 
 lunchEvent);
}