comment arrêter l'écriture de code répété

Question

Salut, je me demandais comment je peux changer le code ci-dessous pour moins de lignes de code, il contient beaucoup de lignes répétées,

essentiellement ce qu'il fait, il permute les images et les rendre zoom dans,

toute aide serait appréciée,

// JavaScript Document 
$(function() { 

    var fullWidth = 1500; // Width in pixels of full-sized image 
    var fullHeight = 2000; // Height in pixels of full-sized image 
    var thumbnailWidth = 327; // Width in pixels of thumbnail image 
    var thumbnailHeight = 480; // Height in pixels of thumbnail image 

    // Set size of div 
    $('.big_product').css({ 
        'width': thumbnailWidth+'px', 
        'height': thumbnailHeight+'px' 
    }); 

    //on page load hide small product2 and small product3 
    $('#small_product2,#small_product3').hide(); 

    var selected_color; 
    //get the selected color 
    $('#colors option').click(function() { 
     selected_color = $('#colors option:selected').text().toLowerCase(); 

     //show the relevant product according to selected color 
     if(selected_color == 'navy') {    
      $('#small_product2,#small_product3').hide(); 
      $('#small_product1').show(); 
     } 

    else if(selected_color == 'grey') { 
      $('#small_product1,#small_product3').hide(); 
      $('#small_product2').show(); 
     } 

     else if(selected_color == 'black') { 
      $('#small_product1,#small_product2').hide(); 
      $('#small_product3').show(); 
     } 
}); 

//hide the full-sized(the largest) pictures 
$('#full1-1,#full1-2,#full1-3').hide(); 

//hide the thumbnails 
$('#thumbnail1-1,#thumbnail1-2,#thumbnail1-3').hide(); 

//when the first small pic is clicked 
$('#small_product1-1').click(function() { 
    $('#main_product,#big_product1-2,#big_product1-3').hide(); 
    $('#big_product1-1,#thumbnail1-1').show(); 
}); 

// Toggle full and thumbnail pictures on click 
$('#big_product1-1').click(function() { 
    $('#thumbnail1-1').toggle(); 
    $('#full1-1').toggle();     
}); 

// Do some calculations 
    $('#big_product1-1').mousemove(function(e) { 
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

     $('#full1-1').css({ 
      'left': '-' + posX + 'px', 
      'top': '-' + posY + 'px' 
     }); 
    }); 

//when the second small pic is clicked 
$('#small_product1-2').click(function() { 
    $('#main_product,#big_product1-1,#big_product1-3').hide(); 
    $('#big_product1-2,#thumbnail1-2').show(); 
}); 

// Toggle full and thumbnail pictures on click 
$('#big_product1-2').click(function() { 
    $('#thumbnail1-2').toggle(); 
    $('#full1-2').toggle();     
}); 

// Do some calculations 
    $('#big_product1-2').mousemove(function(e) { 
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

     $('#full1-2').css({ 
         'left': '-' + posX + 'px', 
         'top': '-' + posY + 'px' 
     }); 
    }); 

//when the third small pic is clicked 
$('#small_product1-3').click(function() { 
    $('#main_product,#big_product1-1,#big_product1-2').hide(); 
    $('#big_product1-3,#thumbnail1-3').show(); 
}); 

// Toggle full and thumbnail pictures on click 
$('#big_product1-3').click(function() { 
    $('#thumbnail1-3').toggle(); 
    $('#full1-3').toggle();     
}); 

// Do some calculations 
    $('#big_product1-3').mousemove(function(e) { 
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

     $('#full1-3').css({ 
      'left': '-' + posX + 'px', 
      'top': '-' + posY + 'px' 
     }); 
    }); 
}); 

Answer 1

Vous avez déjà vu, qu'il y a quelques passages dans votre code qui semblent très similaires. Essayez simplement de trouver les petites différences et voyez si vous pouvez en faire d'autres. Ainsi, au lieu d'écrire 3x

