jQuery外掛程式開發模式

軟體開發過程中是需要一定的設計模式來指導開發的，有了模式，我們就能更好地組織我們的**，並且從這些前人總結出來的模式中學到很多好的實踐。

根據《jquery高階程式設計》的描述，jquery外掛程式開發方式主要有三種：

通過$.extend()來擴充套件jquery

通過$.fn 向jquery新增新的方法

通過$.widget()應用jquery ui的部件工廠方式建立

通常我們使用第二種方法來進行簡單外掛程式開發，說簡單是相對於第三種方式。第三種方式是用來開發更高階jquery部件的，該模式開發出來的部件帶有很多jquery內建的特性，比如外掛程式的狀態資訊自動儲存，各種關於外掛程式的常用方法等。而第一種方式又太簡單，僅僅是在jquery命名空間或者理解成jquery身上新增了乙個靜態方法而已。所以我們呼叫通過$.extend()新增的函式時直接通過$符號呼叫（$.myfunction()）而不需要選中dom元素

$.extend(
})$.sayhello(); 
//呼叫
$.sayhello('
wayou
'); //
帶參呼叫

上面**中，通過$.extend()向jquery新增了乙個sayhello函式，然後通過$直接呼叫。到此你可以認為我們已經完成了乙個簡單的jquery外掛程式了。

但是這種方式無法利用jquery 強大的選擇器帶來的便利，要處理dom元素以及將外掛程式更好的運用於所選擇的元素上，還需要使用第二種開發方式。

基本格式：

$.fn.pluginname =function()

往 $.fn 上面新增乙個方法，名字是我們的外掛程式名稱。然後外掛程式**在這個方法裡面展開。

例：

這是p標籤不是a標籤，我不會受影響

而 jquery.myplugin.js 為我們自定義的外掛程式，內容如下：

$.fn.myplugin =function()

有的時候，當乙個頁面可能會引用多個外掛程式的時候，為了保證外掛程式的正確，我們可以在我們的外掛程式起始加乙個 ; 來表示上乙個外掛程式結束，開始新的外掛程式

呼叫外掛程式的方法 $('a').myplugin() 相當於 $('a').css('color','red'); 即把所有的a標籤轉為紅色

外掛程式裡面的this 指代jquery 選擇器返回的集合，而通過呼叫 jquery 的.each() 方法可以處理合集中的每個元素了。在each 方法內部，this指代的時候普通的dom 元素，所以需要用$包裝，如$(this)

$.fn.myplugin =function() ))
}

jquery有乙個特性就是支援鏈式呼叫，選擇好的dom元素後可以不斷的呼叫其他方法，要不打破這種鏈式呼叫，需要把最後的值 return 一下

而乙個好的外掛程式是可以讓使用者隨意定製的，所以需要在編寫外掛程式是要考慮的全面一些，盡量提供合適的引數。比如，我們可以讓使用者定義顯示什麼顏色。需要讓使用者在呼叫的時候傳入乙個引數，我們在外掛程式**裡面接受即可。為了靈活，使用者可以不傳遞引數，外掛程式裡面採用預設值。為了保護好預設引數，所以第乙個值使用新的空物件{}

$.fn.myplugin =function(options) ;
var settings =$.extend({},defaults, options);
return
this
.css();
}

在處理外掛程式引數的接收上，通常使用jquery的extend方法。當給extend方法傳遞乙個以上的引數時，它會將所有引數合併到第乙個裡，同時，如果物件中有同名屬性時，合併的時候後面的會覆蓋前面的。

需要乙個方法是就去定義乙個function，需要變數是就去定義乙個變數，這樣不方便維護，也不夠清晰。一旦**較多的時候，還是使用物件導向的思維比較好。

將需要的重要變數定義到物件的屬性上，函式變成方法，當我們需要的時候通過物件來獲取，一來方便管理，二來不會影響外部命名空間，因為變數名和方法名都在物件內部

（function(),
this.options = $.extend({}, this
.defaults, opt)}//
定義beautifier的方法
beautifier.prototype =);
}}//
在外掛程式中使用beautifier物件
$.fn.myplugin =function(options) 
});

在寫任意js**時都應該注意不要汙染全域性命名空間。因為隨著**的變多，全域性範圍的變數很難維護，也容易跟別人的**有衝突。最好始終用自呼叫匿名函式包裹**

如上面的例子，我們調整了**的組織結構，並將其用自呼叫匿名函式包裹。自呼叫匿名函式裡面的**會在第一時間執行，方便後面的**使用外掛程式。

為了防止多個外掛程式同時使用時，有的外掛程式沒有用分號結尾，最好在**開始加個分號 ;

而，原有的系統變數也有可能被更改，所以最好將系統變數以引數形式傳遞到外掛程式內部。這樣外掛程式內部就有乙個區域性的引用，可以提高訪問速度，會有些許效能提公升

結構如下：

;(function($,window,document,undefined))(jquery,window,document);

而至於這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們並沒有傳遞這個引數，但卻在接收時接收了它，因為實際並沒有傳，所以『undefined』那個位置接收到的就是真實的'undefined'了。

最終，這個外掛程式應該為：

;(function($, window, document,undefined) ,
this.options = $.extend({}, this.defaults, opt)
}//定義beautifier的方法
beautifier.prototype = );}}
//在外掛程式中使用beautifier物件
$.fn.myplugin = function(options) 
})(jquery, window, document);

參考：

jQuery外掛程式開發模式

jQuery 外掛程式開發

jquery 外掛程式開發

jquery 外掛程式開發

jQuery外掛程式開發模式

jQuery 外掛程式開發

jquery 外掛程式開發

jquery 外掛程式開發

相關推薦