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 '' + txt + '';

};

保持私有函數暴露插件有部分內容提供重寫看上去似乎非常強大，但是你必須認真地考慮你的插件哪一部分是需要暴露出來的。一旦暴露出來，你就需要考慮這些變化點，一般情況下，如果你沒有把握哪部分需要暴露出來，那么你可以不這樣做。

那如何才能夠定義更多的函數而不將其暴露出來呢？這個任務就交給閉包吧。為了證實，我們在插件中添加一個函數叫“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、如果已配置，將配置屬性與額外的元數據進行擴展

Have a nice day!這是元數據

Have a nice day!在標簽中配置

Have a nice day!

然后我們通過一句腳本就可以根據元數據配置分開地高亮顯示這些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 '' + txt + '';

};

//

// 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 = $("

plugin.mehtod1();

plugin.method2();

總結

以上是生活随笔為你收集整理的html5 jquery paint plugin,制作高质量的JQuery Plugin 插件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。