jQuery插件編寫步驟詳解

如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目里了。至於使用jquery好處這里就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機制，jquery有着成千上萬的第 三方插件，有時我們寫好了一個獨立的功能，也想將其與jquery結合起來，可以用jquery鏈式調用，這就要擴展jquery，寫成插件形式了，如下 面就是一個簡單擴展Jquery對象的demo：

?

1 2 3 4 5 6 7 8 9 10 11

//sample:擴展jquery對象的方法，bold()用於加粗字體。 ( function ($) {    $.fn.extend({      "bold" : function () {        ///<summary>        /// 加粗字體        ///</summary>        return this .css({ fontWeight: "bold" });      }    }); })(jQuery);

調用方式：

這是一個非常簡單的擴展。接下來我們一步步來解析上面的代碼。

一、jquery的插件機制

為了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一個重載。

jQuery.extend(object) ,一個參數的用於擴展jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數，或者叫靜態方法，例如jQuery內置的 ajax方法都是用jQuery.ajax()這樣調用的，有點像 "類名.方法名" 靜態方法的調用方式。下面我們也來寫個jQuery.extend(object)的例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

//擴展jQuery對象本身 jQuery.extend({    "minValue" : function (a, b) {      ///<summary>      /// 比較兩個值，返回最小值      ///</summary>      return a < b ? a : b;    },    "maxValue" : function (a, b) {      ///<summary>      /// 比較兩個值，返回最大值      ///</summary>      return a > b ? a : b;    } }); //調用 var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等於 100 var max_v = $.maxValue(i, j); // max_v 等於 101

重載版本：

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

用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
如果不指定target，則給jQuery命名空間本身進行擴展。這有助於插件作者為jQuery增加新方法。
如果第一個參數設置為true，則jQuery返回一個深層次的副本，遞歸地復制找到的任何對象。否則的話，副本會與原對象共享結構。
未定義的屬性將不會被復制，然而從對象的原型繼承的屬性將會被復制。

參數：

   deep:       可選。如果設為true，則遞歸合並。
   target:     待修改對象。
   object1:   待合並到第一個對象的對象。
   objectN:   可選。待合並到第一個對象的對象。

示例1：

合並 settings 和 options，修改並返回 settings。

?

1 2 3

var settings = { validate: false , limit: 5, name: "foo" }; var options = { validate: true , name: "bar" }; jQuery.extend(settings, options);

結果：

?

1	settings == { validate: true , limit: 5, name: "bar" }

示例2：

合並 defaults 和 options, 不修改 defaults。

?

1 2 3 4

var empty = {}; var defaults = { validate: false , limit: 5, name: "foo" }; var options = { validate: true , name: "bar" }; var settings = jQuery.extend(empty, defaults, options);

結果：

?

1 2	settings == { validate: true , limit: 5, name: "bar" } empty == { validate: true , limit: 5, name: "bar" }

這個重載的方法，我們一般用來在編寫插件時用自定義插件參數去覆蓋插件的默認參數。

jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。

首先我們來看fn 是什么東西呢。查看jQuery代碼，就不難發現。

?

1 2 3

jQuery.fn = jQuery.prototype = {    init: function ( selector, context ) {.....}; };

原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。我 們知道擴展原型上的方法，就相當於為對象添加"成員方法"，類的"成員方法"要類的對象才能調用，所以使用 jQuery.fn.extend(object)擴展的方法， jQuery類的實例可以使用這個"成員函數"。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要區分開來。

二、自執行的匿名函數/閉包

1. 什么是自執行的匿名函數?

它是指形如這樣的函數:

?

