javascript - jQuery - 重用代码而不重复它

Question

我有一个页面，本质上是一个表，按下按钮时其行会重复。每个附加行都有一个唯一的 ID/名称。

我现在遇到这个问题了。我基本上在不同的页面上有一个类似的表格。主要区别在于它可能有额外的输入。目前，它看起来像这样:

JavaScript

 var cloned;

 $(function() {
   initDatepickersAndSelect();

   $('#add_row').on('click', function(evt) {
     addRow();
   });
   $('#delete_row').on('click', function(evt) {
     deleteRow();
   });

   $('#add_row2').on('click', function(evt) {
     addRow(x);
   });
   $('#delete_row2').on('click', function(evt) {
     deleteRow(x);
   });
 });

 function initDatepickersAndSelect() {
   cloned = $("table tr#actionRow0").eq(0).clone();
   $(".dateControl").datepicker({
     dateFormat: "dd-mm-yy"
   });

   $(".responsibility").select2({
     tags: true
   });

   $(".campaignType").select2({
     tags: true
   });
 }

 function addRow() {

   var $tr = cloned.clone();
   var newRowIdx = $("table#actionTable tr").length - 1;
   $tr.attr('id', 'actionRow' + newRowIdx);

   $tr.find("input, select").each(function(i_idx, i_elem) {
     var $input = $(i_elem);

     if ($input.is("input")) {
       $input.val("");
     }

     $input.attr({
       'id': function(_, id) {
         return id + newRowIdx;
       },
       'name': function(_, name) {
         return name.replace('[0]', '[' + newRowIdx + ']');
       },
       'value': ''
     });

   });
   $tr.appendTo("table#actionTable");

   $(".dateControl", $tr).datepicker({
     dateFormat: "dd-mm-yy"
   });

   $(".responsibility", $tr).select2({
     tags: true
   });

   $(".campaignType", $tr).select2({
     tags: true
   });
 }

 function deleteRow() {
   var curRowIdx = $("table#actionTable tr").length;
   if (curRowIdx > 2) {
     $("#actionRow" + (curRowIdx - 2)).remove();
     curRowIdx--;
   }
 }

HTML

<div class="col-md-12 noPadding">
  <table class="table table-bordered table-hover additionalMargin" id="reportTable">
    <thead>
      <tr>
        <th class="text-center">Something</th>
        <th class="text-center">Something else</th>
      </tr>
    </thead>
    <tbody>
      <tr id='actionRow0'>
        <td>
          <select class="campType" name='reportInput[0][campType]' id="reportInput">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </td>
        <td>
          <input type="text" name='reportInput[0][campDelivery]' id="dateInput" class="form-control" />
        </td>
      </tr>
    </tbody>
  </table>
  <a id="add_row" class="btn btn-default pull-right">Add Row</a>
  <a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

我想做的最后一件事就是复制我的所有 JavaScript 并重命名以匹配上面的内容。

我想知道，我是否可以重用 JavaScript？

任何建议表示赞赏。

谢谢

(代码也可用作 JSFiddle )

Answer 1

根据我对这个问题的理解，我认为你可以做这样的事情。假设有一个名为 addRow 的函数，如您的 fiddle 中所示，第一步是在您需要该功能的所有页面上包含该 JS。然后您提到其他页面可能有额外的控件。为此，我将重写该函数...

在具有普通控件的页面上

function addRow() {
  // Row adding code...
}

在带有额外控件的页面上

var oldAddRow = addRow;
var addRow = function(){
  $('.some_other_control').click(ctrlHandler);
  $('.some .input').val('');
  oldAddRow();
}