一：導言
有些WEB開發者，會引用一個JQuery類庫，然後在網頁上寫一寫$(“#”)，$(“.”)，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司裡的技術交流，我才改變了自己對自己的看法。
二：普及JQuery知識
知識1：用JQuery寫外掛時，最核心的方法有如下兩個：
$.extend(object) 可以理解為JQuery 新增一個靜態方法。
$.fn.extend(object) 可以理解為JQuery例項新增一個方法。
基本的定義與呼叫：
|
1 2 3 4 5 6 7 8 9 10 11 |
/* $.extend 定義與呼叫 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert("執行方法一"); } }); $.fun1(); /* $.fn.extend 定義與呼叫 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert("執行方法2"); } }); $(this).fun2(); //等同於 $.fn.fun3 = function () { alert("執行方法三"); } $(this).fun3(); |
知識2:jQuery(function () { }); 與 (function ($) { })(jQuery);的區別：
|
1 2 3 4 5 6 7 8 |
jQuery(function () { }); //相當於 $(document).ready(function () { }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ (function ($) { })(jQuery); //相當於 var fn = function ($) { }; fn(jQuery); |
jQuery(function () { });是某個DOM元素載入完畢後執行方法裡的程式碼。
(function ($) { })(jQuery); 定義了一個匿名函式，其中jQuery代表這個匿名函式的實參。通常用在JQuery外掛開發中，起到了定義外掛的私有域的作用。
三：開發JQuery外掛標準結構
1，定義作用域：定義一個JQuery外掛，首先要把這個外掛的程式碼放在一個不受外界干擾的地方。如果用專業些的話來說就是要為這個外掛定義私有作用域。外部的程式碼不能直接訪問外掛內部的程式碼。外掛內部的程式碼不汙染全域性變數。在一定的作用上解耦了外掛與執行環境的依賴。說了這麼多，那要怎樣定義一個外掛的私有作用域？
|
1 2 3 4 |
//step01 定義JQuery的作用域 (function ($) { })(jQuery); |
別小看了這個作用域，就像c#定義一個類的class關鍵字一樣重要。
2，為JQuery擴充套件一個外掛：當定義好了JQuery的作用域後，最核心也是最迫切的一步就是為這個JQuery的例項新增一個擴充套件方法。首先我們為這個Jqury外掛命名一個方法，叫easySlider，當在呼叫這個外掛的時候，我們可以通過options來給這個外掛傳遞一些引數。具體的定義方法看如下程式碼：
|
1 2 3 4 5 6 7 |
//step01 定義JQuery的作用域 (function ($) { //step02 外掛的擴充套件方法名稱 $.fn.easySlider = function (options) { } })(jQuery); |
到現在為止，其實一個最簡單的JQuery外掛就已經完成了。呼叫的時候可以$(“#domName”).easySlider({})，或者$(“.domName”).easySlider({})或者更多的方式來呼叫這個外掛。
3，設定預設值：定義一個JQuery外掛，就像定義一個.net控制元件。一個完美的外掛，應該是有比較靈活的屬性。我們來看這段程式碼：。 TextBox控制元件有Width和Height屬性，使用者在用TextBox時，可以自由的設定控制元件的Height和Width，也可以不設定值，因為控制元件自身有預設值。那準備開發一個JQuery外掛時，在使用者未指定屬性時，應該有預設值，在JQuery可以分兩步實現這樣的定義,看如下程式碼step03-a，step03-b。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//step01 定義JQuery的作用域 (function ($) { //step03-a 外掛的預設值屬性 var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next' //…… }; //step02 外掛的擴充套件方法名稱 $.fn.easySlider = function (options) { //step03-b 合併使用者自定義屬性，預設屬性 var options = $.extend(defaults, options); } })(jQuery); |
做程式的人都喜歡創新，改改變數名呀，換一個行呀這些。當看到用var defaults = {}來表示一個預設屬性時，在自己寫JQuery外掛時就想著與眾不同，所以用var default01 ={} ，var default02 ={}來表示預設屬性了。然後預設屬性名五花八門，越來越糟。所以建議在寫JQuery外掛時，定義預設屬性時，都用defaults變數來代表預設屬性，這樣的程式碼更具有可讀性。
有人看到這行程式碼：var options = $.extend(defaults, options)，皺起眉頭，表示不解。那我們先來看如下程式碼：
|
1 2 3 4 5 6 7 |
var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} } var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} }; var a = $.extend(obj01, obj02); var b = $.extend(true, obj01, obj02); var c = $.extend({}, obj01, obj02); var d = $.extend(true,{}, obj01, obj02); |
把程式碼拷貝到開發環境中，分別看一下a,b,c,d的值，就明白了var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，並把值賦給了options。
在外掛環境中，就表示使用者設定的值，覆蓋了外掛的預設值；如果使用者沒有設定預設值的屬性，還是保留外掛的預設值。
4，支援JQuery選擇器：JQuery選擇器，是JQuery的一個優秀特性，如果我們的外掛寫來不支援JQuery選擇器，確實是一個不小的遺憾。如了使自己的JQuery外掛能支援多個選擇器，我們的程式碼應該這樣定義：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//step01 定義JQuery的作用域 (function ($) { //step03-a 外掛的預設值屬性 var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next' //…… }; //step02 外掛的擴充套件方法名稱 $.fn.easySlider = function (options) { //step03-b 合併使用者自定義屬性，預設屬性 var options = $.extend(defaults, options); //step4 支援JQuery選擇器 this.each(function () { }); } })(jQuery); |
5，支援JQuery的連結呼叫：上邊的程式碼看似完美了，其實也不那麼完美。到目前為止還不支援連結呼叫。為了能達到連結呼叫的效果必須要把迴圈的每個元素return
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//step01 定義JQuery的作用域 (function ($) { //step03-a 外掛的預設值屬性 var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next' //…… }; //step02 外掛的擴充套件方法名稱 $.fn.easySlider = function (options) { //step03-b 合併使用者自定義屬性，預設屬性 var options = $.extend(defaults, options); //step4 支援JQuery選擇器 //step5 支援鏈式呼叫 return this.each(function () { }); } })(jQuery); |
這樣的定義才能支援連結呼叫。比如支援這樣的呼叫：$(“.div”).easySlider({prevId:””,prevText:””}).css({ “border-width”: “1”, “border-color”: “red”, “border-bottom-style”: “dotted” });
6，外掛裡的方法：往往實現一個外掛的功能需要大量的程式碼，有可能上百行，上千行，甚至上萬行。我們把這程式碼結構化，還得藉助function。在第一點已經說了，在外掛裡定義的方法，外界不能直接呼叫，我在外掛裡定義的方法也沒有汙染外界環境。現在就嘗試著怎麼樣在外掛裡定義一些方法：
|
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 |
//step01 定義JQuery的作用域 (function ($) { //step03-a 外掛的預設值屬性 var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next' //…… }; //step06-a 在外掛裡定義方法 var showLink = function (obj) { $(obj).append(function () { return "(" + $(obj).attr("href") + ")" }); } //step02 外掛的擴充套件方法名稱 $.fn.easySlider = function (options) { //step03-b 合併使用者自定義屬性，預設屬性 var options = $.extend(defaults, options); //step4 支援JQuery選擇器 //step5 支援鏈式呼叫 return this.each(function () { //step06-b 在外掛裡定義方法 showLink(this); }); } })(jQuery); |
步驟step06-a：在外掛裡定義了一個方法叫showLink(); 這個方法在外掛外是不能直接呼叫的，有點像C#類裡的一個私有方法，只能滿足外掛內部的使用。步驟step06-b演示了怎樣呼叫外掛內部的方法。
四：總結
開發只要形成了標準，然後再去閱讀別人的程式碼就沒有那麼吃力了。