最近Web應用程序中越來越多地用到了JQuery等Web前端技術。這些技術框架有效地改善了用戶的操作體驗，同時也提高了開發人員構造豐富客戶 端UI的效率。JQuery本身提供了豐富的操作，但是，有時候我們需要根據我們自己的業務和系統特色（風格）構造一些我們常用的前端UI組件，而 JQuery的插件給了我們一個較好的方式來構造這些UI組件，方便我們日后反復重用這些組件。
網上也有很多關於JQuery插件的文章，我也搜了一些，但是，這些文檔太過離散，沒有有效地組織並充分說明JQuey插件該如何編寫，並且有哪幾種形式，什么情況下使用哪種形式。下面，我將說明JQuery插件常用的寫法，以及這些插件的常用場景。
一、插件的幾種寫法
首先，在具體說明編寫插件之前，我們先假定一個使用場景：有一個HTML頁面（或.aspx頁面），頁面上放置了一個5行3列的表格，即：<table></table>標記，具體代碼如下：
<table id="newTable"> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> <tr> <td>1</td><td>1</td><td>1</td> </tr> </table>
我要實現的功能是：鼠標移到表格的某一行時，當前行高亮顯示，其他行正常。
OK，結合這個場景，我們進一步探討如何利用JQuery插件實現上述功能。常用的JQuery插件有如下幾種寫法：
1. 對JQuery自身的擴展插件
顧名思義，這種插件是對JQuery自身的方法庫進行擴展的。在使用的時候通過$.MethodName()的方式直接使用。
插件代碼示例：
$.extend({ handleTableUI : function(table){ var thisTable = $("#" + table); $(thisTable).find("tr").bind("mouseover", function () { $(this).css({ color: "#ff0011", background: "blue" }); }); $(thisTable).find("tr").bind("mouseout", function () { $(this).css({ color: "#000000", background: "white" }); }); } });
示 例說明：當要對JQuery自身進行擴展的時候，需要采用$.extend();的形式進行開發，JQuery的extend()方法為我們提供了擴展 JQuery自身的方式，在extend()方法中，我們采用{...}的形式編寫具體的方法體。其中，最重要的是要定義我們自己的擴展方法，如示例中的 handleTableUI。定義的方式是：方法名 : function(參數){ 方法體 }。通過此種方式我們就可以定義JQuery自己的擴展方法，而且這個方法可以在web頁面通過智能提示顯示出來。頁面中調用的代碼如下：
<script type="text/javascript"> $(document).ready(function () { $.handleTableUI("newTable"); }); </script>
2. 對HTML標記或頁面元素進行擴展
使用這種插件的擴展方式，在使用此插件時，需要首先引用經過JQuery包裝的頁面元素，如：$("#tableId").Method()。
插件代碼示例：
(function ($) { $.fn.setTableUI = function(options){ var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow" } var options = $.extend(defaults, options); this.each(function(){ var thisTable=$(this); $(thisTable).find("tr").bind("mouseover", function () { $(this).css({ color: "#ff0011", background: "blue" }); }); $(thisTable).find("tr").bind("mouseout", function () { $(this).css({ color: "#000000", background: "white" }); }); }); }; })(jQuery);
示例說明：當要對頁面元素進行JQuery擴展時，需要采用(function($){...})(JQuery);的方式進行開發。在“...”處，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(參數){...};的形式定義擴展方法的具體內容。在頁面調用的時候不同於對JQuery自身的擴展。具體調用代碼如下：
<script type="text/javascript"> $(document).ready(function () { $("#newTable").setTableUI(); }); </script>
3. 不要用在頁面顯式調用JQuery的方法，而是通過直接添加JQuery插件腳本引用，即可實現對該插件的調用。
一 般，如果需要用到一些全局的JQuery插件，即：插件的方法不需要顯式調用，而是引用腳本即可；同時，這種插件一般對整個Web頁面起到全局配置或設置 的作用，如：對<body></body>內部的內容進行整體布局，此時可以采用腳本引用的方式實現。
插件代碼示例：
(function ($) { $.tableUI = { set: function () { var thisTable = $("table"); $(thisTable).find("tr").bind("mouseover", function () { $(this).css({ color: "#ff0011", background: "blue" }); }); $(thisTable).find("tr").bind("mouseout", function () { $(this).css({ color: "#000000", background: "white" }); }); } }; //此處需要進行自調用 $(function () { $.tableUI.set(); }); })(jQuery);
示例說明：如果上面這段代碼在my.plugin.js文件中，那么，我們只需要在頁面上添加對此腳本文件的引用即可，引用方式為：<script src="Scripts/my.plugin.js" type="text/javascript"></script> ，當然，在所有要用到JQuery的地方，需要首先添加對JQuery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調用自己所寫的插件方法，上面代碼中有注釋的地方。否則，我們寫的插件代碼將不會起作用。
二、插件的基本要點
在編寫插件的時候，我們需要記住這些要點，雖然不照着這么做不會影響使用，但是要是你的插件是不規范的代碼，那何必花苦心思去寫插件。
jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JavaScript庫插件混淆。例如命名為jquery.color.js。
所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上。
在插件內部，this指向的是當前通過選擇器獲取的jQuery對象，而不像一般的方法那樣，例如click()方法，內部的this指向的是DOM元素。
可以通過this.each來遍歷所有元素。
所有的方法或函數插件，都應當以分號結尾，否則壓縮的時候可能出現問題。為了更穩妥些，甚至可以在插件頭部先加上一個分號，以免他人的不規范代碼給插件帶來影響。具體方法可以參考后面的代碼。
插件應該返回一個jQuery對象，以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量，例如字符串或者數組等。
避免在插件內部使用$作為jQuery對象的別名，而應使用完整的jQuery來表示。這樣可以避免沖突。當然，也可以利用閉包這種技巧來回避這個問題，使插件內部繼續使用$作為jQuery的別名。很多插件都是這么做的，本教程也會利用這種形式。