编写JQuery UI 插件

JQuery UI简介

JQuery UI源自于一个jQuery插件-Interface.Interface插件是由StefanPetre创建的，Paul Bakaus液位该插件的开发做出了重大贡献。

jQueryUI主要分为3个部分，交互、微件和效果库：

- 交互。这里都是一些与鼠标交互相关的内容。包括拖动（Draggable）、 置放（Droppable）、缩放（Resizable）、选择（Selectable）和排序（Sortable）等。微件（Widget）中有部分是基于这些交互组件来制作的。此库需要一个jQueryUI核心库——ui.core.js 支持。

- 微件。这里主要是一些界面的扩展。里边包括了手风琴导航（Accordion）、自动完成（Autocomplete）、取色器（Colorpicker）、对话框（Dialog）、滑块（Slider）、标签（Tabs）、日历（Datepicker）、放大镜（Magnifier）、进度条（Prigressbar）和微调控制器（Spinner）等

- 效果库 。此库用于提供丰富的动画效果，让动画不再局限于animate()方法。

插件的种类

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，后期维护和提高开发效率。
jQuery的插件主要分为3种类型。
1、封装对象方法的插件
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。
2、封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。例如解决冲突用的jQuery.noConflict()方法、常见的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的。
3、选择器插件
个别情况下，会需要用到选择器插件。虽然jQuery的选择器十分强大，但还是会需要扩充一些自己喜欢的选择器，例如 :color （red）来选择所有红色字的元素之类的想法。

插件的基本要点

- jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。例如命名为jquery.color.js。
- 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
- 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。
- 可以通过this.each来遍历所有元素。
- 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可以出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。
- 插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如媳妇串或者数组等。

插件中的闭包

闭包的解释
简单的描述：允许使用内部函数，而且，这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数放回后被执行。

利用闭包的特性，既可以避免内部临时变量影响全局变量，又可以在插件内部继续使用$作为jQuery的别名，常见的jQuery插件都是以下这种形式的：

(function(){
    /*这里放置代码*/
})();

首先定义一个匿名函数，然后用括号括起来，最后通过()这个运算符来执行。可以传递参数进去，以供内部函数使用。

    //为了更好的兼容性，开始有个分号
    ;(function($){//此处将$作为匿名函数的形参
        /* 这里置放代码,可以使用$作为jQuery的缩写别名*/
    }(jQuery));//这里就将jQuery作为实参传递给匿名函数了

上段代码时一种常见的jQuery插件的结构。
接下来看这段jQuery代码

;(function($){
    //这里编写插件的代码,可以继续使用$作为jQuery的别名
    //定义一个局部变量foo;仅函数内部可以访问,外部无法访问
    var foo;
    var bar =function(){
        /*
         在匿名函数内部的函数都可以访问foo，即便是在匿名 函数的外部，
         调用bar()的时候，也可以在bar()的内部访问到foo,但在匿名函
         数的外部直接访问foo是做不到的。
        */
    }
        /*
         下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内
         这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部
         定义的函数bar(),并且内部函数bar()也能访问匿名函数内的变量foo  
    */
    $.BAR = bar;
})(jQuery);

只需要知道所有的插件代码必须放置在下面的两句代码内就可以

    ;(function($){
        //此处编写jQuery插件代码
    })(jQuery);

JQuery插件的机制

jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。
前者用于扩展之前提到的3种类型插件中的第1种，后者用于扩展后两种插件。
这两个方法都接受一个参数，类型为Object。Object对象的”名/值对”分别代表”函数或方法名/函数主体”。
jQuery.extend()方法除了可以用于扩展对象之外，还有一个很强大的功能，就是用于扩展已有的Object对象。
jQuery代码如下:

jQuery.extend(target.obj1,...[objN])

用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);
结果为:
newOptions={validate:true,limit:5,name:”bar”};
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数，如下代码：

function foo(options){
    options=jQuery.extend({
        name:"bar",
        length:5,
        dataType:"xml"  /*默认参数*/
            }.options); /*options为传递的参数*/
    });

如果用户调用foo()方法的时候,在传递的参数options对象中设置了相应的值，那么久使用设置的值，否则使用默认值，代码如下：

foo({name:"a",length:"4",dataType:"json"});
foo({name:"a",length:"4"});
foo({name:"a"});
foo();

一个例子

<script type="text/javascript">
    //插件编写
    ;(function($){
        jQuery.fn.extend({
            "color":function(value){
                return this.css("color",value); 
            }
        });
    })(jQuery);
    //插件应用
    $(function(){
        //查看第1个div的color样式值
        alert($("div").color()+"\n 返回字符串,证明此插件可以。");
        //把所有的div的字体颜色都设为红色
        alert($("div").color("red")+"\n 放回object证明得到的是jQuery对象。");
    })
</script>
<div class="a">red</div>
<div style="color:blue">blue</div>
<div style="color:green">green</div>
<div style="color:yellow">yellow</div>

如果要定义一组插件，可以使用如下所示写法：

;(function($){
    $.fn.extend({
        "color":function(value){
        //插件代码
        },
        "border":function(value){
         //插件代码 
        },
        "background":function(value){
         //插件代码
        }
    })
})