在这两个做同样事情的函数中避免代码重复的最佳方法是什么？答案

【问题标题】：What's the best way to avoid code duplication in these two functions that do the same thing?在这两个做同样事情的函数中避免代码重复的最佳方法是什么？
【发布时间】：2009-10-27 20:57:19
【问题描述】：

鉴于此表单（包含提交按钮）：

<form id="review_form">
  <input type="submit" id="btn_submit" value="Submit with ajax! (submit button)">
</form>

和这个链接（提交相同的表格）：

<a href="#" id="lnk_submit">Submit with ajax! (hyperlink)</a>

在下面的jQuery代码中，当#btn_submit元素被点击时，表单（#review_form)是用ajax提交的：

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#btn_submit").submitWithAjax();
})

我想要做的是删除提交按钮并使用上面的链接提交表单 (#lnk_submit) 是这样的：

$("#lnk_submit").click(function(){ 
   $("#review_form").submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
    }); 
   return false;
});

但问题是 这会复制上面定义的 jQuery.fn.submitWithAjax 中的所有代码。

这里避免代码重复的最佳方法是什么？

【问题讨论】：

标签： jquery code-duplication redundancy

【解决方案1】：

你有这样的功能怎么样：

function submitWithAjax() {
    $("#review_form").submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    });         
}

然后将两个动作链接到函数：

$(document).ready(submitWithAjax);
$("#lnk_submit").click(submitWithAjax);

【讨论】：

【解决方案2】：

也许我过于简单了，但你不能将函数分配给一个变量，然后重用它吗？

var submitWithAjaxFn = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

jQuery.fn.submitWithAjax = submitWithAjaxFn;
$("#lnk_submit").click(function(){ 
   $("#review_form").submit(submitWithAjaxFn); 
   return false;
});

【讨论】：

【解决方案3】：

最简单的答案（虽然可能不是最优雅的）是对两者都使用第二个函数（它明确地引用您的表单，独立于调用函数的内容），然后给每个“触发器”相同的类并附加点击双方的事件。

【讨论】：

【解决方案4】：

如果您希望超链接具有相同的功能，只需单击按钮即可执行超链接的操作。

$('#lnk_submit').click(function(e){ $('#btn_submit').click(); return false; });

【讨论】：