jQuery插件的种类
编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。jQuery的插件主要分为以下三种类型:
1.封装对象方法的插件
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是一种最常见的插件。绝大部分的jQuery插件都是封装对象方法的插件。此类插件可以发挥出jQuery的强大优势。
2.封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。例如noConflict()方法是jQuery内部作为全局函数的插件附加到内核上去的。
3.选择器插件
极少数的情况下,需要用到选择器插件。虽然jQuery的选择器十分强大,但还是会需要扩充一些适用的选择器。
jQuery插件的基本要点
(1)jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。
(2)所有对象方法都应该附加到jQuery.fn对象上,所有的全局函数都应当附加到jQuery对象本身上。
(3)插件内部,this指向的是当前通过选择器获取的jQuery对象,对于一般的方法,内部的this指向的是DOM元素。
(4)可以通过this.each来遍历所有元素。
(5)所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题。为了更稳妥些,甚至可以在插件头部先加上一个分号,以免他人的不规范的代码给插件带来影响。
(6)通常情况下,插件应该返回一个jQuery对象,以保证插件能够链式操作。
(7)避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突。当然可以用笔包这种技巧来回避这个问题,使插件内部继续使用$作为jQuery的别名。常见的jQuery插件的结构如下:
//为了更好的兼容性,开始前加分号
;(function($){
/*这里放置代码,可以使用$作为jQuery对象别名*/
})(jQuery);//这里将jQuery作为实参传递给匿名函数
jQuery插件的机制
jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。这两个方法都接受一个参数,类型为Object。Object的”键/值对”分别代表“函数方法名/函数主体”。
1.jQuery.extend()
可以用于扩展后两种插件。该方法是对jQuery对象的扩展,可以理解为静态方法,不需要实例jQuery就可以使用,代码如下:
jQuery.extend({
add : function(a, b){
return a + b;
}
});
alert($.add(2, 3)); //7
jQuery.extend()方法除了可以用于扩展jQuery对象之外,还能用于扩展已有的Object对象。如合并settings对象和options对象,修改并返回settings对象,代码如下:
var defaults = {name:'ZhangSan', sex:'男', age:20};
var options = {name:'LiSi', age:22};
var newOpts = $.extend(defaults, options);
//结果newOpts = {name:'LiSi', sex:'男', age:22};
2.jQuery.fn.extend()
用于扩展之前提到的三种类型插件中的第一种。该方法是对jQuery元素的扩展,只能用在jQuery元素上,可以理解为普通方法,即获取了相应的jQuery对象才能调用。定义插件时需要返回this,以支持jQuery的链式操作,代码如下:
$.fn.extend({
color : function(c){
this.css("color", c);
}
});
alert($('#test').color('red'));
编写jQuery插件
常见jQuery插件的结构如下:
;(function($){
//这里编写插件的代码,可以继续使用$作为jQuery的别名
//定义一个局部变量foo,仅方法内部可以访问
var foo;
var bar = function(){
/*
在匿名函数内部的函数都可以访问foo,即使在外部调
用bar()的时候,也可以在bar()的内部访问foo,但
无法在匿名函数外部直接访问foo
*/
}
/*
下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围,
这样就可以在匿名函数的外部通过$.BAR()来访问内部定义的函数
bar(),并且内部函数bar()也能访问foo
*/
$.BAR = bar;
})(jQuery);
1.封装jQuery对象方法的插件
这里主要是为了说明编写jQuery插件的过程和注意事项,就以一个简单的实例(设置和获取颜色)来说明。
1)插件功能说明
(1)设置匹配元素的颜色。
(2)获取匹配元素的颜色。
2)将该插件按规范命名为jquery.color.js。
3)在JS文件中搭好框架,由于是对jQuery对象的方法扩展,因此采用扩展插件方法jQuery.fn.extend()来编写,代码如下:
;(function($){
$.fn.extend({
color : function(c){
//这里写插件的代码
}
});
})(jQuery);
4)编写插件的实现代码如下:
;(function($){
$.fn.extend({
color : function(c){
if(c == undefined){//如果不传值,则获取字体颜色
return this.css("color");
} else { //如果传值,则设置字体颜色
return this.css("color", c);
}
}
});
})(jQuery);
这样,一个简单的jQuery插件算是完成了。
2.封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数。这类插件只是普通的函数。
例如新增两个函数,分别用于去除左侧和右侧的空格,代码如下:
;(function($){
$.extend({
ltrim : function(text){
return (text || "").replace(/^\s+/g, "");
},
rtrim : function(text){
return (text || "").replace(/\s+$/g, "");
}
//(text || "")部分是用于放置传递进来的text这个字符串变量是未定义的状态
//当text是undified,则返回字符串"",否则返回字符串text
});
})(jQuery);