jQuery插件开发小结

时间:2023-12-17 23:16:38

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();