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

使用三元运算符怎么样？三元运算符的操作类似于内联if语句，例如

way == 'right' ? "grey" :  "transparent";

转换为正常if语句将评估为

if(way == 'right'){
   return "grey";
}else{
   return "transparent";
}

这会使你的功能最小化1/2。我在下面提供了一小部分功能样本，看看。

function slide(way) {
    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 = way == 'right' ? "grey" :  "transparent";
         document.getElementById('bullet3').style.backgroundColor=way == 'right' ? "transparent" : "grey";
         break;
       [... Rest of code ...]
}

我认为您希望将way函数中的slide参数转换为lower，这样您就可以忽略向该函数发送值的情况，但是这只是一个建议。

Answer 2

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

我对类型检查并不十分严格。也许你可以在最后输入支票。如果有效，请告诉我。

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

我希望这会有所帮助。感谢。

Answer 3

以下是您的代码的一种可能的重构：

var bullets = [];
bullets[0] = document.getElementById('bullet1');
bullets[1] = document.getElementById('bullet2');
bullets[2] = document.getElementById('bullet3');

var newIndex;
var sourceIndex;
var source = document.getElementById('pic1').src;

function slide(direction) {

    for (var i = 0; i < bullets.length; i++) {
        bullets[i].style.backgroundColor="transparent";
    }

    sourceIndex = imgs.indexOf(source);

    if (direction === 'right') {
        newIndex = (sourceIndex + 1);
        if (newIndex > (imgs.length - 1)) {newIndex = 0;}
    }

    else if (direction === 'left') {
        newIndex = (sourceIndex - 1);
        if (newIndex < 0) {newIndex = (imgs.length - 1);}
    }

    source = imgs[newIndex];
    bullets[newIndex].style.backgroundColor="gray";
    document.getElementById('pic1').src = source;
}

Answer 4

es6缩短：

function slide(isLeft) {
    var el = document.getElementById.bind(document),
    colors = { // move right colors:
        [imgs[0]]: ["transparent", "gray", "transparent"],
        [imgs[1]]: ["transparent", "transparent", "gray"],
        [imgs[2]]: ["gray", "transparent", "transparent"],
        // move left colors:
        [imgs[0]+"left"]: ["transparent", "transparent", "gray"],
        [imgs[1]+"left"]: ["gray", "transparent", "transparent"],
        [imgs[2]+"left"]: ["transparent", "gray", "transparent"],
    }[el('pic1').src + ( isLeft ? "left": "" )];
    // assign proper colors:
    el('bullet1').style.backgroundColor = colors[0];
    el('bullet2').style.backgroundColor = colors[1];
    el('bullet3').style.backgroundColor = colors[2];
    el('pic1').src = source;
}

我使用一个对象来切换（），这是一个较少的样板。它在默认情况下是正确的，通过任何真相向左移动。

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

4 个答案: