js jQuery外掛程式開發總結

最近開發了用了jquery，也玩了玩jquery的外掛程式。上次使用jquery是一年前，從沒弄過jquery外掛程式，下次在用jquery也不知道是什麼時候，不如現在總結一下。再從聰明的腦袋也抗不如歲月的沖刷，總結，總結，總結~

1，外掛程式的定義

首先，何為外掛程式？

「外掛程式是一種遵循一定規範的應用程式介面編寫出來的程式。很多軟體都有外掛程式，外掛程式有無數種。」

jquery外掛程式也同樣，遵循一定的規範，能夠融入jquery library。

2，開發外掛程式的好處

如果做一件事情沒有意義，那麼還做他幹什麼呢？所以，開發乙個jquery外掛程式有什麼好處呢？

1) 抽象

談談我對抽象的理解。

2)可復用

將常用的功能封裝到乙個外掛程式中，能夠提高這些**的便攜性。以後遇到同樣的需求，可以很方便的移植。

3）約束

開發jquery外掛程式所要遵循的模式，你夠約束你的**，減少作用域/命名空間衝突的可能性。

3，如何開發jquery外掛程式呢？

既然知道什麼是jquery外掛程式，用它有什麼好處，那麼接下的問題是如何開發jquery的外掛程式呢？

開發乙個jquery外掛程式是很容易的，是jquery外掛程式,jquery ui外掛程式不做考慮。只需要一句話：

jquery.fn.pluginname=function(){};

這個就是第一部分中說到的所要遵循的標準，jquery外掛程式的標準。比如，開發乙個按鈕外掛程式，就可以這樣寫：

jquery.fn.custombutton=function(){};

而且可以這樣在網頁中新增乙個按鈕：

$('').custombuttion();

這種用法似曾相識嗎？

當然，如果你用過jquery的話，在jquery中，$('#mydiv').addclass(),$('#mydiv').bind('click'),$('#mydiv').attr(),其中的addclass,bind,attr都是jquery的方法，現在，我們剛才定義的custombuttion也成為其中的一員了，這就是自定義的外掛程式，實現簡單，使用方便。

但是，想要開發乙個robust 的jquery外掛程式，尤其是應對各種情況，滿足各種需求的外掛程式，我們還需要更深入的了解。

首先，jquery.fn.custombutton=function(){}是什麼意思？為什麼這麼做就可以了呢？

$(『』)返回乙個jquery object，而jquery.fn就是jquery.prototype（可以去看jquery的源**），所以任何的jquery object都可以呼叫這個外掛程式方法。

然後，如何開發乙個好的外掛程式的？

先看jquery官方的這篇文章：plugins/authoring

這篇文章系統的講述了開發乙個外掛程式的基本流程以及如何開發乙個好的外掛程式。

看完了基礎的，可以再來點高階的，essential jquery plugin patterns

這篇文章講述了幾種jquery外掛程式設計模式。這篇文章真的很高階，真心沒看懂~

10 tutorlas for beginers

4，乙個按鈕的jquery外掛程式

下面是我自己的寫的乙個算是按鈕的東西的外掛程式吧，雖然不能算是很正規的按鈕，但是在乙個專案中的任何需要滑鼠懸停上去乙個樣子，離開乙個樣子，需要設定是否disabled的地方，都可以，真的很方便。

(function($) ,
setdisable:function()
};if(ablemethods[options])
else
if( typeof options === 'object')
else
function init(options) );
bindhoverevent();
}function bindhoverevent() );
$this.bind('mouseout', function() );
}function unbindhoverevent() 
return
this;
}})(jquery);

使用的方法：

<
html
>
<
head
>
<
style
>
div#show1 span,div#show1 span.normal
div#show1 span.hover
div#show1 span.disabled
style
>
<
script
src="jquery-1.8.0.min.js"
>
script
>
"show1">
var mybt=$('').button(
mybt.button('setdisable');
script
>
body
>
html
>

我第一次傳入了的引數是乙個物件，設定按鈕顯示的文字和三種狀態對應的css 類名。第二次呼叫button則是傳入了乙個函式的名稱的字串，是為了禁用這個按鈕。

js jQuery外掛程式開發總結

jquery外掛程式開發總結

jQuery外掛程式開發總結

jquery外掛程式開發總結

js jQuery外掛程式開發總結

jquery外掛程式開發總結

jQuery外掛程式開發總結

jquery外掛程式開發總結

相關推薦