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

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

我只想在像这样调用函数时调用它。

$（'table'）。newDataTable（）

，但是我现在写了这个

$（文档）.ready（函数（）{
var showInterval=10；
var showCount=显示间隔；
var startCount=0；
$（'table tbody tr'）.hide（）；
$（'table tbody tr'）.slice（startCount、showCount.show（）；
$（'.top\u div\u left select'）。on（'change'，function（）{
var showCount=$（this.val（）；
$（'table tbody tr'）.hide（）；
$（'table tbody tr'）.slice（startCount、showCount.show（）；
});
$（'.top\u div\u right input'）。on（'input property change'，function（）{
var showCount=$（'.top_div_left select'）.val（）；
var thistText=$（this.val（）.trim（）.toLowerCase（）；
var i；
如果（thisText==“”）{
$（'table tbody tr'）.hide（）；
$（'table tbody tr'）.slice（startCount、showCount.show（）；
}否则{
var trLength=$（'table tbody tr'）.slice（startCount，showCount）.length；
$（'table tbody tr'）.slice（startCount，showCount）.each（function（）{
var rowText=$（此）；
if（rowText.text（）.toLowerCase（）.indexOf（thistText）=-1）{
$（this.hide（）；
}否则{
$（this.show（）；
};
});
};
});
var totalRows=$（'table tbody tr'）。长度；
var pagiLength=Math.ceil（totalRows/showCount）；
对于（var i=1；i我不会更新整个代码，但会解释如何将表与代码解耦。让我们将整个示例简化为一个需求-显示下拉列表中选择的行数

用于分离插件。将通用表对象和必要的参数传递给插件。其目的是使函数在任何类型的表上工作。
很多时候插件都把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));


你想使用new关键字吗？在这种情况下，这取决于函数是否是构造函数。在这种情况下，不！当你使用插件时，你只需要包含库并在js中调用函数。我只想将此代码作为库编写，并且应该能够在需要时调用特定的表
new$.fn.dataTable、 Api（选择器）；
这是您可以执行的最大值。从Datatable Api文档复制