jquery插件編寫學習小結

jquery插件編寫學習小結

編寫插件的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重復使用，方便後期維護和提高開發效率。

一、插件的種類
jQuery的插件主要分為3種類型。
1、封裝對象方法的插件
2、封裝全局函數的插件
3、選擇器插件
這裡我們主要討論第一種插件的開發流程。
封裝對象方法的插件：
這種插件是將對象方法封裝起來，用於對通過選擇器獲取的jQuery對象進行操作，是最常見的一種插件，有95%以上的插件都是這種類型的插件。

二、插件的基本要點
1、所有對象方法都應當附加到jQuery.fn上，而所有全局函數都應當附加到jQuery對象本身上。
2、在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不是DOM元素。
3、所有方法或函數插件，都應當以分號結尾，為了更穩妥些，甚至可以再插件頭部也加上一個分號，以免他們的不規范代碼給插件帶來影響。
4、插件應當返回一個jQuery對象，以保證鏈式操作。
5、閉包的使用。

三、插件中的閉包
閉包：簡單來說，當一個內部函數在包含他們的外部函數之外被調用時，就會形成閉包。
利用閉包的特性，既可以避免內部臨時變量影響到全局空間，又可以在插件內部繼續使用$作為jQuery的別名。常見的jQuery插件都是這樣的形式：

;(function ($) {
    //...
 })(jQuery);

再看看這段代碼：

;(function ($) {
    //定義一個局部變量foo，僅函數內部可以訪問，外部無法訪問
    var foo;
    var bar = function(){
        //...
    }
    //下面這句話相當於增加了一個jQuery對象上的全局函數BAR。可以通過$.BAR()的方式來訪問內部定義的函數bar()，並且內部函數bar()也能訪問foo
    $.BAR = bar;
 })(jQuery);

其實這裡與我之前寫的一篇介紹模塊化編程的博文很相似，都用到了閉包的蓋概念，不過在模塊化編程中通過閉包可以拓展模塊方法，而這裡是增加$對象上的方法，也就是jQuery全局函數插件。

四、jQuery.extend()方法
jQuery提供了兩個用於擴展jQuery功能的方法，即jQuery.fn.extend方法和jQuery.extend()方法。前者用於可擴展之前提到的三種類型插件中的第一種，後者用於擴展後兩種插件。這裡要介紹的是jQuery.extend()方法除了可以用於擴展jQuery對象之外，還有一個很強大的功能，就是用於擴展已有的Object對象。

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

用一個或多個對象來擴展一個對象，然後返回被擴展的對象。
舉個栗子：

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插件
鑒於之前在實習期間（采遺網電商平台）寫個人中心欄目時經常會遇到各種各樣的表格，為了避免重復的工作，遂學習寫了一個具有表格隔行變色、點擊選中變色簡單功能的插件。
不然每次都需要重復下面類似代碼：

$("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);
});

功能不大，但也算是了解了插件的具體開發流程。
首先，我們建立一個新的文件jquery.tableBgColor.js，把插件方法取名tableBgColor，然後搭好框架：

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

                    //...插件代碼

                    return this;//返回jQuery對象，保證鏈式操作
                })
            }
        });

})(jQuery);

現在，我們的目的應該是使用選擇器選擇某個表格，執行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);

此時，插件就完成了，現在來測試這個插件。構造表格，id為test_table：

設置相應的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;
        }

引入插件文件：

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

調用插件方法：

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

得到如下效果：

點擊某一行：

檢查連試操作功能：<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> $("#test_table").tableBgColor().find("th").css("background-color","red");

頭部變為紅色：

大功告成，完美！
現在你可能會覺得有點小缺陷，插件裡沒有寫到如何解決沖突（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);

你可能還會覺得有點小瑕疵，該表格還無法進行全選功能，當然也可以自己再動手寫一個全選功能的插件，不過需要注意的是全選功能涉及到的元素可能較多，在進行html結構設計的時候最好配合插件的功能編寫，這裡就不再多說。