前面的話

編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，提高開發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件

類型

jQuery的插件主要分為3種類型

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

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

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

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

3、選擇器插件

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

要點(diǎn)

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、在插件內(nèi)部的this指向的是當(dāng)前通過選擇器獲取的jQuery對(duì)象，而不像一般方法那樣，如click，內(nèi)部的this指向的是DOM元素

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

5、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾。否則壓縮的時(shí)候可能出現(xiàn)問題。為了穩(wěn)妥些，甚至可以在插件頭部先加上一個(gè)分號(hào)，以免他人不規(guī)范的代碼影響自身的插件代碼

6、插件應(yīng)該返回一個(gè)jQuery對(duì)象，以保證插件的可鏈?zhǔn)讲僮?/p>

7、避免在插件內(nèi)部使用$作為jQuery對(duì)象的別名，而應(yīng)使用完整的jQuery來表示，避免沖突。當(dāng)然，也可以利用閉包來回避這種問題，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名

閉包

利用閉包的特性，即可以避免內(nèi)部臨時(shí)變量影響全局空間，又可以在插件內(nèi)容繼續(xù)使用$作為jQuery的別名。常見的jQuery插件都是以下這種形式的:

(function(){
  /*這里放置代碼*/ 
})();

首先定義一個(gè)匿名函數(shù)function(){/*這里放置代碼*/}，然后用括號(hào)括起來，變成(function(){/*這里放置代碼*/})這種形式，最后通過()這個(gè)運(yùn)算符來執(zhí)行?？梢詡鬟f參數(shù)進(jìn)行，以供內(nèi)部函數(shù)使用

//為了更好的兼容性，開始前有個(gè)分號(hào)
;(function($){    //此處將$作為匿名函數(shù)的形參
  /*這里放置代碼，可以使用$作為jQuery的縮寫別名*/
})(jQuery);      //這里就將jQuery作為實(shí)參傳遞給匿名函數(shù)了

上面的代碼是一種常見的jQuery插件的結(jié)構(gòu)

插件機(jī)制

jQuery提供了兩個(gè)用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封裝對(duì)象方法的插件，jQuery.extend()方法用于拓展封裝全局函數(shù)的插件和選擇器插件。這兩個(gè)方法都接受一個(gè)參數(shù)，類型為Object。Object對(duì)象的"名/值對(duì)"分別代表"函數(shù)或方法名/函數(shù)主體"

【jQuery.fn.extend()】

jQuery.fn.extend()方法用于將一個(gè)對(duì)象的內(nèi)容合并到j(luò)Query的原型，以提供新的jQuery實(shí)例方法

