jQuery插件編寫：基礎篇（一）

我相信每個使用過jQuery的朋友都會對它強大的魅力所折服。jQuery給我們提供了一組跨浏覽器的操作DOM的增強API，這使得我們開發擁有豐富功能的Web應用變得更加簡單。另外，jQuery也采用了非常棒的插件機制，在增強了jQuery的功能的同時保持了jQuery核心庫的體積很小。實際上，擁有衆多插件的支援，也是我們使用jQuery的另一個重要原因。也許是為了項目需要，也許是為了自己能一試身手，我們想要自己開發插件。

jQuery給我們提供的操作方法分為兩種，一種是工具型的函數，它們都直接添加到$命名空間上，如$.ajax(). $.trim()等等。另一種是jQuery對象上的方法，如：$("#divDemo").width(400)。同樣，我們編寫的插件也将分為兩類：

（1）直接定義在$命名空間上的工具函數

（2）添加到jQuery包裝集（jQuery對象）上的方法

在這一篇中，我們将先介紹如何開發第一種插件。

基于JS的動态性，我們很容易就能完成一個簡單的插件。

$.sayHello = function() {
	alert("Hello World!");
}
$.sayHello(); // alert "Hello World!"
           

但是我們有時不能保證$符号一定指代的是jQuery，使用者可能使用了$.noConflict()。是以我們要采用一個小技巧來實作。

(function($) {
	// 這裡還可以添加插件的私有變量
	
	$.sayHello = function() {
		alert("Hello World!");
	}
})(jQuery);
$.sayHello();// alert "Hello World!"
           

這裡的不同之處是我們把插件代碼放在了一個即時執行函數中，把jQuery作為參數傳遞給了函數内部的$變量中，這下我們就可以放心的使用我們心愛的$符号了。而且這種方式還給我們帶來了一個驚喜，我們可以在這個匿名函數中定義一些臨時變量，來輔助我們開發一些複雜的插件，而不會污染全局變量環境。如下面的例子所示：

(function($) {
	// 這裡還可以添加插件的私有變量
	var title = "警告"; // 預設标題
	var content = "系統運作錯誤"; // 預設消息内容
	
	$.sayHello = function(t, c) {
		var msg = "";
		if(t) {
			msg += "TITLE:" + t;
		} else {
			msg += "TITLE:" + title; // 使用者沒指定就選擇預設
		}
		msg += "\n";
		if(c) {
			msg += "CONTENT:" + c;
		} else {
			msg += "CONTENT:" + content; // 預設值
		}
		alert(msg);
	}
})(jQuery);
$.sayHello(); // alert TITLE:警告（換行）CONTENT:系統運作錯誤
$.sayHello("提示","操作成功"); // alert TITLE:提示（換行）CONTENT:操作成功
           

這裡就有了一個插件的基本原型了，我們給它添加了預設配置值。插件使用者不傳任何參數将以預設值來彈出提示，如果傳入了參數就以使用者傳入的參數進行顯示。其實我們所定義的title和content都是插件的配置項。有時候一個插件可能包含幾十個配置項，這樣一個個去判斷使用者是否傳入參數顯然不妥。而且按照這種參數清單的形式提供幾十項配置更是不可能。這裡我們有另外一個技巧可以解決上述問題。用一個普通JS對象作為函數的參數。

(function($) {
	var settings = {
		title : "警告",
		secondTitle : "系統警告",
		content : "系統運作錯誤"
	};
	$.sayHello = function(options) {
		settings = $.extend(settings, options || {}); // options 中的項會依次覆寫setings中的項
		var msg = "TITLE:" + settings.title + "\n";
		msg += "SECOND_TITLE:" + settings.secondTitle + "\n";
		msg += "CONTENT:" + settings.content;
		alert(msg);
	}
})(jQuery);
$.sayHello({
	title:"First",
	secondTitle:"Scond",
	content:"Hello"
}); // 按照這種方式去調用插件，裡面的title，secondTitle, content 都是可選的
           

這種方式是目前比較常用的插件開發模式。采用一個options對象作為插件函數的參數，便可以提供大量可選的參數配置。而在插件内部使用一個settings對象來列出所有的預設配置值。再借助神奇的$.extend()函數，我們可以很友善的使用options來覆寫Settings中的預設值。關于$.extend()簡單舉一個例子，比如：

var settings = {
	name : "Jim",
	sex : "Boy"
}
var options = {
	name : "Lucy"
}
settings = $.extend(settings, options || {});
執行完成後，Settings = {name : "Lucy", sex : "Boy"}
           

另外第二個參數采用options || {} 是為了防止options未定義，就用空對象{}去覆寫。$.extend()函數還有其他的一些用法，可以查閱相關文檔。

下面給出編寫第一類插件（實用函數）的基本架構結構：

(function($) {
	var settings = {
		def1 : "def1",
		def2 : "def2",
		//... 更多預設配置
	};
	$.myPlugin = function(options) {
		settings = $.extend(settings, options || {}); // 合并預設和使用者配置
		
		// 這裡寫你的插件邏輯
	}
})(jQuery);