前一段时间,老大让我封装插件,开始翻看之前的笔记和例子,今天天气很好,开始写一段插件机制。jquery有成千上万种的第三方插件,有时候自己写好了一个独立的功能,想将它与jquery结合起来,可以用jquery链式调用,这就需要扩展jquery,下成jquery插件形式了。先来一个小小的例子吧
(function($){
$.fn.extend({
'bold':function(){
return this.css({fontWeight:'bold'
});
}
});
})(jquery);
调用的方式:
$(function(){
//链式调用,加粗p标签中的字体
$('p').bold();
})
这是一个很简单的扩展。
现在开始解释上边的代码:
1,jquery的插件机制
创建插件,jquery提供了两种方法,jquery.extend() 和 jquery.fn.extend()
jquery.extend()方法有一个重载
jquery.extend(object),一个参数的用于扩展jquery类本身,也就是用来在jquery类/命名空间上增加新函数,或者叫静态方法,例如jquery内置的ajax方法都是用jquery.ajax()这个样子来调用,有点像“类名.方法名”静态方法的调用方式。下边来写个jquery.extend(object)的例子:
//扩展jquery对象本身
jquery.extend({
'minValue':function(a,b){
return a < b ? a : b;
},
'maxValue':function(a,b){
return a > b ? a : b;
}
});
//调用
var i = 100;j = 101;
var min_v = $.minValue(i,j);//min_v等于100
var max_v = $.maxValue(i,j);//max_v等于101
重载版本:jquery.extend([deep],target,object1,[objectN])
也许你刚看到这几个参数会有一种懵逼的感觉,没关系,先来解释一下:
deep: 可选 如果设为true,则递归合并
target: 待修改的对象
object1 待合并到第一个对象的对象
objectN 可选 待合并到第一个对象的对象
用一个或多个其他对象来扩展一个对象,返回被扩展的对象
如果不指定target,则对jquery命名空间本身进行扩展。这有助于我为jquery增加新方法
如果第一个参数设置为true,则jquery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制
演示一下:
合并settings 和 options ,修改并返回settings
var settings = { validate:false,limit:5,name:'foo'};
var options = {validate:true,name:'bar'};
jquery.extend(settings,options);
那么结果呢就是seetings == {validate:true
网友评论