jQuery 封裝、插件淺析

今天小碼哥突發(fā)興致想學(xué)習(xí)jQuery。當(dāng)正在研究一個(gè)不錯(cuò)的插件的時(shí)候，又突然有了一個(gè)疑問(wèn)，那就是為啥很多大拿前輩們在封裝自己寫(xiě)的插件的時(shí)候總是按照這個(gè)格式：如;(function($){})(jQuery);。或者是這樣定義方法對(duì)象的？如：$.fn.add=function(){}啥的??！尤其是后一個(gè)$.fn中的fn是干什么的？（大家不要笑俺，，，小碼哥也是初學(xué)者，還有很多沒(méi)有達(dá)到深刻理解的境界。）因此，偶就上網(wǎng)借鑒了一下別人總結(jié)的，然后又加上俺自己的理解，成就了一下的一片博文！

大家都曉得，jQuery是一款即實(shí)用又強(qiáng)大的開(kāi)源的且擁有多種選擇器的強(qiáng)大的庫(kù)。因此，很多前輩們喜歡用它來(lái)作為框架來(lái)開(kāi)發(fā)自己的插件。因此，偶很羨慕呢，，，，，

下面了解一下插件的種類(lèi)：

1、封裝對(duì)象方法

2、封裝全局函數(shù)

3、選擇器插件等

封裝對(duì)象方法：

這種插件是將對(duì)象方法封裝起來(lái)，用于對(duì)通過(guò)選擇器獲取的jQuery對(duì)象進(jìn)行操作，是最常見(jiàn)的一種插件。此類(lèi)插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢(shì)，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫(kù)內(nèi)部通過(guò)這種形式“插”在內(nèi)核上的，例如：parent()方法、appendTo()方法等。這些方法在現(xiàn)在來(lái)看都是jQuery本身自帶的方法了。平時(shí)，我們是可以直接拿來(lái)就用的，只需引入jQuery庫(kù)就行。

封裝全局函數(shù)：

可以將獨(dú)立的函數(shù)加到j(luò)Query命名空間下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的。

選擇器插件：

雖然jQuery的選擇器十分強(qiáng)大，但是在少數(shù)情況下，還是會(huì)需要用到選擇器插件來(lái)擴(kuò)充一些自己喜歡的選擇器。

jQuery選擇器插件的機(jī)制：

其本身并不太難理解，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴(kuò)展jQuery的功能。

jQuery.fn.extend()方法多用于擴(kuò)展上面提到的3種類(lèi)型中的第一種，jQuery.extend()用于擴(kuò)展后兩種插件。這兩個(gè)方法都接受一個(gè)參數(shù)，類(lèi)型為Object。Object對(duì)象的“名/值對(duì)”分別代表“函數(shù)或方法名/函數(shù)主體”。

編寫(xiě)jQuery插件的一些Tips

1、jQuery插件的文件名推薦命名為jQuery.[插件名].js，以免和其他JS庫(kù)插件混淆。

2、所有的對(duì)象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對(duì)象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對(duì)象本身上。

3、在插件頭部上加一個(gè)分號(hào)，以免他人的不規(guī)范代碼給插件帶來(lái)影響。

4、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，以免壓縮時(shí)出現(xiàn)問(wèn)題。

5、除非插件需要返回的是一些需要獲取的變量，否則插件應(yīng)該返回一個(gè)jQuery對(duì)象，以保證插件的可鏈?zhǔn)讲僮鳌?/strong>

6、利于jQuery.extend()方法設(shè)置插件方法的默認(rèn)參數(shù)，增加插件的可用性。

jQuery插件結(jié)構(gòu)：

代碼：

;(function($){

    /*這里放插件代碼，可以將$作為jQuery的別名*/

})(jQuery);

封裝jQuery對(duì)象方法插件實(shí)戰(zhàn)

  功能：設(shè)置選擇的元素的顏色，獲取選擇的首個(gè)元素的顏色

  命名：jquery.color.js

  結(jié)構(gòu)：

代碼：

;(function($){

    $.fn.extend({

        //這里寫(xiě)插件代碼

    });

})(jQuery);

