jQuery插件开发小结

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