jQuery插件开发规范
1. 使用闭包
(function($) {
// Code goes here
})(jQuery);这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery '。
2. 扩展
jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.$.extend 用于扩展自身方法，如$.ajax, $.getJSON等；
$.fn.extend则是用于扩展jQuery类，包括方法和对jQuery对象的操作。
为了保持jQuery的完整性，趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.
demo.js
;(function($){ //“；”是为了避免代码合并等不必要的错误
$.fn.demo=function(options){
//使用对象的形式
var defaults={ //默认参数
color:'green'
}
// 将用户传进来的参数扩展覆盖默认参数
var options=$.extend({},defaults,options); //{}主要是为了创建一个新对象，保留对象的默认值
// 功能实现
this.each(function(){ //支持jQuery选择器
$(this).css('background',options.color);
});
return this; //使之能够链式操作
}
})(jQuery);demo.html
...
<title>demo</title>
<script src="jquery.js"></script>
<script src="demo.js"></script> //载入插件文件
...
<div id="div1">
demo
<script>
$("#div1").demo({ //调用方式
color:'black' //如果用户不传递参数就使用默认参数
});
</script>
</div>
...备注：官方推荐插件的命名标准写法是jquery.demo.v1.0.js或者jquery-demo-v1.0.js(jquery.插件名.版本号.js);
类级别的插件开发
1、直接给jQuery添加静态函数
jQuery.demo=function(){
//功能代码
}
//调用方式：
$.demo();
2、使用extend()方法
jQuery.extend({
demo1:function(){
//功能代码
}
demo2:function(){
//功能代码
}
});
// 调用方式：
$.demo1();
$.demo2();3、使用命名空间
jQuery.kongjian={
demo:function(){
}
}
// 调用方式：
$.kongjian.demo();