思路：設(shè)置一個(gè)參數(shù)value，如果調(diào)用時(shí)傳遞了value這個(gè)參數(shù)，就是設(shè)置顏色，否則未獲取顏色。獲取和設(shè)置顏色可以用jQuery提供的CSS方法即可。

完成代碼如下：

;(function($){

    $.fn.extend({

        "color":function(value){

            if(value==undefined){

                return this.css("color");

            }else{

                return this.css("color",value);

            }

        }

    });

})(jQuery);

由于css()方法在獲取顏色時(shí)已有取第一個(gè)元素的判斷，所以這里直接用this.css("color")即可。

如果是一組插件，代碼可以如下：

;(function($){

    $.fn.extend({

        "color":function(value){

            //插件代碼

        },

        "border":function(value){

            //插件代碼

        }，

        "background":function(value){

            //插件代碼

        }

    });

})(jQuery);

實(shí)戰(zhàn)二：?jiǎn)为?dú)去除左側(cè)或單獨(dú)去除右側(cè)的空格

命名：jquery.lrtrim.js

結(jié)構(gòu)代碼如下：

;(function($){

    $.extend({

        ltrim:function(text){

            //插件代碼

        }，

        rtrim:function(text){

            //插件代碼

        }

    });

})(jQuery);

運(yùn)用正則的完整去除左右空格的代碼如下：

;(function($){

    $.extend({

        ltrim:function(text){

            return (text||"").replace(/^\s+/g,""/);

        },

        rtrim:function(text){

            return (text||"").replace(/\s+$/g,""/);

        }

    });

})(jQuery);

jQuery的選擇器的工作原理：

jQuery選擇器解析首先會(huì)使用一組正則表達(dá)式來(lái)解析選擇器，然后針對(duì)解析出的每一個(gè)選擇符執(zhí)行一個(gè)函數(shù)，稱(chēng)為選擇函數(shù)。最后根據(jù)這個(gè)選擇函數(shù)的返回值為true還是false來(lái)決定是否保留這個(gè)元素，這樣就可以找到匹配的元素節(jié)點(diǎn)。

如：$("div:gt(1)"),該選擇器首先會(huì)獲取所有的<div>元素，然后隱式的遍歷這些<div>元素，并逐個(gè)將這些<div>元素作為參數(shù)，連同括號(hào)里的“1”等一些參數(shù)一起傳遞給gt對(duì)應(yīng)的選擇器函數(shù)進(jìn)行判斷。如果返回true則保留，否則不保留。這樣的得到的結(jié)果就是一個(gè)符合要求的<div>元素的集合。

選擇器函數(shù)一共接受3個(gè)參數(shù)，形式如下：

代碼如下：

function(a,i,m){

    //...

}

第一個(gè)參數(shù)為a，指的是當(dāng)前遍歷到DOM元素。

第二個(gè)參數(shù)為i，指的是遍歷到的DOM元素的索引值，從0

開(kāi)始。

第三個(gè)參數(shù)是m，它是有jQuery正則解析引擎進(jìn)一步解析后的產(chǎn)物，是一個(gè)數(shù)組，其中最重要的是一個(gè)m[3],在$("div:gt(1)")中即為括號(hào)里的數(shù)字“1”。

在jQuery中已經(jīng)有l(wèi)t,gt和eq選擇器，因此這里寫(xiě)一個(gè)介于兩者之間的(between)的選擇器。

功能：選擇索引值為a到b之間(a<b,a、b為正整數(shù))的元素

命名：jquery.between.js

機(jī)構(gòu)代碼：

;(function($){

    $.extend($.expr[":"],{

        between:function(a,i,m){

            //插件代碼

        }

    });

})(jQuery);

思路：在上面三個(gè)參數(shù)中，m[3]為“a,b”的形式，因此把m[3]用","分隔，然后跟索引值i進(jìn)行對(duì)比，如果i在m[3]表示的范圍之間就返回true，否則為false。

完整代碼如下：

;(function($){

    $.extend($.expr[":"],{

        between:function(a,i,m){

            var temp=m[3].split(",");

            return +temp[0]<i&&i<+temp[1];

        }

    });

})(jQuery);

注：這里用+temp[0]、+temp[1]把字符串形式的數(shù)字轉(zhuǎn)換成數(shù)字；