代码之家 › 专栏 › 技术社区 › meleyal

如何重构这个jquery代码?

jquery javascript

meleyal · 技术社区 · 16 年前

下面的代码是一个简单的新闻稿注册小部件。

我肯定有办法让它更简洁,有什么想法吗?

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

4 回复 | 直到 13 年前

Patrick McElhaney 13 年前

这里有一些类似的代码。

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

gregmac 16 年前

它已经相当简洁了,没有什么你能做的了。

在您有$(email_submit)的任何地方,您都可以让email_submit提交,因为您已经将它包装在$()中(这使它成为jquery对象)。

如:

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

gradbot 16 年前

我最喜欢帕特里克·麦克尔哈尼密码。

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

Keith 16 年前

就像帕特里克说的(+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;
});