javascript - 重用两个非常相似的函数的代码的最佳方法

Question

我有两个函数基本上做同样的事情，只是顺序相反。我想要一些关于如何抽象它们的想法，这样就不需要重复这么多代码。我能想到的唯一方法是创建三个额外的函数，然后再调用它们。虽然这使得整体大小更小，但实际上会导致更多的代码行。有没有更好的方法来解决这个问题？ 我知道这是一个基本问题，但我找不到类似的问题。

function slideRight() {
var source = document.getElementById('pic1').src;
switch (source) {
case imgs[0]:
  source=imgs[1];
  document.getElementById('bullet1').style.backgroundColor="transparent";
  document.getElementById('bullet2').style.backgroundColor="gray";
  document.getElementById('bullet3').style.backgroundColor="transparent";
  break;
case imgs[1]:
  source=imgs[2];
  document.getElementById('bullet1').style.backgroundColor="transparent";
  document.getElementById('bullet2').style.backgroundColor="transparent";
  document.getElementById('bullet3').style.backgroundColor="gray";
  break;
case imgs[2]:
  source=imgs[0];
  document.getElementById('bullet1').style.backgroundColor="gray";
  document.getElementById('bullet2').style.backgroundColor="transparent";
  document.getElementById('bullet3').style.backgroundColor="transparent";
  break;
  }
document.getElementById('pic1').src = source;
}


function slideLeft() {
 var source = document.getElementById('pic1').src;
switch (source) {
case imgs[0]:
  source=imgs[2];
  document.getElementById('bullet1').style.backgroundColor="transparent";
  document.getElementById('bullet2').style.backgroundColor="transparent";
  document.getElementById('bullet3').style.backgroundColor="gray";
  break;
case imgs[1]:
  source=imgs[0];
  document.getElementById('bullet1').style.backgroundColor="gray";
  document.getElementById('bullet2').style.backgroundColor="transparent";
  document.getElementById('bullet3').style.backgroundColor="transparent";
  break;
case imgs[2]:
  source=imgs[1]
  document.getElementById('bullet1').style.backgroundColor="transparent";
  document.getElementById('bullet2').style.backgroundColor="gray";
  document.getElementById('bullet3').style.backgroundColor="transparent";
  break;
 }
 document.getElementById('pic1').src = source;
}

编辑:谢谢大家，他们都是好方法!希望我能尽快为您的帮助投票!

Answer 1

根据您的代码修改了代码片段，并对全局变量做了一些假设。

我对类型检查不是很严格。也许你可以在最后输入 check 。让我知道这是否有效。

var imgs = [ <array of images> ], index = 0, source = imgs[ index ];

function slide( direction, imgArray = [] ) {
  var imgArrLen = imgArray.length;

  if( imgArrLen ) {
    if( direction === 'left' ) {
      index = ( index + 1 ) < imgArrLen ? index + 1 : 0;
    } else {
      index = ( index - 1 ) >= 0 ? index - 1 : imgArrLen;
    }

    source = imgs[ index ];

    for( var i = 0; i < imgArrLen; i += 1 ) {
      var bgColorValue = 'transparent';

      if( index === i ) {
        bgColorValue = 'gray';
      }

      document.getElementById('bullet' + ( i + 1 ) ).style.backgroundColor = bgColorValue;
    }
  }
}

向左滑动:

slide('left', imgs);

向右滑动:

slide('right', imgs);

我希望这有帮助。谢谢。