// Do some calculations 
$('#big_product1-2').mousemove(function(e) { 
    var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
    var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

    var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
    var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

    $('#full1-2').css({ 
    'left': '-' + posX + 'px', 
    'top': '-' + posY + 'px' 
    }); 
}); 
$('#big_product1-2').click(function() { 
$('#thumbnail1-2').toggle(); 
$('#full1-2').toggle(); 

vous pouvez écrire

var doStuff = function(id) { 
    $('#big_product'+id).mousemove(function(e) { 
     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

     $('#full'+id).css({ 
     'left': '-' + posX + 'px', 
     'top': '-' + posY + 'px' 
     }); 
    }); 
$('#big_product'+id).click(function() { 
$('#thumbnail'+id).toggle(); 
$('#full'+id).toggle(); 
} 

et appelez avec doStuff('1-2'); et ainsi de suite ...

Answer 2

Cette partie:

//show the relevant product according to selected color 
if(selected_color == 'navy') {       
    $('#small_product2,#small_product3').hide(); 
    $('#small_product1').show(); 
} 
else if(selected_color == 'grey') { 
    $('#small_product1,#small_product3').hide(); 
    $('#small_product2').show(); 
} 
else if(selected_color == 'black') { 
    $('#small_product1,#small_product2').hide(); 
    $('#small_product3').show(); 
} 

pourrait être écrit comme:

//show the relevant product according to selected color 
$('#small_product1,#small_product2,#small_product3').hide(); 
if(selected_color == 'navy') {       
    $('#small_product1').show(); 
} 
else if(selected_color == 'grey') { 
    $('#small_product2').show(); 
} 
else if(selected_color == 'black') { 
    $('#small_product3').show(); 
} 

et les parties répétées:

//when the third small pic is clicked 
// Toggle full and thumbnail pictures on click 
// Do some calculations 

pourrait être ventilés à une fonction.

Answer 3

Il est très heureux que jQuery baser son fonctionnement sur la corde (sélecteur) donc vous pouvez faire pas mal de trucs avec ça.

Ce qui suit est le code que j'applique l'astuce que je peux y penser. Puisque je n'ai pas votre code HTML aussi et que je suis fainéant, j'en crée un pour que je ne puisse pas tester ce code. S'il vous plaît pardonnez-moi si je me trompe dans le code. :-P

Voici le code:

// JavaScript Document 

function swapSmallProduct(ShowID, MaxID) { 
    var ToShow = "#small_product"+ShowID; 
    $(ToShow).show(); 
    // Use loop or array to customize the id 
    for(i = 1; i <= MaxID; i++) { 
     var IDToHide = ((ShowID + i) % MaxID); 
     var ToHide = "#small_product"+IDToHide; 
     $(ToHide).hide(); 
    } 
} 

function hideAll_Full_and_Thumbnail(MaxID) { 
    // Use loop or array to customize the id 
    for(i = 1; i <= MaxID; i++) { 
     $('#full1-'  +i).hide(); 
     $('#thumbnail1-'+i).hide(); 
    } 
} 

function toggle_BigProduct(ID, MaxID) { 
    var ToShow = "#big_product1-"+ShowID+",#thumbnail1-"+ShowID; 
    $(ToShow).show(); 

    $('#main_product').hide(); 
    for(i = 1; i <= MaxID; i++) { 
     var IDToHide = ((ShowID + i) % MaxID); 
     var ToHide = "#big_product"+IDToHide; 
     $(ToHide).hide(); 
    } 
} 
function toggle_Full_and_Thumbnail(ID) { 
    // Use function to generalize the id 
    $('#thumbnail1-'+ID).toggle(); 
    $('#full1-'  +ID).toggle(); 
} 

function getNumID(StrID) { 
    var RegEx = /[0-9]+$/i; 
    var Match = RegEx.exec(StrID); 
    if (Match == null) 
     return ""; 

    return 0+Match[0]; 
} 


$(function() { 

    var maxID = 3; 
    var fullWidth = 1500; // Width in pixels of full-sized image 
    var fullHeight = 2000; // Height in pixels of full-sized image 
    var thumbnailWidth = 327; // Width in pixels of thumbnail image 
    var thumbnailHeight = 480; // Height in pixels of thumbnail image 

    // on page load hide small product2 and small product3 
    $('#small_product2,#small_product3').hide(); 

    // Set size of div 
    $('.big_product').css({ 
     'width': thumbnailWidth +'px', 
     'height': thumbnailHeight+'px' 
    }); 

    var selected_color; 
    //get the selected color 
    $('#colors option').click(function() { 
     selected_color = $('#colors option:selected').text().toLowerCase(); 
     // show the relevant product according to selected color 
     // Use loop or array to customize the id 
     if  (selected_color == 'navy') swapSmallProduct(1, maxID); 
     else if(selected_color == 'grey') swapSmallProduct(2, maxID); 
     else if(selected_color == 'black') swapSmallProduct(3, maxID); 
    }); 

    // Use function to generalize the id 
    hideAll_Full_and_Thumbnail(maxID); 

    // Use prefix selector 
    $(<i>"[id^='small_product1-']"</i>).click(function() { 
     // and extract the ID to customize each click function 
     var aNumID = getNumID($(this).attr("id")); 
     // Use function to generalize the id 
     toggle_BigProduct(aNumID, MaxID); 
    } 
    // Use prefix selector 
    $(<i>"[id^='big_product1-']"</i>).click(function() { 
     // and extract the ID to customize each click function 
     var aNumID = getNumID($(this).attr("id")); 
     // Use function to generalize the id 
     toggle_Full_and_Thumbnail(aNumID); 
    } 

    // Use prefix selector 
    $(<i>"[id^='big_product1-']"</i>).mousemove(function(e) { 
     // and extract the ID to customize each click function 
     var aNumID = getNumID($(this).attr("id")); 

     var mouseX = (e.pageX-400) - $(this).attr('offsetLeft'); 
     var mouseY = (e.pageY-400) - $(this).attr('offsetTop'); 

     var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth - thumbnailWidth); 
     var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight - thumbnailHeight); 

     $('#full1-'+aNumID).css({ 
      'left': '-' + posX + 'px', 
      'top': '-' + posY + 'px' 
     }); 
    }); 
} 

} 

Voir la partie en gras.

La taille du code n'est peut-être pas plus petite mais elle est maintenant plus facile à espionner (car vous pouvez en avoir plus de 3 et le code ne va pas augmenter) et elle est moins sujette aux erreurs.

J'espère vous donner une idée.

Answer 4

Je vous conseille de lire clean code. Il a permis d'ouvrir les yeux

Answer 5

J'aime le code conduit par table. Cela signifie que la réponse s'adapte très bien lorsque vous ajoutez un quatrième ou un cinquième contrôle. Il sépare également bien l'association entre les données de la mise en œuvre. Je n'ai pas de tome pour lancer le dessous (et mon PHP est faible) donc c'est du pseudo-code, mais j'espère que ça va passer l'idée.

array control_colour_map = { 
    { 'navy', 'small_product1', 
    { 'grey', 'small_product2', 
    { 'black', 'small_product3' } 

for item in control_colour_map 
{ 
    if(selected_colour = item.first) 
     item.second.show() 
    else 
     item.second.hide() 
} 

S'il y avait un spectacle/fonction cache prendre un paramètre booléen il pourrait être encore plus court

for item in control_colour_map 
    item.second.show(selected_colour = item.first)