<label><input type="checkbox" name="foo"> Foo</label>
<label><input type="checkbox" name="bar"> Bar</label>
<button id="btn1">全選</button>
<button id="btn2">全不選</button>
<script>
jQuery.fn.extend({
 check: function() {
  return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
  return this.each(function() { this.checked = false; });
 }
});
$('#btn1').click(function(){
 $( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
 $( "input[type='checkbox']" ).uncheck();
});
</script>

【jQuery.extend()】

jQuery.extend()方法用一個(gè)或多個(gè)其他對(duì)象來擴(kuò)展一個(gè)對(duì)象，然后返回被擴(kuò)展的對(duì)象

jQuery.extend( target [, object1 ] [, objectN ] )

例如，合并settings對(duì)象和options對(duì)象，修改并返回settings對(duì)象

var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
var newOptions = jQuery.extend(settings,options);
console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
　　jQuery.extend()方法經(jīng)常被用于設(shè)置插件方法的一系列默認(rèn)參數(shù)
function foo(options){
  options=jQuery.extend({
    name:"bar",
    length:5,
    dataType:"xml"
  },options);
}

如果用戶調(diào)用foo()方法的時(shí)候，在傳遞的參數(shù)options對(duì)象設(shè)置了相應(yīng)的值，那么就使用設(shè)置的值，否則使用默認(rèn)值

通過使用jQuery.extend()方法，可以很方便地用傳入的參數(shù)來覆蓋默認(rèn)值。此時(shí)，對(duì)方法的調(diào)用依舊保持一致，只不過要傳入的是一個(gè)映射而不是一個(gè)參數(shù)列表。這種機(jī)制比傳統(tǒng)的每個(gè)參數(shù)都去檢測(cè)的方式不僅靈活而且更加簡(jiǎn)潔。此外使用命名參數(shù)意味著再添加新選項(xiàng)也不會(huì)影響過去編寫的代碼，從而使開發(fā)者使用起來更加直觀明了

編寫插件

1、封裝jQuery對(duì)象方法的插件

編寫設(shè)置和獲取顏色的插件color()，該插件用于實(shí)現(xiàn)以下兩個(gè)功能:

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

(2)獲取匹配的元素(元素集合中的第一個(gè))的顏色

由于是對(duì)jQuery對(duì)象的方法拓展，因此采用拓展第一類插件的方法jQuery.fn.extend()來編寫，這里給這個(gè)方法提供了一個(gè)參數(shù)value，如果調(diào)用方法的時(shí)候傳遞了value這個(gè)參數(shù)，那么就是用這個(gè)值來設(shè)置字體顏色，否則就是獲取匹配元素的字體顏色的值

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

實(shí)際上，CSS()方法內(nèi)容已經(jīng)有判斷value是否為undefined的機(jī)制，所以才可以根據(jù)傳遞參數(shù)的不同而返回不同的值。因此，代碼可以刪減如下

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

<span id="test">測(cè)試文字</span>
<input type="color" id="color">
<script>
;(function($){
 $.fn.extend({
  "color":function(value){
   return this.css("color",value);   
  }       
 }); 
})(jQuery);
$('#color').on('change',function(){
 $('#test').color($(this).val());
})
</script>

另外，如果要定義一組插件，可以使用如下所示寫法:

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

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

這類插件是在jQuery命名空間內(nèi)部添加一個(gè)函數(shù)

例如新增兩個(gè)函數(shù)，用于去除左側(cè)和右側(cè)空格。雖然jQuery已經(jīng)提供了jQuery.trim()方法來去除兩端空格，但在某些情況下，會(huì)只希望去除某一側(cè)的空格

去除左側(cè)、右側(cè)的空格的函數(shù)分別寫成如下jQuery代碼。(text||"")部分是用于防止傳遞進(jìn)來的text這個(gè)字符串變量處于未定義的特殊狀態(tài)，如果text是undeined，則返回字符串""，否則返回字符串text。這個(gè)處理是為了保證接下來的字符串替換方法replace()方法不會(huì)出錯(cuò)

;(function($){
  $.extend({
   ltrim:function( text ){
      return (text || "").replace(/^\s+/g,"");
    },
    rtrim:function(   text ){
        return (text || "").replace(/\s+$/g,"");
    }
  }); 
})(jQuery);
var $str = "  test  ";
console.log($.trim($str));//'test'
console.log($.ltrim($str));//'test  '
console.log($.rtrim($str));//'  test'

3、自定義選擇器

jQuery以其強(qiáng)大的選擇器著稱，那么jQuery的選擇器的工作原理是什么呢？

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

如$("div:gl(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，指的是當(dāng)前遍歷到的DOM元素的索引值，從0開始

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

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

思路：在上面的三個(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);

[注意]經(jīng)測(cè)試，函數(shù)中第二個(gè)參數(shù)i的值始終為0，無法獲取索引值，這時(shí)就需要自造索引，代碼如下

;(function($){
  var $index = -1;
  $.extend($.expr[":"],{
    between:function(a,i,m){
      var temp=m[3].split(",");  
      $index++;   
      return +temp[0]<$index&&$index<+temp[1];

    }
  });
})(jQuery);

<div>
 <i>0</i>
 <i>1</i>
 <i>2</i>
 <i>3</i>
 <i>4</i>
 <i>5</i>
</div>
<button id="btn">測(cè)試</button>
<script>
;(function($){
  var $index = -1;
  $.extend($.expr[":"],{
    between:function(a,i,m){
      var temp=m[3].split(",");  
      $index++;   
      return +temp[0]<$index&&$index<+temp[1];
    }
  });
})(jQuery);
$('#btn').click(function(){
 $('i:between(1,5)').css('background','lightblue');
});
</script>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論