Comment refactoriser ce code jQuery?

Question

Le code ci-dessous est pour un widget simple d'inscription à la newsletter.

Je suis sûr qu'il y a un moyen de le rendre plus concis, des idées?

var email_form = $('.widget_subscribe form'); 
var email_submit = $('.widget_subscribe .submit'); 
var email_link = $('.widget_subscribe .email'); 

// Hide the email entry form when the page loads 
email_form.hide(); 

// Show the form when the email link is clicked 
$(email_link).click(function() { 
    $(this).toggle(); 
    $(email_form).toggle(); 
    return false; 
}); 

// Hide the form when the form submit is clicked 
$(email_submit).click(function() { 
    $(email_link).toggle(); 
    $(email_form).toggle(); 
}); 

// Clear/reset the email input on focus 
$('input[name="email"]').focus(function() { 
    $(this).val(""); 
    }).blur(function() { 
     if ($(this).val() == "") { 
      $(this).val($(this)[0].defaultValue); 
     } 
}); 

Answer 1

Vous avez un code similaire ici. Il pourrait être refaçonné de sorte que la similitude soit évidente.

// Show the form when the email link is clicked 
$(email_link).click(function() { 
     $(email_link).toggle(); 
     $(email_form).toggle(); 
     return false; 
}); 

// Hide the form when the form submit is clicked 
$(email_submit).click(function() { 
     $(email_link).toggle(); 
     $(email_form).toggle(); 
}); 

Ainsi, vous pouvez faire basculer le lien et le formulaire dans une fonction.

var toggleEmailLinkAndForm = function() { 
     $(email_link).toggle(); 
     $(email_form).toggle(); 
} 

$(email_link).click(toggleEmailLinkAndForm); 
$(email_submit).click(toggleEmailLinkAndForm); 

Et comme d'autres l'ont souligné, vous pouvez supprimer le redunant $() s.

var toggleEmailLinkAndForm = function() { 
     email_link.toggle(); 
     email_form.toggle(); 
} 

email_link.click(toggleEmailLinkAndForm); 
email_submit.click(toggleEmailLinkAndForm); 

Answer 2

Il est déjà assez concis, il n'y a pas grand chose de plus à faire. Partout où vous avez $ (email_submit) vous pouvez simplement avoir email_submit, parce que vous l'avez déjà enveloppé dans $() (ce qui en fait un objet jquery).

Par exemple:

email_submit.click(function() { 
    email_link.toggle(); 
    email_form.toggle(); 
}); 

Answer 3

Comme Patrick dit (+1), et vous pouvez aussi sauter la fonction supplémentaire:

email_submit.click(function() { 
    email_link.toggle(); 
    email_form.toggle(); 
}); 
email_link.click(function() { 
    email_submit.click(); //calls the click function already subscribed 
    return false; 
}); 

Answer 4

J'aime Patrick code McElhaney meilleur.

toggleEmailLinkAndForm() { 
    email_link.toggle(); 
    email_form.toggle(); 
} 

email_link.click(toggleEmailLinkAndForm); 
email_submit.click(toggleEmailLinkAndForm); 

Une partie du refactoring ne va pas trop loin. Je ne recommanderais pas de créer un événement de clic supplémentaire qui appelle l'autre événement de clic. Le point de refactoring est la lisibilité et la flexibilité. Vous pouvez également utiliser la méthode jQuery "add" pour réduire le code mais il deviendra encore plus difficile à lire.

email_link.add(email_submit).click(function(){ 
    email_link.add(email_form).toggle(); 
});