编写自己的jquery插件之基础

Posted 2020-10-19 xbqianduan

1、编写jquery插件要遵循命名规范，通常情况下，jquery插件采用这种模式进行命名：jquery.pluginName.js，压缩版为：jquery.pluginName.min.js

2、编写jquery插件的方式有3种，第一种是通过jquery函数的原型属性来编写插件。第二种是采用jQuery.extend()方法。第三种是使用强大的jQuery UI Widget Factory编写插件。这里我选择用jQuery函数的原型属性来编写。

　　2.1    jQuery源码中有这样一句代码：jQuery.fn = jQuery.prototype = { //jquery goes here// }，这句代码的意思是，把jQuery函数的原型对象赋值给jQuery的fn属性，在jQuery.fn属性上添加方法就相当于在jQuery的原型对象上添加方法。我们就是通过jQuery.fn来编写jQuery插件。

　　2.2    一个小例子：

1 (function($){
2     $.fn.highlight1= function(){
3     　　this.css(‘backgroundColor‘, ‘#fffceb‘).css(‘color‘, ‘#d85030‘);  
4     　　return this;
5     }
6 })(jQuery);

　　       在这个例子中，我们为jquery扩展了一个highlight1()方法，我们可以像调用jQuery默认的方法那样调用我们扩展的这个highlight1()方法。 1 $(selector).highlight1(); 。这句代码会把匹配的选择器的背景颜色和字体颜色变成highlight1()方法中设置的颜色。

　　　　这样，一个简单的jQuery插件就编写完成了。可能有的朋友会疑惑，为什么要renturn this？原因是我们自己扩展的jQuery方法也要能支持jQuery最精髓的地方—链式调用。return this就是让我们自己扩展的jQuery方法也支持连是调用。因为这里的this也是一个jQuery对象，所以返回它就可以接着链式调用其他方法了。

　　2.3    对上述例子的完善。

　　　　 上面的例子有个不太完善的地方，调用highlight1()方法的时候，只能将匹配的元素的背景和字体颜色变成我们预先设置好的颜色，这样不好。最好是能让用户自定义他们想要的颜色，接下来我们修改一下highlight1()方法。具体方法是我们可以给方法加一个参数，让用户自己把参数用对象传进去。

 1  (function($){
 2      $.fn.highlight2= function(options){ 
 3          //要考虑到各种情况;
 4          //options为undefined;
 5          //options只有部分key;
 6          var bgcolor = options && options.backgroundColor || ‘#fffceb‘;
 7          var color = options && options.color || ‘#d85030‘;
 8          this.css(‘backgroundColor‘, bgcolor).css(‘color‘, color);  
 9          return this;
10     }
11 })(jQuery);

　　　　用户可以像jQuery的css()方法那样给highlight2()方法传参数，来自己制定背景和字体颜色：

1 $(selector).highlight({
2     backgroundColor:‘#ccc‘,
3     color:‘#ff0000‘ 
4 });

　　　　我们也可以让用户修改默认值，用户设置默认值后再调用highlight2()方法就不用每次都传值了。

 1 (function($){
 2     $.fn.hightlight3 = function(){
 3         // 合并默认值和用户设定值:
 4         var opts = $.extend({}, $.fn.highlight.defaults, options);
 5         this.css(‘backgroundColor‘, opts.backgroundColor).css(‘color‘,     
 6         opts.color);
 7         return this;
 8     }
 9 
10     //设定默认值
11     $.fn.highlight3.defaults = {
12         color:"#d85030",
13         backgroundColor:"#fff8de"
14     }
15 })(jQuery)
16 
17 //用户使用时，只需一次性设定默认值
18 $.fn.highlight3.defaults.color = ‘#fff‘;
19 $.fn.highlight3.defaults.backgroundColor = ‘#000‘;
20 
21 //然后调用highlight3()方法就可以了，匹配元素的背景和字体颜色就都是用户自己定义的默认值了
22 $(selector).highlight3();

　　　　这样，我们的highlight()方法就比较完美了。

　　　　也许你注意到了，在最终版的highlight()方法中，用到了$.extend()方法，这个方法我会在下一篇博客中详细介绍。并且在下一篇博客中，我会介绍一下针对特定元素的扩展。