欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

制作高質(zhì)量的JQuery Plugin 插件的方法

 更新時(shí)間：2010年04月20日 19:07:02   作者：  
最近jquery非常流行，想個(gè)性化定制一些功能，就可以將代碼寫成插件的形式，方便使用與修改。
JQuery Plugin插件，如果大家不明白什么是JQuery插件或都不清楚如何編寫可以查看其官方的網(wǎng)站：jQuery Authoring Guidelines
好了，下面有一些我覺得想做一個(gè)好的插件必須應(yīng)有的要求：
1、在JQuery命名空間下聲明只聲明一個(gè)單獨(dú)的名稱
2、接受options參數(shù)，以便控制插件的行為
3、暴露插件的默認(rèn)設(shè)置 ，以便外面可以訪問
4、適當(dāng)?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
5、保持私有函數(shù)
6、支持元數(shù)據(jù)插件
下面將逐條地過一遍：
只聲明一個(gè)單獨(dú)的名稱
這表明是一個(gè)單獨(dú)的插件腳本。如果你的腳本包含多個(gè)插件或者是互補(bǔ)的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根據(jù)要求聲明多個(gè)名稱。但一般情況下，力爭用單一的名稱來維持插件現(xiàn)實(shí)的所有細(xì)節(jié)。
在本例中，我們將聲明一個(gè)叫“hilight”的名稱
復(fù)制代碼 代碼如下:

// 插件的定義
$.fn.hilight = function( options ){
// 這里就是插件的實(shí)現(xiàn)代碼了...
};
然后我們可以像這樣調(diào)用它：
$("divTest").hilight();

接受一個(gè)options參數(shù)，以便控件插件的行為
復(fù)制代碼 代碼如下:

$.fn.hilight = function(options){
var defaults = {
foreground : 'red',
background : 'yellow'
};
//Extends out defaults options with those privided 擴(kuò)展我們默認(rèn)的設(shè)置
$.extend(defaults,options);
};

而我們可以這樣使用它：
復(fù)制代碼 代碼如下:

$('#myDiv').hilight({
foreground: 'blue'
});

暴露插件的默認(rèn)設(shè)置 ，以便外面可以訪問
作為插件的提升和優(yōu)化，我們應(yīng)該將上面的代碼暴露出來作為插件的默認(rèn)設(shè)置。
這非常重要，這樣做讓使用插件的用戶可以非常容易地用最少的代碼重寫或自定義該插件。然而這個(gè)我們可以借助JavaScript function對(duì)象的優(yōu)勢(shì)：
復(fù)制代碼 代碼如下:

$.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()第一個(gè)參數(shù)是一個(gè)空的對(duì)象，這樣可以讓我們重寫插件的默認(rèn)設(shè)置
用戶可以像這樣使用插件：
復(fù)制代碼 代碼如下:

// 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'
});

適當(dāng)?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
這個(gè)例子延續(xù)前面的例子，你會(huì)發(fā)現(xiàn)有一個(gè)有趣的方法可以擴(kuò)展你的插件（然后還可以讓其他人擴(kuò)展你的插件 :)）。例如，我們?cè)诓寮锫暶髁艘粋€(gè)函數(shù)叫“format”用來高這顯示文本，我們的插件實(shí)現(xiàn)代碼可能是這樣子的：
復(fù)制代碼 代碼如下:

$.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>';
};

保持私有函數(shù)
暴露插件有部分內(nèi)容提供重寫看上去似乎非常強(qiáng)大，但是你必須認(rèn)真地考慮你的插件哪一部分是需要暴露出來的。一旦暴露出來，你就需要考慮這些變化點(diǎn)，一般情況下，如果你沒有把握哪部分需要暴露出來，那么你可以不這樣做。
那如何才能夠定義更多的函數(shù)而不將其暴露出來呢？這個(gè)任務(wù)就交給閉包吧。為了證實(shí)，我們?cè)诓寮刑砑右粋€(gè)函數(shù)叫“debug”，這debug函數(shù)將會(huì)記錄已選擇的元素?cái)?shù)量到FireBug控制臺(tái)中。為了創(chuàng)建閉包，我們將插件定義的整部分都包裝起來：
復(fù)制代碼 代碼如下:

//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”方法就不能被閉包這外調(diào)用了
支持元數(shù)據(jù)插件
依賴于所寫的插件類型，并支持元數(shù)據(jù)插件會(huì)使得其本身更加強(qiáng)大。個(gè)人來講，我喜歡元素?fù)?jù)插件，因?yàn)樗茏屇惴蛛x標(biāo)簽中重寫插件的配置（這在寫demo和示例時(shí)特別有用）。最重要的是，想現(xiàn)實(shí)它特別的容易！
復(fù)制代碼 代碼如下:

$.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;
//一般句話，搞定支持元數(shù)據(jù) 功能
});
}

幾行的變化完成了以下幾件事：
1、檢測(cè)元數(shù)據(jù)是否已經(jīng)配置
2、如果已配置，將配置屬性與額外的元數(shù)據(jù)進(jìn)行擴(kuò)展
復(fù)制代碼 代碼如下:

<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!這是元數(shù)據(jù)
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!在標(biāo)簽中配置
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>

然后我們通過一句腳本就可以根據(jù)元數(shù)據(jù)配置分開地高亮顯示這些div標(biāo)簽：
復(fù)制代碼 代碼如下:

$('.hilight').hilight();

最后，將全部代碼放在一起：
復(fù)制代碼 代碼如下:

//
//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);

轉(zhuǎn)載請(qǐng)注明出處http://samlin.cnblogs.com
比較希望大家開發(fā)jquery plugin的時(shí)候可以在最后把方法開放出來
return {
method1: funcion() {},
method2: funcion() {}
}

這樣我們?cè)谑褂玫臅r(shí)候就可以用如下方式調(diào)用
var plugin = $("<div/>").plugin();
plugin.mehtod1();
plugin.method2();

相關(guān)文章

最新評(píng)論