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

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

我希望这有助于。谢谢。

Answer 2

如何使用三元运算符？ 三元运算符的运作就像一个内嵌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 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; 
} 

我使用对象来切换（），它是样板以下。它默认是正确的，通过任何truthy向左移动。