基于jquery的插件开发

Posted 2020-10-28 随心小宝

　　最近在公司做一个项目，由于后台数据太多需要分页显示，在网上找了很多插件都没有找到合适的分页插件，所有的分页插件始终达不到自己想要的效果。由于这个项目也不是很赶，就在网上查找各种资料，自己写一个基于jquery的分页插件；在接下来的一篇博客中我将详细为大家介绍如何基于jquery书写分页插件，在讲解之前，先给大家介绍一下基于jquery书写插件的相关知识！

　　jquery插件开发主要有三种方法：

　　1、通过$.extend()方法来拓展jquery；

　　2、通过$.fn向jquery添加新的方法；这次在分页插件中就用到了该方法，为jQuery添加新的方法。

　　3、通过$.widget()应用jQuery UI的部件工厂方式创建；不过第三种方法不常用，我们经常使用的就是第一和第二这两个方法，主要原因还是因为相对于第三个方法来说前两个简单一点，好理解。

　　$.extend是最简单的一种，只是在jquery基础上拓展（添加）新方法，只需要用$.functionName就可以调用，也就是说一处定义多处调用；给大家举个例子看看，我们就定义一下输出函数吧

1 $.extend({
2     console: function(str) {
3         console.log(\'hello,Welcome to use the console method defined based on jquery,\'+str);
4     }
5 })
6 $.console(); //调用

$.extend

　　运行结果如下：

　　　

　　但是这种方法无法利用jquery选择器的优点以及便利性，所以我们还需要学习了解第二种方法$.fn。为什么$.fn定义的方法就可以使用dom节点选择器对象获取这些方法呢，那是因为jQuery内部定义了一个jQuery.fn对象，查看jQuery源码可以发现jQuery.fn=jQuery.prototype，也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的，然后jQuery对象就可以通过原型继承这些方法。

　　我们先使用$.fn定义一个最简单的改变字体颜色的小插件，代码如下：

　　

$.fn.changeColor = function(color){
   this.css(\'color\',color); 
}

$.fn.changeColor

　　在这边定义好插件之后就可以调用了，例如;$(\'domName\').changeColor(\'red\')就可以改变该DOM节点的额字体颜色为红色；

　　但常常很多时候我们需要链式调用相关的方法，这就需要我们对上面的方法做以修改，只需要在上面代码方法的末尾加上一段代码就好

　　

return this;

　　这样就可以链式调用，例如$("p").changeColor("red").addClass("red-color");

　　但是很多时候js库都会使用$符号，虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权，但是如果定义插件的时候，使用$.fn对象来定义的，那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况，我们可以使用立即执行函数通过传参的方式封装插件。形式如下：

　

　　

(function($){
     $.fn.changeColor = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));

防止$污染

　　在上面的插件方法中我们可以看到使用了传递参数，但是很多时候我们都使用传递对象的方式传递参数这个时候就用到了$.extend方法，这个方法在这里的用法就是合并两个对象，即把后面一个对象的存在的属性值赋值给第一个对象，具体参考这里，给大家附上相关代码以供参考

　　

1 (function($){
2 
3      $.fn.changeColor = function(option){
4           var defaultSetting = { colorStr:"green",fontSize:12};
5           var setting = $.extend(defaultSetting,option);
6           this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
7          return this;
8      }
9 }(jQuery));

View Code

　　说道这里基于jquery开发插件的方法已经介绍完毕，下面一篇博客我会给大家介绍怎么基于jquery开发一款分页插件。

　　在查看的时候如果发现什么问题,欢迎大家在评论区提出来，我们相互讨论