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

巴特西

jQuery插件开发小结