通常状况咱们在编写基于jquery插件时都会默认用到一下的格式! css
jQuery插件的机制
JQuery提供了2个用于扩展JQuery功能的方法。即:
①jQuery.fn.extend()
②jQuery.extend()
第一个就是咱们前面说插件类型的对象方法,第二个就是指jquery类对象方法。
jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。 html
jQuery提供了2个供用户扩展的‘基类’ – $.extend和$.fn.extend. java
$.extend 用于扩展自身方法,如$.ajax, $.getJSON等,$.fn.extend则是用于扩展jQuery类,包括方法和对jQuery对象的操做。为了保持jQuery的完整性,我比较 趋向于使用$.fn.extend进行插件开发而尽可能少使用$.extend. jquery
尽可能使用Id选择器,jQuery的选择器使用的API都是基于getElementById或getElementsByTagName,所以能够知道 效率最高的是Id选择器,由于jQuery会直接调用getElementById去获取dom,而经过样式选择器获取jQuery对象时每每会使用 getElementsByTagName去获取而后筛选。 ajax
jQuery插件代码格式:
// 能够去掉开头的 ; (分号),国外的开发人员编写的插件时的一种习惯
;(function($){
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery); 数组
//传入一个jQuery的参数(其是就是匿名函数的参数$的值为jQuery),是由于该方法是对jQuery库的扩展,那么在该方法体内就能够调用jQuery库中的函数;若不传入,则没法调用jQuery库 闭包
虽然在jQuery命名空间中,咱们禁止使用了大量的javaScript函数名和变量名。可是仍然不可避免某些函数或变量名将于其余jQuery插件冲突,所以咱们习惯将一些方法封装到另外一个自定义的命名空间。 dom
在编写插件时,要注意:①jQuery.fn.extend() ②jQuery.extend() 这两种方式。 jquery插件
通常状况最好选用$.fn.插件名=function(){} 函数
要注意引用$.fn.extend,确保不会与jquery自带里面的对象方法重名。
$.fn.extend({
方法名:function(){}
});
;(function($){
$.fn.yourName = function(options){})(jQuery);
这样编写的好处:
1. 使用闭包:
这是来自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("执行后");
})
参考资料: