JQuery Plugin插件，如果大家不明白什麼是JQuery插件或都不清楚如何編寫可以查看其官方的網站：jQuery Authoring Guidelines
好了，下面有一些我覺得想做一個好的插件必須應有的要求：
1、在JQuery命名空間下聲明只聲明一個單獨的名稱
2、接受options參數，以便控制插件的行為
3、暴露插件的默認設置 ，以便外面可以訪問
4、適當地將子函數提供給外部訪問調用
5、保持私有函數
6、支持元數據插件
下面將逐條地過一遍：
只聲明一個單獨的名稱 這表明是一個單獨的插件腳本。如果你的腳本包含多個插件或者是互補的插件（像$.fn.doSomething()和$.undoSomething()），那麼你可以根據要求聲明多個名稱。但一般情況下，力爭用單一的名稱來維持插件現實的所有細節。
在本例中，我們將聲明一個叫“hilight”的名稱
代碼如下:
// 插件的定義
$.fn.hilight = function( options ){
// 這裡就是插件的實現代碼了...
};
然後我們可以像這樣調用它：
$("divTest").hilight();
接受一個options參數，以便控件插件的行為 代碼如下:
$.fn.hilight = function(options){
var defaults = {
foreground : 'red',
background : 'yellow'
};
//Extends out defaults options with those privided 擴展我們默認的設置
$.extend(defaults,options);
};
而我們可以這樣使用它：
代碼如下:
$('#myDiv').hilight({
foreground: 'blue'
});
暴露插件的默認設置 ，以便外面可以訪問 作為插件的提升和優化，我們應該將上面的代碼暴露出來作為插件的默認設置。
這非常重要，這樣做讓使用插件的用戶可以非常容易地用最少的代碼重寫或自定義該插件。然而這個我們可以借助JavaScript function對象的優勢：
代碼如下:
$.fn.hilight = function(options){
//Extend our default options with those provided
//Note that the first arg to extend is an empty object
//this is to keep from overriding our "defaults" object
var opts = $.extend({},$.fn.hilight.defaults,options);
}
$.fn.hilight.defaults = {
foreground : 'red',
background : 'yellow'
};
這裡值得注意的是$.extend()第一個參數是一個空的對象，這樣可以讓我們重寫插件的默認設置
用戶可以像這樣使用插件：
代碼如下:
// override plugin default foreground color
$.fn.hilight.defaults.foreground = 'blue';
// ...
// invoke plugin using new defaults
$('.hilightDiv').hilight();
// ...
// override default by passing options to plugin method
$('#green').hilight({
foreground: 'green'
});
適當地將子函數提供給外部訪問調用 這個例子延續前面的例子，你會發現有一個有趣的方法可以擴展你的插件（然後還可以讓其他人擴展你的插件 :)）。例如，我們在插件裡聲明了一個函數叫“format”用來高這顯示文本，我們的插件實現代碼可能是這樣子的：
代碼如下:
$.fn.hight = function(options){
//iterate and reformat each mached element
return this.each(function(){
var $this = $(this);
//...
var markup = $this.html();
//call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
//define our format function
$.fn.hilight.format = function(txt){
return '<strong>' + txt + '</strong>';
};
保持私有函數
暴露插件有部分內容提供重寫看上去似乎非常強大，但是你必須認真地考慮你的插件哪一部分是需要暴露出來的。一旦暴露出來，你就需要考慮這些變化點，一般情況下，如果你沒有把握哪部分需要暴露出來，那麼你可以不這樣做。
那如何才能夠定義更多的函數而不將其暴露出來呢？這個任務就交給閉包吧。為了證實，我們在插件中添加一個函數叫“debug”，這debug函數將會記錄已選擇的元素數量到FireBug控制台中。為了創建閉包，我們將插件定義的整部分都包裝起來：
代碼如下:
//create closure
(function($){
//plugin definition
$.fn.hilight = function(options){
debug(this);
//...
};
//private function for debuggin
function debug($obj){
if(window.console && window.console.log){
window.console.log('hilight selection count :' + $obj.size());
}
}
//...
//end of closure
})(jQuery);
這樣“debug”方法就不能被閉包這外調用了
支持元數據插件 依賴於所寫的插件類型，並支持元數據插件會使得其本身更加強大。個人來講，我喜歡元素據插件，因為它能讓你分離標簽中重寫插件的配置（這在寫demo和示例時特別有用）。最重要的是，想現實它特別的容易！
代碼如下:
$.fn.hilight = function(options){
//build main options before element interation
var opts = $.extend({},$.fn.hilight.defaults,options);
return this.each(function(){
var $this = $(this);
//build element specific options
var o = $.meta ? $.extend({},opts,$this.data()) : opts;
//一般句話，搞定支持元數據 功能
});
}
幾行的變化完成了以下幾件事：
1、檢測元數據是否已經配置
2、如果已配置，將配置屬性與額外的元數據進行擴展
代碼如下:
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!這是元數據
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!在標簽中配置
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
然後我們通過一句腳本就可以根據元數據配置分開地高亮顯示這些div標簽：
代碼如下:
$('.hilight').hilight();
最後，將全部代碼放在一起：
代碼如下:
//
//create closure
//
(function($){
//
// plugin definition
//
$.fn.hilight = function(options){
debug(this);
//build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
//iterate and reformat each matched element
return this.each(function(){
$this = $(this);
//build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
//call our format function
});
}
//
// private function for debugging
//
function debug($obj){
if(window.console && window.console.log){
window.console.log('hilight selection count: ' + $obj.size());
}
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt){
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground : 'red',
background : 'yellow'
};
//
// end of clousure
//
})(jQuery);
轉載請注明出處http://samlin.cnblogs.com
比較希望大家開發jquery plugin的時候可以在最後把方法開放出來
return {
method1: funcion() {},
method2: funcion() {}
}
這樣我們在使用的時候就可以用如下方式調用
var plugin = $("<div/>").plugin();
plugin.mehtod1();
plugin.method2();