javascript - 我怎样才能减少这个 Javascript 代码的重复性？

Question

我是 Javascript 的新手，并且一直在通过一些类(class)自学。我只是好奇如何减少以下代码的重复性？有没有一种方法可以让您以不同的方式处理以下问题，或者您会采用相同的方法？

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);
    }
  )
}); 

减少代码总是一件好事，除非减少使代码难以理解。

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

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