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

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

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

Answer 4

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

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