我该如何重构这个jQuery代码？

Question

下面的代码是一个简单的通讯注册小部件。

我敢肯定有一种方法，使之更加简明扼要，任何想法？

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

您在这里有一些类似的代码。

// 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(); 
}); 

它可以被重构，所以相似性是显而易见的。

// 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(); 
}); 

所以你可以换行链接和表单到一个函数。

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

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

正如其他人指出的那样，你可以删除redunant $（）秒。

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

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

Answer 2

它已经很简洁了，你可以做的事情不多。

任何你有$（email_submit），你只需有email_submit，因为你已经把它包在$（）（这使它成为一个jQuery对象）。

如：

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

Answer 3

像帕特里克说（+1），你也可以跳过额外功能：

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

我喜欢帕特里克McElhaney码最佳。

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

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

重构的一部分不会过度。我不建议创建一个额外的点击事件来调用其他点击事件。重构的重点是可读性和灵活性。您也可以使用jQuery方法“add”来缩小代码，但它会变得更难以阅读。

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