编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率
插件的种类
封装对象方法的插件:将对象封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件,95%以上都是封装对象方法的插件,例如:parent()、appendTo()、addClass()等
<script type="text/javascript">
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$("span").color("blue");
});
</script>
封装全局函数的插件:可以将独立的函数加到jQuery命名空间之下。例如:解决冲突用的jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等。
<script type="text/javascript">
;(function($){
$.extend({
"ltrim":function(text){
return (text || "").replace( /^\s+/g, "" );
},
"rtrim":function(text){
return (text || "").replace( /\s+$/g, "" );
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$("textarea").val(
$.trim(" test ")+"\n"+
$.ltrim(" test ")+"\n"+
$.rtrim(" test ")
);
});
</script>
选择器插件:个别情况下,会需要用到选择器插件。虽然jQuery的选择器十分强大,但还是会需要扩充一些自己喜欢的选择器,例如:color(red)来选择所有红色的元素之类的想法。
插件的基本要点:
文件名推荐命名为 jquery.[插件名].js,以免和其他javascript库插件混淆。例如 jquery.color.js
插件内部,this指向的是当前选择器获取的 jQuery 对象,而不像一般的方法那么,例如 click() 方法,内部this指向的是 DOM 元素
可以通过 this.each 来遍历所有元素
插件应返回一个 jQuery 对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量(字符串、数组等)
jQuery插件机制
jQuery 提供了两个用于扩展 jQuery 功能的方法,即 jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展封装对象方法的插件,或者用于扩展后两张插件
jQuery.extend()方法除了可以用于扩展 jQuery 对象之外,还有一个强大的功能,就是用于扩展已有的 Object 对象
var settings = {validate: false, limit: 5, name: "foo" };
var options = {validate: true, name: "bar" };
var newOptions = jQuery.extend(settings, options);
结果
newOptions = {validate: true, limit: 5, name: "bar" }
jQuery.extend() 方法经常被用于设置插件方法的一系列默认参数,如下:
function foo(options){
options = jQuery.extend({
name:"bar",
length:5,
dataType:"xml"
},options);
};
调用:
foo({ name: "a" , length:6 });