Как я могу рефакторинг этого кода 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);

И как уже указывали другие, вы можете отбросить избыточные $ () s.

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

Мне нравится Patrick McElhaney Code Best.

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

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

Часть рефакторинга не идет за борт. Я не рекомендовал бы создавать дополнительное событие нажатия, которое вызывает другое событие нажатия. Смысл рефакторинга - читаемость и гибкость. Вы также можете использовать метод jQuery «добавить», чтобы уменьшить код, но его станет еще труднее читать.

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

Answer 4

Как сказал Патрик (+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;
});