首先，在具體說明編寫插件之前，我們先假定一個使用場景：有一個HTML頁面（或.aspx頁面），頁面上放置了一個5行3列的表格，即：<table></table>標記，具體代碼如下：
<tableid="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){
varthisTable = $("#" +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頁面通過智能提示顯示出來。頁面中調用的代碼如下：
<scripttype="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"
}
varoptions = $.extend(defaults, options);
this.each(function(){
varthisTable=$(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 (){
varthisTable = $("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文件中，那么，我們只需要在頁面上添加對此腳本文件的引用即可，引用方式為：<scriptsrc="Scripts/my.plugin.js"type="text/javascript"></script>，當然，在所有要用到JQuery的地方，需要首先添加對JQuery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調用自己所寫的插件方法，上面代碼中有注釋的地方。否則，我們寫的插件代碼將不會起作用。
##################################################################
一、請給你的代碼加上注釋
很多人都不喜歡加注釋，嫌太麻煩了，這是個非常糟糕的習慣。世界不存在百分百的完美的jquery插件，注釋不止是給別人看、更重要的是給自己看。應該把注釋當做你代碼的一部分，養成隨手加注釋的習慣，尤其是編寫javascript的時候。
1、在全部代碼前加上文件說明注釋
例如：
(function($){
.......
})(jQuery);
2、函數務必加注釋
比如以下代碼是其中的一個方法setContents：
zmc.tips.prototype = {
setContents : function(content){
...........
}}
3、參數務必加注釋
例如：
//默認參數
$.fn.tips.defaults = {
applyTo : null,
content : "",
position : "topMiddle",
offest : {"left":0,"top":0},
/**提示框顏色*
/ color : "blue"
}
二、javascript變量規范
在javascript中，沒有真正意義的共有變量、私有變量、常量等概念，當javascript代碼達到一定數量級時，過段時間回頭看自己寫的代碼，會把自己也搞暈的。
1、請在私有變量前加“_” 比如： var _pub = this.pub;
2、常量請大寫 比如： this.COLOR = "red";
3、jquery對象變量前加“$” 比如： this.$Obj = $("#layout");
4、object、array變量前加“o”、“a”很多人喜歡給數組變量加個”s”，這也是可以的，按個人習慣，如果你覺得有必要還可以給函數前加個“fn”。
三、jquery插件開發的一些建議
1、請多使用data()方法jquery中data()方法非常有用，尤其在jquery插件開發中，因為data()所創建的緩存，可以完整的保存各種數據類型的數據，這是其他緩存機制無法比擬的。
2、請使用bind來綁定事件 很多朋友喜歡以下的代碼：
$(".yitip").click(function(){ ........ })
但在jquery插件開發中更提倡使用bind：
$(".yitip").bind('click',function(){ ......... })
3、善用typeof typeof用於判斷數據類型，這個方法在參數判斷中非常有用處
4、插件名加個獨有前綴 jquery插件有太多太z了，插件撞車時很容易的事，比如搜索框插件：
$.fn.tips = function(options){ }
