jQuery插件構成基礎知識

通常，咱們對Jquery的擴展有兩種形式

1. 註冊在$.fn命名空間的插件擴展
2. 註冊在$命名空間的工具函數擴展

插件擴展通常是依賴Dom節點的，也就是咱們常見的插件啓動每每是這種形式的：

$('#target').plugin(options);

工具是不依賴Dom節點的，如 $.extend()、 $.parseJSON() 方法。

一個典型的Jquery插件通常會包含以下幾部分:

• Jquery庫_
• 插件的jQuery實現文件，主要是註冊在$.fn命名空間中的插件核心代碼_
• 靜態資源文件：關聯的CSS樣式文件、圖片等_
• 做爲插件容器的目標DOM節點_
• 若干行插件的啓動代碼_

在Jquery插件核心實現的外層設計上，每每遵循如下設計：

首先會在覈心實現代碼最外部套上

(function($){
	//implemention code for plugin ...
})(Jquery);

即給閉包傳入Jquery對象來初始化$參數，從而避免在插件的代碼實現中用到的$變量與其餘框架中的$衝突， 同時也將插件實現時定義的變量與外部上下文環境解耦出來，避免變量污染。

接着開始在fn命名空間中註冊插件函數

(function($){
	$.fn.插件名字 = function(customizeOptions){
		//coding ...
	}
})(Jquery);

右邊的閉包實現每每能夠傳入一個customize option， 其會在閉包內部經過extend方法與將用戶自定義配置與默認選項合併

(function($){
	$.fn.插件名字 = function(customizeOption){
		var defaultOption = {
			a: xxx,
			b: xxx,
			...
		};

		var option = $.extend({}, defaultOption, customizeOption);
	}
})(Jquery);

接着你能夠經過this.each來迭代每一個符合css選擇器規則的目標Dom節點， 經過$(this)來訪問插件的單個特定的目標Dom節點所對應的Jquery對象。

(function($){
	$.fn.插件名字 = function(customizeOptions){
		var defaultOption = {
			a: xxx,
			b: xxx,
			...
		};

		var option = $.extend({}, defaultOption, customizeOption);

		return this.each(function(){
			$this = $(this);
			//implemention coding...
		});
	}
})(Jquery);

以上即是Jquery插件的通常外層設計，最後即是須要發揮你的想象來操做$this對象實現各類效果。

最後拓展一下，在jQuery特效插件方面，通常站點有三種組織形式

1. 經過iframe內聯一個特定頁面來顯示特效，而這個特定頁面獨佔式的僅僅是用於實現特效的
2. 經過內聯一個flash object對象來顯示特效
3. 手動在當前頁面啓動的jQuery插件特效

前兩種形式咱們直接找出相關引用的路徑就能直接摳出效果插件了。 第三種形式咱們能夠嘗試找到DOM的啓動節點，而後全文搜索節點ID每每就能找到插件函數名，咱們能夠上github上搜索一下是否有相應的現成的項目，找不到的話只能按插件的構成一步步去摳出來。