1 jQuery插件的类型
jQuery插件主要分为三种类型;
1.1 jQuery方法
这种类型的插件是把一些常用或重复使用的功能定义为函数,然后绑定到jQuery对象上,从而成为jQuery对象的一个扩展方法。
1.2 全局函数
也可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jquery作用域下的一个公共的函数使用。如,jquery的ajax()方法就是利用这种途径内部定义的全局函数。
由于全局函数没有被绑定到jQuery对象上,故不能够在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或者$.fn()方式进行引用。
1.3 选择器
自定义选择器。
2 解析jQuery插件机制
为了方便用户创建插件,jquery自定义了jQuery.extend()和jQuery.fn.extend()方法。
jQuery.extend()方法能够创建全局的函数或者选择器。
jQuery.fn.extend()方法能够创建jquery对象方法。
<script type="text/javascript"> jQuery.extend({ minValue:function(a,b){ return a<b?a:b; }, maxValue:function(a,b){ return a<b?b:a; } });
$(function(){ $('input').click(function(){ var a=prompt("请输入一个数值?"); var b=prompt("请再输入一个数值?"); var c = jQuery.minValue(a,b); var d = jQuery.maxValue(a,b); alert("你输入的最大值是:"+d+"\n你输入的最小值是:"+c); }); }); |
jQuery.extend()和jQuery.fn.extend()方法都包含一个参数,该参数仅接受名/值对结构的对象,其中名表示函数或方法名,而值表示函数体。
jQuery.extend()方法除了可以创建插件外,还可以用来扩展jQuery对象。如,调用jQuery.extend()方法把对象a和b合并为一个新的对象,并返回合并对象将其值赋给变量c。
在合并操作中,如果存在同名属性,则后面参数对象的属性值会覆盖前面参数对象的属性值。
var a = { name:"zhu", pass:123 } var b = { name:"wang", pass:456, age:1 } var c = jQuery.extend(a,b); $(function(){ for(var name in c){ $("div").html($("div").html()+"<br>"+name+":"+c[name]); } }); |
在实际开发中,常常使用jQuery.extend()方法为插件方法传递系列选项结构的参数。
function fn(options){ var options = jQuery.extend({//默认参数选项列表 name1:value1, name2:value2, name3:value3 },options); //使用函数的参数覆盖或合并到默认参数选项列表中 }
fn({name1:value2,name2:value3,name3:value1}); //覆盖新值 fn({name4:value4,name5:value5}); //添加新选项 fn(); //保持默认值 |
jQuery.extend()方法的对象合并机制,比传统的逐个检测参数不仅灵活且简洁,使用命名参数添加新选项也不会影响已编写的代码风格,让代码变得更加直观明白。
3 创建jQuery全局函数
就是jQuery对象的方法,实际上就是位于jQuery命名空间内部的函数。
这些函数有一个共同的特征,既是不直接操作DOM元素,而是操作javascript的非元素对象,或者执行其他非对象的特定操作,如jquery的each()函数和noConflict()函数。
Ajax()方法,它便是一个典型的jquery全局函数,$.ajax()所做的一切都可以通过调用名称ajax()的全局函数来实现。
使用jQuery.extend()方法可以扩展jQuery对象的全局函数。当然我们也可以使用下面的方法快速定义jQuery全局函数。
jQuery.minValue = function(a,b){ return a<b?a:b; }; jQuery.maxValue = function(a,b){ return a<b?b:a; }; |
也既是说,如果要向jQuery命名空间上添加一个函数,只需要将这个新函数指定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$。
考虑到jQuery插件越来越多,因此在使用时可能会遇到自己的插件名与第三方插件名发生冲突。为了避免这个问题,建议把自己的插件都封装在一个对象中。
jQuery.css8 = { minValue : function(a,b){ return a<b?a:b; }, maxValue : function(a,b){ return a<b?b:a; } }
var c = jQuery.css8.minValue(a,b); var c = jQuery.css8.maxValue(a,b); |
4 使用jQuery.fn对象创建 jquery对象方法
创建全局函数只需要通过为jQuery对象添加属性即可,而创建jQuery对象方法也可以通过为jQuery.fn对象添加属性来实现。实际上jQuery.fn对象就是jQuery.prototype原型对象的别名。
jQuery.fn.test = function(){ alert("这是jQuery对象方法!"); } $(function(){ $("input").click(function(){ $(this).test(); }); }); |
jQuery.fn.test = function(){ return this.each(function(){ alert(this.nodeName); }); } $(function(){ $("body *").click(function(){ $(this).test().html(this.nodeName).hide(4000); //连写 }); }); |
5 使用extend()方法创建jQuery对象方法
jQuery.extend()方法能够创建全局函数,而jQuery.fn.extend()方法可以创建jQuery对象方法。
jQuery.fn.extend({
test : function(){
return this.each(function(){
alert(this.nodeName);
});
}
});
6 封装jQuery插件
封装jQuery插件的第一步是定义一个独立域,代码如下所示:
(function($){
//自定义插件代码
})(jQuery);
确定创建插件类型,选择创建方式。
(function($){
$.extend($.fn,{ //jquery对象方法扩展
//函数列表
})
})(jQuery);
(function($){
$.extend($.fn,{ //jquery对象方法扩展
color : function(options){
Var options =$.extend({
bcolor:’white’,
fcolor:’black’
},options);
//函数体
}
})
})(jQuery);
(function($){
$.extend($.fn,{ //jquery对象方法扩展
color : function(options){
Var options =$.extend({
bcolor:’white’,
fcolor:’black’
},options);
return this.each(function(){
$(this).css(‘color’,options.fcolor);
$(this).css(‘backgroundColor’,options.bcolor);
});
}
})
})(jQuery);
$(function(){
$(“h1”).color({
Bcolor:’#eea’,
fcolor:’red’
});
})
7 优化jQuery插件—开放公共参数
续上面的代码为例进行说明,把其中的参数默认值作为$.fn.color对象的属性单独进行设计,然后借助jQuery.extend()方法覆盖原来参数选项即可。
(function($){ $.extend($.fn,{ color:function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } })(jQuery);
$(function(){ $.fn.color.defaults = { bcolor:"#eea", fcolor:"black" } $("h1").color(); $("p").color({bcolor:"#fff"}); $("div").color(); }); |
8 优化jQuery插件—开发部分功能
继续以上一节的示例为基础,为其添加一个格式化的扩展功能,这样用户在设置颜色的同时,还可以根据需要适当进行格式化功能设计,如加粗、斜体、放大等功能操作。
(function($){ $.extend($.fn,{ color:function(options){ var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); var _html = $(this).html(); _html = $.fn.color.format(_html); $(this).html(_html); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } $.fn.color.format = function(str){ return str; } })(jQuery);
$(function(){ $.fn.color.defaults = { bcolor:"#eea", fcolor:"black" } $.fn.color.format = function(str){ return "<strong>"+str+"</strong>"; } $("h1").color(); $("p").color({bcolor:"#fff"}); $.fn.color.format = function(str){ return "<span style='font-size:30px;'>"+str+"</span>"; } $("div").color(); }); |
9 优化jQuery插件—保留插件隐私
若插件包含很多函数,在设计时我们希望这么多函数不搅乱命名空间,也不会被完全暴露,惟一的方法就是使用闭包。为了创建闭包,可以将整个插件封装在一个函数中。
继续以上一个为例,为了验证用户在调用color()方法时所传递的参数是否合法,我们不妨在插件中定义一个参数验证函数,但是该验证函数是不允许外界侵入或者访问的,此时我们可以借助闭包把它隐藏起来,只允许在插件内部进行访问。
(function($){ $.extend($.fn,{ color:function(options){ if(!filter(options)){ return this; } var options = $.extend({},$.fn.color.defaults,options); return this.each(function(){ $(this).css("color",options.fcolor); $(this).css("backgroundColor",options.bcolor); var _html = $(this).html(); _html = $.fn.color.format(_html); $(this).html(_html); }); } }) $.fn.color.defaults = { //独立设置$.fn.color对象的默认参数值 bcolor:"white", fcolor:"red" } $.fn.color.format = function(str){ return str; } function filter(options){//定义隐藏函数,外界无法访问 return !options || (options && typeof options==="object")?true:false; } })(jQuery);
$(function(){ //以下访问非法 $("p").color("#ffffff"); }); |