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

【问题标题】：How to convert jquery code into a reusable plugin/function如何将 jquery 代码转换为可重用的插件/函数
【发布时间】：2016-07-04 12:15:10
【问题描述】：

我已经创建了一个类似字符串的引导数据表，并且它的工作非常完美，但我只在我的代码中定义了该表。我想把它写成插件。

我只想在我像这样$('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>

【问题讨论】：

您的意思是使用 new 关键字？
在这种情况下，这取决于你的函数是否是构造函数。在这种情况下，不！
当您使用插件时，您只需包含库并在您的 js 中调用函数我只想将此代码编写为库，并且应该能够在需要时调用特定表
new $.fn.dataTable.Api( selector ); 这是你能做的最大。复制自 Datatable API 文档

标签： javascript jquery html css plugins

【解决方案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

【讨论】：