如何组合两块相似的 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);
}