jQuery開發外掛程式的兩種方式

jQuery開發外掛程式的兩種方式
做web開發的基本上都會用到jQuery，jQuery外掛程式開發兩種方式：一種是類擴充的方式開發外掛程式，jQuery添加新的全域函數(jQuery的全域函數是屬於jQuery命名空間的函數)，如果將jQuery看成一個類，那麼就相當於給jQuery類本身添加方法。第二種是對象擴充的方式開發外掛程式，即jQuery對象添加方法。 類擴充的外掛程式 類擴充的外掛程式開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類擴充的外掛程式開發可以採用如下幾種形式進行擴充：  1.添加全域函數  $.ltrim = function( str ) {       return str.replace( /^\s+/, "" );   };　　調用方式  var  str="  去除左空格 ";console.log("去除前:"+str.length+"去除後:"+$.ltrim(str).length);　2.添加多個全域函數  $.ltrim = function( str ) {    return str.replace( /^\s+/, "" );}; $.rtrim = function( str ) {    return str.replace( /\s+$/, "" );};　上面那種如果你寫的全域函數比較少的情況下使用挺好，如果多的話建議使用 使用$.extend(object)  $.extend({    ltrim:function( str ) {      return str.replace( /^\s+/, "" );  },  rtrim:function( str ) {      return str.replace( /\s+$/, "" );  }  });　3.獨立的命名空間 雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某些函數或變數名將於其他jQuery外掛程式衝突，因此我們習慣將一些方法封裝到另一個自訂的命名空間。  $.myPlugin={      ltrim:function( str ) {       return str.replace( /^\s+/, "" );   },   rtrim:function( str ) {       return str.replace( /\s+$/, "" );   }};使用獨立的外掛程式名，可以避免命名空間內函數的衝突，調用方式:  var  str="  去除左空格 ";console.log("調用前:"+str.length+"調用後:"+$.myPlugin.ltrim(str).length);對象擴充的外掛程式 1.添加一個對象擴充方法    $.fn.changeColor= function() {    this.css( "color", "red" );};   $.fn.changeFont= function() {    this.css( "font-size", "24px" );};　　調用方式:  $(function () {   $("a").showColor();<br>       $("div").changeFont();}); 　2.添加多個對象擴充方法    (function($){      $.fn.changeColor= function() {    this.css( "color", "red" );};   $.fn.changeFont=function() {    this.css( "font-size", "24px" );};  })(jQuery);　　相容寫法(防止前面的函數漏寫了；): ;(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)可以看到:  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類的執行個體可以使用這個“成員函數”。    $.fn.extend({  changeColor:function() {  this.css( "color", "red" );},changeFont:function() {    this.css( "font-size", "24px" );}});　介紹了基本是關於對象擴充的基礎的用法，下面開發一個簡單的類似於代碼高亮的功能，如下:  (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#添加一個靜態方法，第二種對象擴充主要是根據自己的實際業務而確定的，你的網站有些地方常用的功能肯定可以自己寫成一個外掛程式，比如說圖片的查看，側邊欄的點擊，有的時候你同樣可以研究網上別人寫的外掛程式，也可以學到不少東西. 如果你覺得本文還不錯，有所收穫，給個推薦吧，多謝~