1	( function { // code})();

2. 疑問 為什么(function {// code})();可以被執行, 而function {// code}();卻會報錯?

3. 分析

(1). 首先, 要清楚兩者的區別:

(function {// code})是表達式, function {// code}是函數聲明.

(2). 其次, js"預編譯"的特點:

js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式.

(3). 當js執行到function() {//code}();時, 由於function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;
當js執行到(function {// code})();時, 由於(function {// code})是表達式, js會去對它求解得到返回值, 由於返回值是一 個函數, 故而遇到();時, 便會被執行.
另外， 函數轉換為表達式的方法並不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……

例如：

bootstrap 框架中的插件寫法：

?

1 2 3

! function ($){ //do something; }(jQuery);

和

?

1 2 3

( function ($){ //do something; })(jQuery);

是一回事。

匿名函數最大的用途是創建閉包（這是JavaScript語言的特性之一），並且還可以構建命名空間，以減少全局變量的使用。

例如：

?

1 2 3 4 5

var a=1; ( function ()(){    var a=100; })(); alert(a); //彈出 1

三、一步一步封裝JQuery插件

接下來我們一起來寫個高亮的jqury插件

1.定一個閉包區域，防止插件"污染"

?

1 2 3

//閉包限定命名空間 ( function ($) { })(window.jQuery);

2.jQuery.fn.extend(object)擴展jquery 方法，制作插件

?

1 2 3 4 5 6 7 8

//閉包限定命名空間 ( function ($) {    $.fn.extend({      "highLight" : function (options){        //do something      }    }); })(window.jQuery);

3.給插件默認參數，實現 插件的功能

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//閉包限定命名空間 ( function ($) {    $.fn.extend({      "highLight" : function (options) {        var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數        this .each( function () { //這里的this 就是 jQuery對象          //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。          var $ this = $( this ); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom          //根據參數來設置 dom的樣式          $ this .css({            backgroundColor: opts.background,            color: opts.foreground          });        });      }    });    //默認參數    var defaluts = {      foreground: 'red' ,      background: 'yellow'    }; })(window.jQuery);

到這一步，高亮插件基本功能已經具備了。調用代碼如下：

?

1 2 3

$( function () {    $( "p" ).highLight(); //調用自定義 高亮插件 });

這里只能 直接調用，不能鏈式調用。我們知道jQuey是可以鏈式調用的，就是可以在一個jQuery對象上調用多個方法，如：

?

1	$( '#id' ).css({marginTop: '100px' }).addAttr( "title" , "測試" );

但是我們上面的插件，就不能這樣鏈式調用了。比如：

?

1	$( "p" ).highLight().css({marginTop: '100px' });

將會報找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。接下來，return jQuery對象，讓我們的插件也支持鏈式調用。（其實很簡單，就是執行完我們插件代碼的時候將jQuery對像return 出來，和上面的代碼沒啥區別）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//閉包限定命名空間 ( function ($) {    $.fn.extend({      "highLight" : function (options) {        var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數        return this .each( function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈式調用          //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。          var $ this = $( this ); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom          //根據參數來設置 dom的樣式          $ this .css({            backgroundColor: opts.background,            color: opts.foreground          });        });      }    });    //默認參數    var defaluts = {      foreground: 'red' ,      background: 'yellow'    }; })(window.jQuery);

4.暴露公共方法 給別人來擴展你的插件（如果有需求的話）

比如的高亮插件有一個format方法來格式話高亮文本，則我們可將它寫成公共的，暴露給插件使用者，不同的使用着根據自己的需求來重寫該format方法，從而是高亮文本可以呈現不同的格式。

?

1 2 3 4

//公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。 $.fn.highLight.format = function (str) {    return "<strong>" + str + "</strong>" ; }

5.插件私有方法

有些時候，我們的插件需要一些私有方法，不能被外界訪問。例如 我們插件里面需要有個方法 來檢測用戶調用插件時傳入的參數是否符合規范。

6.其他的一些設置，如：為你的插件加入元數據插件的支持將使其變得更強大。

完整的高亮插件代碼如下：

?

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 34 35 36 37

//閉包限定命名空間 ( function ($) {    $.fn.extend({      "highLight" : function (options) {        //檢測用戶傳進來的參數是否合法        if (!isValid(options))          return this ;        var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數        return this .each( function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈式調用          //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。          var $ this = $( this ); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom          //根據參數來設置 dom的樣式          $ this .css({            backgroundColor: opts.background,            color: opts.foreground          });          //格式化高亮文本          var markup = $ this .html();          markup = $.fn.highLight.format(markup);          $ this .html(markup);        });      }    });    //默認參數    var defaluts = {      foreground: 'red' ,      background: 'yellow'    };    //公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。    $.fn.highLight.format = function (str) {      return "<strong>" + str + "</strong>" ;    }    //私有方法，檢測參數是否合法    function isValid(options) {      return !options || (options && typeof options === "object" ) ? true : false ;    } })(window.jQuery);

調用：

?

1 2 3 4 5 6 7 8

//調用 //調用者覆蓋 插件暴露的共公方法 $.fn.highLight.format = function (txt) {    return "<em>" + txt + "</em>" } $( function () {    $( "p" ).highLight({ foreground: 'orange' , background: '#ccc' }); //調用自定義 高亮插件 });