同じことを行うこれら2つの関数でコードの重複を回避する最良の方法は何ですか？

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

最も簡単な答えは（おそらく最もエレガントではないかもしれませんが）両方に2番目の関数（関数を呼び出しているものとは無関係にフォームを明示的に参照する）を使用し、各「トリガー」に同じクラスを与えてクリックをアタッチすることです両方にイベント。

Answer 4

ハイパーリンクから同じ機能が必要な場合は、ボタンをクリックするだけでハイパーリンクのアクションを実行できます。

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