在这两个执行相同操作的函数中避免代码重复的最佳方法是什么？

Question

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

<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 中的所有代码。

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

Answer 1

你有这样的功能：

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

然后将两个动作链接到该功能：

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

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

Answer 3

最简单的答案（尽管可能不是最优雅的）是使用第二个函数（显式引用你的表单独立于调用函数），然后给每个'trigger'指定相同的类并附加点击两个事件。

Answer 4

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

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