jQuery開發插件的兩種方式

最近挺多人寫jQuery的，都是關於jQuery擴展方面的，使用方面的講的比較多，可是關於詳細的一個基礎的過程講的比較少一點，作web開發的基本上都會用到jQuery，本人就根據jQuery的使用經驗講講插件開發。jQuery插件開發兩種方式：一種是類擴展的方式開發插件，jQuery添加新的全局函數(jQuery的全局函數是屬於jQuery命名空間的函數)，若是將jQuery當作一個類，那麼就至關於給jQuery類自己添加方法。第二種是對象擴展的方式開發插件，即jQuery對象添加方法。

類擴展的插件

類擴展的插件開發最直接的理解就是給jQuery類添加類方法，能夠理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類擴展的插件開發能夠採用以下幾種形式進行擴展：

 1.添加全局函數

1 2 3

$.ltrim = function( str ) {         return  str.replace( /^\s+/,  ""  );     };

　　調用方式

1 2	var   str= "  去除左空格 " ; console.log( "去除前:" +str.length+ "去除後:" +$.ltrim(str).length);

　2.添加多個全局函數

1 2 3 4 5 6 7

$.ltrim = function( str ) {      return  str.replace( /^\s+/,  ""  ); };   $.rtrim = function( str ) {      return  str.replace( /\s+$/,  ""  ); };

　上面那種若是你寫的全局函數比較少的狀況下使用挺好，若是多的話建議使用 使用$.extend(object)

1 2 3 4 5 6 7 8

$.extend({      ltrim:function( str ) {        return  str.replace( /^\s+/,  ""  );    },    rtrim:function( str ) {        return  str.replace( /\s+$/,  ""  );    }    });

　3.獨立的命名空間

雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。

1 2 3 4 5 6 7 8

$.myPlugin={        ltrim:function( str ) {         return  str.replace( /^\s+/,  ""  );     },     rtrim:function( str ) {         return  str.replace( /\s+$/,  ""  );     } };

使用獨立的插件名，能夠避免命名空間內函數的衝突，調用方式:

1 2	var   str= "  去除左空格 " ; console.log( "調用前:" +str.length+ "調用後:" +$.myPlugin.ltrim(str).length);

對象擴展的插件

1.添加一個對象擴展方法

1 2 3 4 5 6

$.fn.changeColor=  function () {      this .css(  "color" ,  "red"  ); };     $.fn.changeFont=  function () {      this .css(  "font-size" ,  "24px"  ); };

　　調用方式:

1 2 3

$( function  () {     $( "a" ).showColor();<br>       $( "div" ).changeFont(); });

　2.添加多個對象擴展方法

1 2 3 4 5 6 7 8

( function ($){        $.fn.changeColor=  function () {      this .css(  "color" ,  "red"  ); };     $.fn.changeFont= function () {      this .css(  "font-size" ,  "24px"  ); };    })(jQuery);

　　兼容寫法(防止前面的函數漏寫了；):

1 2 3 4 5 6 7 8

;( function ($){        $.fn.changeColor=  function () {      this .css(  "color" ,  "red"  ); };     $.fn.changeFont= function () {      this .css(  "font-size" ,  "24px"  ); };    })(jQuery);

　  上面都定義了一個jQuery函數,形參是$，函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。這樣的好處是,咱們在寫jQuery插件時,也可使用$這個別名,而不會與prototype引發衝突.

3. 使用$.fn.extend(object)

題外話，查看jQuery源碼(版本1.11.1)能夠看到:

1 2 3 4 5 6

jQuery.fn = jQuery.prototype = {      // The current version of jQuery being used      jquery: version,      constructor: jQuery, ......................      },

jQuery是一個封裝得很是好的類，好比語句$("a") 會生成一個 jQuery類的實例。jQuery.fn.extend(object)其實是對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

1 2 3 4 5 6 7 8

$.fn.extend({    changeColor: function () {    this .css(  "color" ,  "red"  ); }, changeFont: function () {      this .css(  "font-size" ,  "24px"  ); } });

　介紹了基本是關於對象擴展的基礎的用法，下面開發一個簡單的相似於代碼高亮的功能，以下:

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 31 32 33

( function ($) {     $.fn.highlight =  function (options) {       //插件參數的可控制性，外界能夠修改默認參數       var  defaults=$.extend($.fn.highlight.defaults, options );       //遍歷函數，而後根據參數改變樣式     return  this .each( function () {          var  elem = $(  this  );          var  markup = elem.html();          markup = $.fn.highlight.format( markup );          elem.html(markup);          elem.css({              color: defaults.color,              fontSize:defaults.fontSize,              backgroundColor: defaults.backgroundColor          });      }); }; //參數默認值 $.fn.highlight.defaults={              color:  "#556b2f" ,              backgroundColor: "white" ,              fontSize:  "48px"          }; //格式化字體 $.fn.highlight.format =  function ( txt ) {      return  "<strong>"  + txt +  "</strong>" ; }; })(jQuery);          $( function  () {          //調用插件          $( "a" ).highlight({color: "red" ,fontSize: "24px" });      });

　小結

jQuery這兩種插件開發的使用，須要根據開發過程當中的具體狀況而定，第一種類擴展的方法相似於C#添加一個靜態方法，第二種對象擴展主要是根據本身的實際業務而肯定的，你的網站有些地方經常使用的功能確定能夠本身寫成一個插件，好比說圖片的查看，側邊欄的點擊，有的時候你一樣能夠研究網上別人寫的插件，也能夠學到很多東西.