網上一搜各種插件，什麼文件上傳，圖片瀏覽 ，Autocomplete等
這些插件，源代碼，新手看起來是很吃力的，當然我也是新手，我開始改AutoComplete這個插件一點點，卻真不知道如何開始，後面就用Firefox的fireDebug慢慢看。
我也不是專門做前端的，但是總得瞭解，基本的使用還是得會。
今天，來總結下，最近看的插件的基礎知識，這裡算個入門，希望能幫到新手黨們。
下面是2個非常重要的擴展函數。
.extend and.fn.extend
$.extend(object) 可以理解為JQuery 添加一個靜態方法。
$.fn.extend(object) 可以理解為JQuery實例添加一個方法。
基本的定義與調用：
復制代碼
/* $.extend 定義與調用
*/
$.extend({ fun1: function () { alert("執行方法一"); } });
$.fun1();
/* $.fn.extend 定義與調用
*/
$.fn.extend({ fun2: function () { alert("執行方法2"); } });
$(this).fun2();
//等同於
$.fn.fun3 = function () { alert("執行方法三"); }
$(this).fun3();
復制代碼
$.extend(target, [object1], [objectN]) 還有個用法,就是合並到第一個object.
該方法主要用於合並兩個或更多對象的內容(屬性)到第一個對象，並返回合並後的第一對象。如果該方法隻有一個參數target，則該參數將擴展jQuery的命名空間，即作為靜態方法掛在jQuery全局對象下，如jQuery裡的$.ajax、$.getJSON全局函數等，如前面看到的：
值得註意的是：多個對象參數合並時，會破壞第一個對象的結構，所以可傳遞一個空對象作為第一個參數，如：$.extend({}, object1, object2);
var options = $.extend({},defaults, options);
上面代碼就是合並到{}中，然後賦值到options。這個在寫插件的時候經常使用，用戶可以自己定義某些屬性，
插件一般也會定義默認屬性，調用上面方法後，如果自定義屬性，這使用新屬性，否則，則使用默認屬性，這個是非常有用的。
$.fn.extend(target)
在jQuery中，.fn本質上是等於jQuery的原型，即.fn = $.prototype， 所以該方法實際上是為jQuery原型添加方法，即把target對象的方法添加到jQuery原型中去，這樣jQuery對象實例就可以訪問添加的方法瞭，這也是jQuery插件開發常用的方法，特別是添加多個接口時。如：
// 將hello、hello2方法添加到jquery原型中
$.fn.extend({
hello: function() {alert("hello!");},
hello2: function() {alert("hello again!);}
});
看看Autocomplete插件使用的該方法。
$.fn.extend({
autocomplete: function(urlOrData, options) {
var isUrl = typeof urlOrData == "string";
options = $.extend({}, $.Autocompleter.defaults, {
url: isUrl ? urlOrData : null,
data: isUrl ? null : urlOrData,
delay: isUrl ? $.Autocompleter.defaults.delay : 10
max: options && !options.scroll ? 1000 : 15000
}, options);
// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };
// if the formatMatch option is not specified, then use formatItem for backwards compatibility
options.formatMatch = options.formatMatch || options.formatItem;
return this.each(function() {
new $.Autocompleter(this, options);
});
},
result: function(handler) {
return this.bind("result", handler);
},
search: function(handler) {
return this.trigger("search", [handler]);
},
flushCache: function() {
return this.trigger("flushCache");
},
setOptions: function(options){
return this.trigger("setOptions", [options]);
},
unautocomplete: function() {
return this.trigger("unautocomplete");
}
});
看不懂？沒關系，下面馬來接上。
如果添加單個方法到jQuery原型中，可使用$.fn.pluginName方法添加，如：
// 將hello方法添加到jquery原型中
$.fn.hello = function() {
// …
};
插件通用模板（單個方法）：
插件有自己的基本格式：
;(function($){
$.fn.yourName = function(options){
//各種屬性、參數
}
var options = $.extend(defaults, options);
return this.each(function(){
//插件實現代碼
});
};
})(jQuery);
上面代碼的最前面有一個分號，這是為瞭防止多個腳本文件合並時，其他腳本的結尾語句沒有添加分號，造成運行時錯誤。
1、把全部代碼放在閉包(一個即時執行函數)裡
此時閉包相當於一個私有作用域，外部無法訪問到內部的信息，並且不會存在全局變量的污染情況。官方創建開發規范的解釋是：
a) 避免全局依賴；
b) 避免第三方破壞；
c) 兼容jQuery操作符'$'和'jQuery '。
如下所示：
(function($) {
// 局部作用域中使用$來引用jQuery
// …
})(jQuery);
這段代碼在被解析時可理解成以下代碼：
var jQ = function($) {
// code goes here
};
jQ(jQuery);
新手如果無法理解，你知道，這是官方標準就ok。
下面是這個美化表格的例子，實現原理倒是簡單，無非就是找到表格的奇偶行，然後添加不同的class，活動行高亮顯示也很簡單，隻要判斷mouseover事件，然後添加一個class，mouseout的時候，再去掉這個class即可。
查看這個鏈接能看到詳細，你可以查看具體看看，寫的不錯，特別是步驟很清晰。
好，基本框架曉得瞭，下面就是填充具體內容瞭。
復制代碼
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend({},defaults, options);
this.each(function(){
//實現代碼
});
};
})(jQuery);
重復一句：
var options = $.extend({}，defaults, options);
其實就是合並多個對象為一個。這裡就是，如果你在調用的時候寫瞭新的參數，就用你新的參數，如果沒有寫，就用默認的參數。想進一步瞭解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/
其實，這裡定義默認 var defaults是不規則的寫法，
規則該是這樣
$.fn.TableUI.defaults={
evenRowCass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
options = $.extend({},$.fn.TableUI.defaults,options);
好瞭，直接看全部代碼：
//這裡最好寫上相關描述，如時間，作者，主要用於幹什麼
/*
* tableUI 0.1
* Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/
* Date: 2010-03-30
* 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替，鼠標移上高亮顯示
*/
;(function($){
$.fn.tableUI = function(options){
$.fn.TableUI.defaults={
evenRowCass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
var options = $.extend({}, $.fn.TableUI.defaults, options); //合並
return this.each(function(){
var thisTable=$(this);
//添加奇偶行顏色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活動行顏色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
下面是調用代碼。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/TableUI.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".table_solid").TableUI({ evenRowCass: "eventRow", oddRowClass: "oddRowClass", activeRowClass: "activeRow" }); //這裡是輸入新的參數，不使用默認參數。插件代碼會自動覆蓋。
})
</script>
<style type="text/css">
body
{
font-family: 'Verdana' , '宋體';
font-size: 12px;
}
.eventRow
{
background-color: #f0f0ff;
}
.activeRow
{
background-color: #FFFF55;
}
.oddRowClass
{
background-color: red;
}
</style>