编写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(
"执行后");
})

参考资料:

1.http://www.poluoluo.com/jzxy/201204/163035.html

你可能感兴趣的:(jquery,插件)