jQuery插件的使用和寫法

編寫jQuery插件

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

jQuery的插件主要分成3種類型。

1.封裝對象方法的插件

這種插件是將對象方法封裝起來,用於對通過選擇器獲取的jQuery對象進行操作,是最常見的一種插件。

2.封裝全局函數的插件

可以將獨立的函數加到jQuery命名空間之下。例如jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等,都是jQuery內部作為全局函數的插件附加到內核上去的。

3.選擇器插件

個別情況下,會需要用到選擇器插件。

插件的基本要點

1.jQuery插件的文件名推薦命名為jquery.[插件名].js,以免和其他JavaScript庫插件混淆。

2.所有的對象方法都應該附加到jQuery.fn對象上,而所有的全局函數都應當附加到jQuery對象本身上。

3.在插件內部,this指向的是當前通過選擇器獲取的jQuery對象,而不像一般方法那樣,例如click()方法,內部的this指向的DOM元素。

4.可以通過this.each來遍歷所有元素。

5.所有的方法或函數插件,都應當以分號結尾,否則壓縮的時候可能出現問題。為瞭更穩妥些,甚至可以在插件頭部先加上一個分號,以免他人的不規范代碼給插件帶來影響。

6.插件應該返回一個jQuery對象,以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量,例如字符串或者數組等。

7.避免在插件內部使用$作為jQuery對象的別名,而應使用完整的jQuery來表示。這樣可以避免沖突,當然,也可以利用閉包這種技巧來回避這個問題,使插件內部繼續使用$作為jQuery的別名。很多插件都是這樣做的。

插件中的閉包

關於閉包,ECMAScript對其進行瞭簡單的描述:允許使用內部函數(即函數定義和函數表達式位於另一個函數體內),而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數,當其中一個這樣的內部函數在包含它們的外部函數之外被調用時,就會形成閉包。即內部函數會在外部函數返回後被執行。而這個內部函數執行時,它仍然必須訪問其外部函數的局部變量、參數以及其他內部函數。這些局部變量、參數和函數聲明(最初時)的值是外部函數返回時的值,但也會收到內部函數的影響。

首先定義一個匿名函數function(){/*這裡放置代碼*/},然後用括號括起來,變成(function(){/*這裡放置代碼*/})這種形式,最後通過()這個運算符來執行。可以傳遞參數進去,以供內部函數使用。

//註意為瞭更好的兼容性,開始之前還有一個分號

;(function($){                //開始時將$作為匿名函數的形參
       /*這裡放置代碼,可以使用$作為jQuery的縮寫別名*/
})(jQuery);                    //這裡就將jQuery作為實參傳遞給匿名函數瞭

以上是一種常見的jQuery插件的結構。

jQuery插件的機制

jQuery提供瞭兩種用於擴展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。前者用於之前提到的3種插件類型中的第1種,後者用於擴展後兩種插件。這兩個方法都接受一個參數,類型為Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。

jQuery.extend()方法除瞭可以用於擴展jQuery對象之外,還有一個強大的功能,就是用與擴展已有的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);

結果為:

newOptins={valitdate:true,limit:5,name:”bar”};

jQuery.extend()方法經常被用於設置插件方法的一系列默認參數,如下面的代碼所示:

function foo(options){
       options=jQuery.extend({
              name:”bar”,
              limit:5,
              datatype:”xml”
       },options);
};

如果調用foo()方法的時候,在傳遞的參數options對象中設置瞭相應的值,那麼就使用設置的值,否則就用默認的值。代碼如下:

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

通過使用jQuery.extend()方法,可以很方便地用傳入的參數來覆蓋默認值。此時,對方法的調用依舊保持一致,隻不過要傳入的是一個映射而不是一個參數列表。這種機制比傳統的每個參數都去檢測的方式不僅靈活而且更加簡潔。此外使用命名參數意味著再添加新選項也不會影響過去編寫的代碼,從而使開發者使用起來更加直觀明瞭。

編寫jQuery插件

1.封裝jQuery對象方法的插件

編寫設置獲取顏色的插件

首先介紹如何編寫一個color()插件。該插件用於實現以下兩個功能。

(1)設置匹配元素的顏色。

(2)獲取匹配的元素(元素集合中的第1個)的顏色。

首先將該插件按規范命名為jquery.color.js。

然後再JavaScript文件裡搭好框架.由於是對jQuery對象的方法擴展,因此采用第1類方法jQuery.fn.extend()來編寫。

;(function($){
        $.fn.extend({
               “color”:function(value){
                      //這裡寫插件代碼
                      }
});
})(jQuery);

這裡給這個方法提供一個參數value,如果調用瞭方法的時候傳遞瞭value這個參數,那麼就是用這個值來設置字體顏色;否則就是匹配元素的字體顏色的值。

首先,實現第1個功能,設置字體顏色。註意,由於插件內部的this指向的是jQuery對象,而非普通的DOM對象。代碼如下:

;(function($){
        $.fn.extend({
               “color”:function(value){
                       return this.css(“color”,value);
        }
});
})(jQuery);

接下來實現第2個功能。如果沒用給方法傳遞參數,那麼就是獲取集合對象中第1個對象的color的值。由於css()方法本身就具有返回第1個匹配元素樣式值的功能,因此此處無需通過eq()來獲取第1個元素。隻要這兩個方法結合起來,判斷一下value的值是否是undefined即可。

jQuery代碼如下:

;(function($){
        $.fn.extend({
               “color”:function(value){
                      if(color===undefined){
                              return this.css(“color”,value);
                      }else{
                              Return this.css(“color”,value);
                      }
        }
});
})(jQuery);

這樣一來,插件也就完成瞭。現在來測試一下代碼。

<script type=”text/javascript”>
        //插件編寫
        ;(function($){
               $.fn.extend({
                      “color”:function(value){
                             if(color===undefined){
                                     return this.css(“color”,value);
                             }else{
                                     Return this.css(“color”,value);
                             }
              }
});
})(jQuery);
 
//插件應用
$(function(){
        //查看第一個p的color樣式值
alert($(“p”).color()+”\n返回字符串,證明此插件可用。”);
        //把所有的p字體顏色都設為紅色
        alert($(“p”).color(“red”)+”\n返回object證明得到的是jQuery對象。“);
})
</script>

發佈留言