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#添加一個靜態方法，第二種對象擴展主要是根據本身的實際業務而肯定的，你的網站有些地方經常使用的功能確定能夠本身寫成一個插件，好比說圖片的查看，側邊欄的點擊，有的時候你一樣能夠研究網上別人寫的插件，也能夠學到很多東西.