Каков наилучший способ избежать дублирования кода в этих двух функциях, которые делают одно и то же?

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

Если вы хотите использовать те же функции для гиперссылки, сделайте действие гиперссылки простым нажатием кнопки.

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

Answer 4

Самый простой ответ (хотя, возможно, не самый элегантный) состоит в том, чтобы использовать вторую функцию для обеих (которая явно относится к вашей форме независимо от того, что вызывает функцию), а затем назначить каждому «триггеру» один и тот же класс и прикрепить щелчок. событие для обоих.