javascript - 如何将 jquery 代码转换为可重用的插件/函数

Question

我已经创建了一个像字符串这样的 Bootstrap 数据表，它的工作非常完美，但我只在我的代码中定义了这个表。我想把它写成插件。

我只想在像这样调用它时调用该函数 $('table').newDataTable() 但是现在我写到了这个

$(document).ready(function() {
  var showInterval = 10;
  var showCount = showInterval;
  var startCount = 0;
  $('table tbody tr').hide();
  $('table tbody tr').slice(startCount, showCount).show();
  $('.top_div_left select').on('change', function() {
    var showCount = $(this).val();
    $('table tbody tr').hide();
    $('table tbody tr').slice(startCount, showCount).show();
  });
  $('.top_div_right input').on('input propertychange', function() {
    var showCount = $('.top_div_left select').val();
    var thisText = $(this).val().trim().toLowerCase();
    var i;
    if (thisText == "") {
      $('table tbody tr').hide();
      $('table tbody tr').slice(startCount, showCount).show();
    } else {
      var trLength = $('table tbody tr').slice(startCount, showCount).length;
      $('table tbody tr').slice(startCount, showCount).each(function() {
        var rowText = $(this);
        if (rowText.text().toLowerCase().indexOf(thisText) == -1) {
          $(this).hide();
        } else {
          $(this).show();
        };
      });
    };
  });
  var totalRows = $('table tbody tr').length;
  var pagiLength = Math.ceil(totalRows / showCount);
  for (var i = 1; i <= pagiLength; i++) {
    $('.pagination ul li.right').before('<li class="page"><a href="#">' + i + '</a></li>');
  };
  $('.pagination ul li.page').eq($('table').attr('data-page') - 1).addClass('active');
  $(document).on('click', '.pagination ul li.page a', function(e) {
    e.preventDefault();
    $('.pagination ul li').removeClass('active');
    $(this).parent('li').addClass('active');
    var newPage = $(this).text();
    showCount = showInterval * newPage;
    startCount = showCount - showInterval;
    $('table tbody tr').hide();
    $('table tbody tr').slice(startCount, showCount).show();
  });
  $('.pagination ul li.left a').on('click', function(e) {
    e.preventDefault();
    $('.pagination ul li.page.active').prev('li.page').find('a').trigger('click');
  });
  $('.pagination ul li.right a').on('click', function(e) {
    e.preventDefault();
    $('.pagination ul li.page.active').next('li.page').find('a').trigger('click');
  });
});

.clear {
  clear: both;
}
table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 600px;
  margin: 0 auto;
  text-align: left;
}
table tr td,
table tr th {
  padding: 7px 10px;
}
.top_div {
  width: 600px;
  margin: 0 auto 10px;
}
.top_div .top_div_left {
  float: left;
}
.top_div .top_div_left select {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 7px;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
}
.top_div .top_div_right {
  float: right;
}
.top_div .top_div_right input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 7px;
  height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
}
.pagination {
  width: 600px;
  margin: 10px auto 0;
  text-align: right;
}
.pagination ul {
  font-size: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0;
  float: left;
  overflow: hidden;
}
.pagination ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  border-right: 1px solid #ccc;
}
.pagination ul li:last-child {
  border: none;
}
.pagination ul li a {
  padding: 6px 12px;
  display: block;
  color: #000;
  text-decoration: none;
}
.pagination ul li.active a,
.pagination ul li:hover a {
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top_div">
  <div class="top_div_left">
    <select>
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  <div class="top_div_right">
    <input type="text">
  </div>
  <div class="clear"></div>
</div>
<table cellpadding="0" cellspacing="0" border="1" data-page="1">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Name</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ankit</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Abhishek</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Niharika</td>
      <td>Fifth</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Nidhi</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Rashmi</td>
      <td>Seven</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Deepti</td>
      <td>Eighth</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Neha</td>
      <td>Nineth</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Shruti</td>
      <td>Tenth</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
    <tr>
      <td>13</td>
      <td>Ankit</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>14</td>
      <td>Abhishek</td>
      <td>Fourth</td>
    </tr>
    <tr>
      <td>15</td>
      <td>Niharika</td>
      <td>Fifth</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Nidhi</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>17</td>
      <td>Rashmi</td>
      <td>Seven</td>
    </tr>
    <tr>
      <td>18</td>
      <td>Deepti</td>
      <td>Eighth</td>
    </tr>
    <tr>
      <td>19</td>
      <td>Neha</td>
      <td>Nineth</td>
    </tr>
    <tr>
      <td>20</td>
      <td>Shruti</td>
      <td>Tenth</td>
    </tr>
    <tr>
      <td>21</td>
      <td>Gaurav Aggarwal</td>
      <td>First</td>
    </tr>
    <tr>
      <td>22</td>
      <td>Anurag Verma</td>
      <td>Second</td>
    </tr>
  </tbody>
</table>
<div class="pagination">
  <ul>
    <li class="left"><a href="#">&laquo;</a>
    </li>
    <li class="right"><a href="#">&raquo;</a>
    </li>
  </ul>
</div>

Answer 1

我不会更新整个代码，但会解释如何将表格与您的代码分离。让我们将整个示例简化为一个要求 - 显示在下拉列表中选择的行数。

使用JavaScript namespacing分离你的插件。将通用表对象和必要的参数传递给插件。想法是使该功能适用​​于任何类型的表格。很多时候插件将 json 对象作为参数。通常当输入参数变大时。

$(document).ready(function() {
  var showInterval = 5;
  var showCount = showInterval;
  var startCount = 0;

  $('.top_div_left select').on('change', function() {
    showCount = $(this).val();
    mytableFilter.filter("#mytable", showCount);  
  });

  mytableFilter.filter("#mytable", showCount);  

});

(function (mytableFilter, $, undefined) {
  mytableFilter.filter = function(tableSelector, count) {
  $(tableSelector).find('tbody tr').hide();
  $(tableSelector).find('tbody tr').slice(0, count).show();  
  };

}(window.mytableFilter = window.mytableFilter || {}, jQuery));

JSFiddle

Jquery Plugin Tutorial