jQuery插件開發的兩種方法

在jQuery中，工廠函數($) 是整個jQuery庫的核心，所有其他API都通過工廠函數進行調用，因此jQuery的插件以工廠函數爲核心，對其進行拓展，可以將工廠函數當做一個JavaScript對象，通過對工廠函數進行擴充就可以創建自己的jQuery插件。

jQuery插件的開發方法分爲兩種

1. 對象級別的插件開發

這類插件是指在jQuery的選擇器對象上添加對象方法，只有存在一個jQuery對象的實例時，才能調用該插件。

2. 類級別的插件開發

這類插件是指在類級別添加靜態方法，並且將函數置於jQuery的命名空間中，比如經典的$.ajax()、$.trim()等就屬於類級別的插件。

jQuery插件開發的注意事項：

1. 插件文件的命名必須要遵循 jquery.插件名.js 的規則。
2. 對象級別的插件，所有的方法都應依附於 jquery.fn 對象；而類級別的插件所有的方法都應該依附於jQuery工廠對象。
3. 無論哪種級別的插件，結尾必須以分號結束，否則文件被壓縮時會出現錯誤提示。
4. 要理解插件內部的this作用域。
5. 插件必須返回一個jQuery對象，以支持jQuery的鏈式操作語法。
6. 插件編寫時儘量避免$美元符號的工廠方法，應儘量使用jQuery字符串以避免與其他代碼產生衝突。

在開始進行插件開發之前，要了解對象級別的插件使用jQuery.fn.extend方法進行擴展，類級別的插件使用jQuery.extend方法進行擴展

開始擼代碼

一.開發對象級別插件

創建一個名爲jquery.border.js的文件，這個border插件可以爲選中的元素添加邊框。

1. 首先編寫插件的框架代碼：

;(function($){
	$.fn.extend({
		"border":function(value){
			//這裏寫插件代碼
		}
	});
})(jQuery)

• 這裏定義了一個匿名函數，並使之立即執行，這樣可以使js文件在加載時就附在jQuery對象上；
• 在匿名函數前面放了一個分號，是出於兼容性的考慮，一般建議在創建自己的插件的時候在函數面前也放一個分號；
• $.fn.extend內部的json代碼中添加了一個名爲border的方法，這個方法在運行時會被合併到jQuery庫中（定義方法名時不能與現有的jQuery對象方法同名，否則會覆蓋現有的方法）

2. 爲border插件添加代碼，實現插件功能，同時也支持鏈式語法，即插件要返回自身，代碼如下：

;(function($){
	$.fn.extend({
		"border":function(options){
			//設置屬性
			options=$.extend({
				width:"1px",
				line:"solid",
				color:"#090"
			},options);
			//設置樣式
			this.css("border",options.width+' '+options.line+' '+options.color);
			//返回對象，以便支持鏈式語法
			return this;
		}
	});
})(jQuery)

• border方法接收一個options參數，在函數體內命名用$.extend對傳入的options與現有默認屬性進行了合併，這允許用戶用如下語法來設置border：

$("#test").border({width:"2px",line:"dotted",color:"blue"});

• 代碼結尾使用了return this語句，用來返回當前jQuery選擇器中的對象列表，以便支持鏈式操作，比如支持以下操作：

$("#test").border().css("corlor":"#0C0");

二.開發類級別插件

類級別的插件實際上是在jQuery命名空間內部添加函數，一般主要用於功能性函數，而非UI級別的函數，比如 $.trim() 或者是 $.ajax都屬於功能性函數，它們是jQuery類本身的擴充，類似於在jQuery函數中添加全局函數，因此也稱爲全局函數插件。

• 創建全局函數使用 $.extend()，其代碼結構如下：

;(function($){
	$.extend({
		"modalwindow":function(value){
			//這裏寫插件代碼
		}
	});
})(jQuery)

在調用時只需要直接使用 $.modalwindow 這樣的語句就可以調用，他不需要先具有jQuery選擇器的實例。

• 創建一個名爲 jquery.modalwindow.js 的文件，然後添加類級別的插件代碼：

;(function($){
	$.extend({
		"modalwindow":function(options){
			//設置屬性
			options=$.extend({
				url:"https://cn.bing.com/",
				vArguments:"null",
				dialogHeight:"200px",
				dialogWidth:"500px",
				dialogLeft:"100px",
				dialogTop:"50px",
				status:"no",
				help:"no",
				resizable:"no",
				scroll:"no"
			},options);
			//彈出窗口
			var retVal = window.showModalDialog(options.url,options.vArguments,
						"dialogHeight:"+options.dialogHeight+";dialogWidth:"+options.dialogWidth+
						";dialogLeft:"+options.dialogLeft+";dialogTop:"+options.dialogTop+
						";status:"+options.status+";help:"+options.help+";resizable:"+options.resizable+
						";scroll:"+options.scroll+";");
			//返回彈出式窗口
			return retVal;
		}
	});
})(jQuery)

• 上面的代碼中，使用$.extend擴展了jQuery類，可以看到，它首先定義了一個 options 對象，用來爲模式窗口定義參數，然後調用 window.showModalDialog 函數，在瀏覽器上顯示一個模式窗體，最後返回模式窗體的結果值。