jQuery中開發插件的兩種方式(附Demo)

做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();
       $("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#添加一個靜態方法，第二種對象擴展主要是根據自己的實際業務而確定的，你的網站有些地方常用的功能肯定可以自己寫成一個插件，比如說圖片的查看，側邊欄的點擊，有的時候你同樣可以研究網上別人寫的插件，也可以學到不少東西.