编写jquery 插件

测试积点老人

一般情况我们在编写基于jquery插件时都会默认用到一下的格式！

jQuery插件的机制
JQuery提供了2个用于扩展JQuery功能的方法。即：

• ①jQuery.fn.extend()
• ②jQuery.extend()
  

第一个就是我们前面说插件类型的对象方法，第二个就是指jquery类对象方法。

jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。

jQuery提供了2个供用户扩展的‘基类’ – $.extend和$.fn.extend.

$.extend 用于扩展自身方法，如$.ajax, $.getJSON等，$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我比较 趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.

尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道 效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

jQuery插件代码格式：
// 可以去掉开头的 ; （分号），国外的开发人员编写的插件时的一种习惯
;(function($){
     $.fn.pluginName = function() {     
           // Our plugin implementation code goes here.     
     };
})(jQuery);   

//传入一个jQuery的参数(其是就是匿名函数的参数$的值为jQuery)，是因为该方法是对jQuery库的扩展，那么在该方法体内就可以调用jQuery库中的函数；若不传入，则无法调用jQuery库

虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。

但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

在编写插件时，要注意：

①jQuery.fn.extend()

②jQuery.extend() 这两种方式。

一般情况最好选用$.fn.插件名=function(){}

要注意引用$.fn.extend，确保不会与jquery自带里面的对象方法重名。

$.fn.extend({

方法名：function(){}

});

;(function($){

$.fn.yourName = function(options){  
//各种属性、参数  
}  
var options = $.extend(defaults, options);  
this.each(function(){  
//插件实现代码  
});  
};  

})(jQuery);

这样编写的好处：

1. 使用闭包：

(function($) {
  // Code goes here
})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

a) 避免全局依赖。

b) 避免第三方破坏。

c) 兼容jQuery操作符'$'和'jQuery '

编写插件实例：

jQuery.expr[":"]实际上就是一个选择器！：

//插件编写
;(function($) {
$.extend(jQuery.expr[":"], {
between : function( a , i ,m ) {
var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0]-0<i&&i<tmp[1]-0;
}
});
})(jQuery);

//插件应用
$(function(){
alert("执行前");
$("div:between(2,5)").css("background","white");
alert("执行后");
})

Miss_love

感谢分享