JQ插件开发

引言

在日常开发中,往往需要定制一些满足特殊需求的JQ插件,所以今天就来说一说怎样开发JQ插件.

介绍

  • JQ插件是用来扩展JQ原型对象的一个方法

  • 插件的使用方式就是JQ对象方法的调用

JQ内部定义了一个jQuery.fn对象,jQuery.fn = jQuery.prototype.

也就是说 jQuery.fn 对象是jQuery的原型对象,方法定义在jQuery.fn对象上.

基础jQ插件

1
2
3
4
5
6
$.fn.changeStyle = function(colorStr){
  this.css("color",colorStr)
}
// 使用方法

$(".p1").changeStyle("red")

插件在调用时 插件内部的this就是调用插件的jQuery对象

这样每个$()在调用插件的时候都会使用插件内的jQ方法

满足链式调用的jQuery插件

链式调用其实是jQuery的一大特色 一个通用插件应该遵循jQuery风格

满足链式调用的要求 所以插件在调用结束以后 需要 return this

即在插件执行完以后 会把当前的jQ对象返回

方便在插件的后面继续调用其他jQuery方法

使用链式调用的方法改写上面的插件

1
2
3
4
5
6
$.fn.changeColor = function(color){
this.css("color",color);
return this;
}

$(".p2").changeColor("yellow").addClass("large");

防止$符号污染的jQuery插件

为了避免$.fn对象受到其他使用$变量的js库的影响,可以使用立即执行函数通过传参的方式封装插件

使用立即执行函数,$只属于这个立即执行的函数的作用域

这样就可以避免$符的污染

==注意== 插件前加分号 避免无法解析为函数

1
2
3
4
5
6
7
8
;(function($){
$.fn.changesColors = function(color){
this.css("color",color);
return this;
}
}(jQuery));

$(".p3").changesColors("green")

传递多个参数

1
2
3
4
5
6
7
8
9
10
11
12
;(function($){
$.fn.changeStyles = function(options){
this.css("color",options.color).css("fontSize",options.fontSize);
return this;
}
}(jQuery))


$(".p4").changeStyles({
"color":"blue",
"fontSize":"30px"
})

把参数放到一个对象中传给插件还有一个好处 就是 我们可以在插件内部为一些参数定义一些缺省值

定义缺省值

1
2
3
4
5
6
7
8
9
10
11
12
;(function($){
$.fn.changesStyle = function(options){
var defaultSetting = {'color':"red",'fontSize':"30px"}
var setting = $.extend(defaultSetting,options)
this.css({"color":setting.color,"fontSize":setting.fontSize})
return this;
}
}(jQuery))

$(".p5").changesStyle()

$(".p5").changesStyle({'color':'orange','fontSize':"40px"})

即 合并两个对象 把后面一个对象存在的属性值赋值给第一个对象

$.extend 还可以用来扩展jQuery对象本身

这样定义的插件 我们在使用时 如果不传参数 那么就会使用这个插件内部的默认值

==注意== 在为插件定义默认参数时 一定要把默认参数写在参数方法内部
这样默认参数的作用域就在插件内部

$.fn.extend 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
;(function($){
$.fn.extend({
styleSet:function(option){
var defaultSetting = {'color':"#fff",'background':"#000"};
var setting = $.extend(defaultSetting,option);
this.css({color:setting.color,background:setting.background})
return this;
}
})
}(jQuery))


$(".p6").styleSet({color:"blue",background:"orange"})

注意

$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能

$.extend方法是在jQuery全局对象上扩展方法 $.fn.extend方法是在$选择符选择的jQuery对象上扩展方法
所以 扩展jQuery的公共方法一般用 $.extend方法 定义插件一般使用$.fn.extend方法