jquery插件编写学习小结_件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。

一、插件的种类
jQuery的插件主要分为3种类型。
1、封装对象方法的插件
2、封装全局函数的插件
3、选择器插件
这里我们主要讨论第一种插件的开发流程。
封装对象方法的插件：
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件，有95%以上的插件都是这种类型的插件。

二、插件的基本要点
1、所有对象方法都应当附加到jQuery.fn上，而所有全局函数都应当附加到jQuery对象本身上。
2、在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不是DOM元素。
3、所有方法或函数插件，都应当以分号结尾，为了更稳妥些，甚至可以再插件头部也加上一个分号，以免他们的不规范代码给插件带来影响。
4、插件应当返回一个jQuery对象，以保证链式操作。
5、闭包的使用。

三、插件中的闭包
闭包：简单来说，当一个内部函数在包含他们的外部函数之外被调用时，就会形成闭包。
利用闭包的特性，既可以避免内部临时变量影响到全局空间，又可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是这样的形式：

;(function ($) {
    //...
 })(jQuery);
1
2
3

再看看这段代码：

;(function ($) {
    //定义一个局部变量foo，仅函数内部可以访问，外部无法访问
    var foo;
    var bar = function(){
        //...
    }
    //下面这句话相当于增加了一个jQuery对象上的全局函数BAR。可以通过$.BAR()的方式来访问内部定义的函数bar()，并且内部函数bar()也能访问foo
    $.BAR = bar;
 })(jQuery);
1
2
3
4
5
6
7
8
9

其实这里与我之前写的一篇介绍模块化编程的博文很相似，都用到了闭包的盖概念，不过在模块化编程中通过闭包可以拓展模块方法，而这里是增加$对象上的方法，也就是jQuery全局函数插件。

四、jQuery.extend()方法
jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend方法和jQuery.extend()方法。前者用于可扩展之前提到的三种类型插件中的第一种，后者用于扩展后两种插件。这里要介绍的是jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展已有的Object对象。

jQuery.extend(target,obj1,obj2,...objn);
1

用一个或多个对象来扩展一个对象，然后返回被扩展的对象。
举个栗子：

var settings = { validate: false,limit: 5,name: "foo" };
var options= { validate: true,name: "bar" };
var newOptions = jQuery.extend(settings,options);
1
2
3

结果为：

newOptions = { validate: true,limit: 5,name: "bar" };
1

显然，这个方法的特性可以很方便的用传入的参数来覆盖默认值，在插件的编写中会经常用到。

五、编写jQuery插件
鉴于之前在实习期间（采遗网电商平台）写个人中心栏目时经常会遇到各种各样的表格，为了避免重复的工作，遂学习写了一个具有表格隔行变色、点击选中变色简单功能的插件。
不然每次都需要重复下面类似代码：

$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$("tbody>tr:has(:checked)").addClass("selected");
$("tbody>tr").click(function () {
    var hasSelected = $(this).hasClass("selected");
    $(this)[hasSelected?"removeClass":"addClass"]  ("selected").find(':checkbox').prop('checked',!hasSelected);
});
1
2
3
4
5
6
7

功能不大，但也算是了解了插件的具体开发流程。
首先，我们建立一个新的文件jquery.tableBgColor.js，把插件方法取名tableBgColor，然后搭好框架：

;(function ($) {
        $.fn.extend({
            "tableBgColor":function(options){
                    //设置默认值
                    options= $.extend({
                        odd:"odd",
                        even:"even",
                        selected:"selected"
                    },options);

                    //...插件代码

                    return this;//返回jQuery对象，保证链式操作
                })
            }
        });

})(jQuery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

现在，我们的目的应该是使用选择器选择某个表格，执行tableBgColor()方法后，将对应表格内的tr元素都进行各行变色，并且点击某一行之后也会变色，并且选中对应行内的checkbox。
因此，只需将之前会重复的代码稍作修改放入框架中：

;(function ($) {
        $.fn.extend({
            "tableBgColor":function(options){
                //each()方法遍历匹配元素，因为可能匹配的元素不止一个
                return this.each(function () {
                    //设置默认值
                    options= $.extend({
                        odd:"odd",
                        even:"even",
                        selected:"selected"
                    },options);

                    $("tbody>tr:odd",this).addClass(options.odd);
                    $("tbody>tr:even",this).addClass(options.even);
                    $("tbody>tr:has(:checked)",this).addClass("selected");
                    $("tbody>tr",this).click(function () {
                        var hasSelected = $(this).hasClass(options.selected);
                        $(this)[hasSelected?"removeClass":"addClass"](options.selected).find(':checkbox').prop('checked',!hasSelected);//注意这里用的是prop而不是attr
                    });

                    return this;
                })
            }
        });

})(jQuery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

此时，插件就完成了，现在来测试这个插件。构造表格，id为test_table：

<table width="100%" style="table-layout: fixed" id="test_table">
    //...此处省略
</table>
1
2
3

设置相应的CSS类：

        table{
            text-align: left;
            border-spacing: 0;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid #e2e2e2;
            padding: 3px;
        }
        th{
            background-color: #1B6540;
            color: #fff;
        }
        .odd{
            background-color: #4FA46B;
        }
        .even{
            background-color: #8ECE9F;
        }
        .selected{
            background-color: #ecb6c4;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

引入插件文件：

<script src="jquery.min.js"></script>
<script src="jquery.tableBgColor.js"></script>
1
2

调用插件方法：

    $(function () {
        $("#test_table").tableBgColor();
    })
1
2
3

得到如下效果：

点击某一行：

检查连试操作功能：

$("#test_table").tableBgColor().find("th").css("background-color","red");
1

头部变为红色：

大功告成，完美！
现在你可能会觉得有点小缺陷，插件里没有写到如何解决冲突（conflict）问题，解决这个问题并不难，只需将之前的代码更改如下：

;(function ($) {
        var old = $.fn.tableBgColor;//先将之前的即将被覆盖的方法保存在old中

        //注意，换了一种定义插件的方法，以便后面$.fn.tableBgColor.noConflict能正常调用tableBgColor方法
        $.fn.tableBgColor = function(options){
                return this.each(function () {
                    //设置默认值
                    options= $.extend({
                        odd:"odd",
                        even:"even",
                        selected:"selected"
                    },options);

                    $("tbody>tr:odd",this).addClass(options.odd);
                    $("tbody>tr:even",this).addClass(options.even);
                    $("tbody>tr:has(:checked)",this).addClass("selected");
                    $("tbody>tr",this).click(function () {
                        var hasSelected = $(this).hasClass(options.selected);
                        $(this)[hasSelected?"removeClass":"addClass"](options.selected).find(':checkbox').prop('checked',!hasSelected);
                    });
                    return this;
                })
            }
        //定义tableBgColor对象的noConflict方法，使得执行这个方法后tableBgColor方法会还原成之前old中所保留的方法
        $.fn.tableBgColor.noConflict = function(){
            $.fn.tableBgColor = old;
            return this;
        }
})(jQuery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

你可能还会觉得有点小瑕疵，该表格还无法进行全选功能，当然也可以自己再动手写一个全选功能的插件，不过需要注意的是全选功能涉及到的元素可能较多，在进行html结构设计的时候最好配合插件的功能编写，这里就不再多说。