Wie kann ich diesen jQuery-Code refaktorisieren?

Question

Der unten stehende Code ist für ein einfaches Newsletter-Anmelde-Widget.

Ich bin mir sicher, dass es eine Möglichkeit gibt, das Ganze prägnanter zu gestalten, haben Sie eine Idee?

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

Sie haben hier einen ähnlichen Code.

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

Sie könnte umgestaltet werden, so dass die Ähnlichkeit offensichtlich ist.

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

Sie könnten also das Umschalten des Links und des Formulars in eine Funktion verpacken.

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

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

Und wie andere bereits erwähnt haben, können Sie die redundanten $()s weglassen.

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

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

Answer 2

Das ist schon ziemlich knapp, da kann man nicht mehr viel machen.

Überall, wo Sie $(email_submit) haben, können Sie einfach email_submit haben, weil Sie es bereits in $() eingewickelt haben (was es ein Jquery-Objekt macht).

Beispiel:

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

Answer 3

Ich mag Patrick McElhaney Code am liebsten.

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

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

Ein Teil des Refactoring besteht darin, nicht zu viel zu tun. Ich würde nicht empfehlen, ein zusätzliches Klickereignis zu erstellen, das das andere Klickereignis aufruft. Der Sinn der Umstrukturierung ist Lesbarkeit und Flexibilität. Sie können auch die jQuery-Methode "add" verwenden, um den Code zu verkleinern, aber es wird noch schwieriger zu lesen.

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

Answer 4

Wie Patrick sagte (+1), und Sie können auch die Zusatzfunktion weglassen:

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