如何减少此Javascript代码的重复性？

Question

我是Java语言的新手，并且自己通过一些课程学习了。 我只是很好奇如何减少以下代码的重复性？ 有没有办法以不同的方式处理以下问题，还是采用相同的方法？

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
  lorem.classList.toggle("hdr-color-white");
  ipsum.classList.toggle("hdr-color-white");
  lorem.classList.toggle('hdr-left-middle');
  ipsum.classList.toggle('hdr-right-middle');
}); 

Answer 1

一种方法是创建一个toggle函数：

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

function toggle(el, className) {
  el.classList.toggle(className);
}

//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
  toggle(lorem, "hdr-color-white");
  toggle(ipsum, "hdr-color-white");
  toggle(lorem, 'hdr-left-middle');
  toggle(ipsum, 'hdr-right-middle');
}); 

另一个是创建操作数据数组：

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

toggleOps = [
  { el: lorem, name: 'hdr-color-white'},
  { el: ipsum, name: 'hdr-color-white'},
  { el: lorem, name: 'hdr-left-middle'},
  { el: ipsum, name: 'hdr-right-middle'}
]


//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
  toggleOps.forEach( )
    function(op) {
      op.el.classList.toggle(op.name);
    }
  )
}); 

除非减少会使代码难以理解，否则减少代码始终是一件好事。

数据驱动器代码很棒，因为您可以添加更多数据，而不必编写其他代码。

使事情保持干燥（不要重复自己）是值得的。 如果我写了两次，我会考虑重构以将重复的代码移到一个函数中。 如果我需要第三次复制它，那么我将利用这段时间重构为新函数，并修复所有三个位置以调用该函数。

Answer 2

您可以使一个方法进行重复的工作：

var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");

//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
 toggleClass(lorem.classList,"hdr-color-white");
 // so on...
}); 


function toggleClass(elementClassList, className){
 elementClassList.toggle(className);
}