總結(jié)jQuery插件開(kāi)發(fā)中的一些要點(diǎn)

1、總結(jié)jquery插件開(kāi)發(fā)中的一些要點(diǎn)這篇文章主要介紹了總結(jié)jquery插件開(kāi)發(fā)中的一些要 點(diǎn),包括命名空間與事件events等重點(diǎn)和難點(diǎn)部分的講解, 要的朋友可以參考下基礎(chǔ)1、jquery插件開(kāi)發(fā)主要使用如下兩個(gè)方法：1. 1、添加靜態(tài)方法jquery. extend (object);為擴(kuò)展jquery本身，為類(lèi)添加新的方法，可以理解文 添加靜態(tài)方法。$ extend (nbsp;addmethod :function(a ,b) returna +b;nbsp;/$. addmethod (1,2);/ret urn3);1.2、添加成員方法jqu ery. fn. exte nd (ob

2、ject);jquery. fn 二jquery. pro totype給jq uery對(duì)象添加方法，對(duì)jquery. pro totype進(jìn)行 擴(kuò)展，為jquery類(lèi)添加成員方法：$ fn. ex tend(nbsp;nbsp; getl nput text: fu net ion () nb sp;nbsp;n bsp; $ (this) click(func tion() nbsp ;nbsp; nbs p; nbsp; aler t ($ (this) v al () : nbsp; nbspjnbsp;);nbsp;nbsp ;nbsp;);$ (#userna me) getlnp

3、 uttext ();2、一個(gè)通用的框架： 以下是一個(gè)通用的框架： (fu notion($) n bsp;nbsp;$. fn. yourpl uginname=fu nction(options) nbsp;nbsp;nbsp;/各種屬性和參數(shù)nb sp;nbsp;n bsp;varopti ons=$ exten d(defaults, options) ;nb sp;nbsp; n bsp; this ea ch (function () nbsp;n bsp;nbsp;nb sp;/插件的實(shí)現(xiàn)代碼 nbsp;nbsp;);nbsp;nbs p; ;nbsp;) (jquery);關(guān)于

4、$ extend (defaults, op tions);就是通過(guò)合并default s和options來(lái)擴(kuò)展defaults,實(shí)現(xiàn)插件默認(rèn)參數(shù)的功能。實(shí)踐1、聲明插件名稱(chēng)：添加一個(gè)函數(shù)到 jq uery. fn (jqu ery. prototy pe)對(duì) 象，該函數(shù)的名稱(chēng)就是你的插件名稱(chēng)：jquery. fn. myplugin=fu notion() nbsp: /doyo urawesomepl uginstuffhe re;在命名不與jquery其他函數(shù)沖突的情況，可以使用閉 包的方式使用$符號(hào)：(f unction ($) nbsp; $. fn . myplugin=f unc

5、tion() nbsp;/doy ourawesomep luginstuffh erenbsp;)(jquery);2、插件中的上下文：jquery接收一個(gè)回調(diào)，該回調(diào)本身就指向了dom,直接 使用this就相當(dāng)于我們平時(shí)的$(this)的情況：(function($) nbsp; $ f n. myplugin=function () nbsp;/th ere' snoneed todo$ (this)becausenb sp;/his/zisalreadyaj queryobjectnbsp;/$ (this)wouldb ethesameas$ ($ (j ttelemen t

6、，);nbsp ; this fadel n c normat , function () nbspjnbsp ;/thethisk eywordisado melement nbs p;);nbsp;；)(jquery);$ (j #elem ent'). myplu gin ();下面是一個(gè)簡(jiǎn)單的jquery插件，實(shí)現(xiàn)獲取所有di v的 最大高度：(fun ction ($) nbsp;$ fn. m axheight=fu notion() nb sp;varmax=0 ;nbsp;thi s. each(func tion() nb sp;nbsp;max =math. max

7、(m ax, $ (this) height (); n bsp;);nbsp ;returnmax; nbsp;) (j query);vartallest=$( 'div，) maxh eight();/returnsthehe ightoftheta llestdiv3、維護(hù)鏈接性：前面的示例返回一個(gè)整數(shù)值最高的div,但是通常的意 圖僅在某種程度上是僅修改插件的元素集合,并將它們傳遞 到下一個(gè)鏈中的方法。這樣的jquery的設(shè)計(jì)優(yōu)雅的地方。 所以保持鏈接性放到一個(gè)插件,您必須確保您的插件返回這 個(gè)關(guān)鍵字。(fun ction ($) nbsp;$ fn. 1 ockdimens

8、io ns=function (type) nbsp ; nbsp;ret urnthis eac h(function() nbspjnb sp; var$this =$ (this);nbsp;nbsp; i f (! type | | ty pe二二'width') nbsp;nb sp; $this wi dth ($this w idth ();nbs p;nbsp;n bsp;nbsp:if (! type| | typ e二heigh) nbspjnb sp; $this he ight ($this height ();n bsp;nbsp;n bsp;);nb

9、sp ;)(jquer y);$ (' div '). lockdime nsions (' wid th') css (' c olor',' red，);因?yàn)椴寮祷豻 his關(guān)鍵字的范圍，它維護(hù)鏈接性， jquer y可以繼續(xù)利用jque ry方法，女口. css。所以，如果 你的插件不返回一個(gè)內(nèi)在價(jià)值，你應(yīng)該總是返回thiso4、參數(shù)的傳遞,def aults 和 0ptio ns：(functio n($) nbsp ; $ fn. toolt ip=function (options) n bsp;nbsp; /creates

10、omedefauits, e xtendingthemwithanyopt ionsthatwer eprovidednbsp;varset tings=$ ext end(nbsp ; nbsp;' loca tion，nbsp; n bsp; :' top',nbsp; nbsp ;' backgroun d-color' :' b lue'nbsp;, options);nbsp;return this each(f unction() n bsp;nbsp;nbsp;nbsp;/tooltipplu gincodeherenbsp

11、;);nbs p;) (jque ry)；$ (' div'). tooltip (nbsp;' loc at ion' :，lef t，);通過(guò)$. extend合并默認(rèn)參數(shù)和調(diào)用者傳入的參數(shù)。5、命名空間：正確的命名空間在插件開(kāi)發(fā)中是一個(gè)非常重要的部 分。正確的命名空間，可以確保你的插件將有一個(gè)很低的 幾率在同一個(gè)頁(yè)面上被他插件或代碼覆蓋。在任何情況下都不應(yīng)該在一個(gè)插件的jqueryfn對(duì)象 中聲稱(chēng)多個(gè)名稱(chēng)空間。(functi on ($) nbs p;$. fn. tool tip=functio n(options) nbsp; nbsp;/this n

12、bsp;nbsp; $ f ri. tooltipsh ow=function () nbsp;/is nbsp;n bsp; $. fn. to oltiphide=f unction () n bsp; nbsp;/bad nbsp;nbsp;$ fn. tooltipupda te=function (content) n bsp; nbsp;/!nbsp;nbs p;) (jque ry);你應(yīng)該收集所有的方法到一個(gè)對(duì)象化字面，并且通過(guò) 方法的字面值進(jìn)行調(diào)用：(fun ction($) nb sp; varmetho ds=nbsp; init :functi on (options)

13、 nbsp;nbs p;nbsp;/th isnbsp;nbsp; s how: functio n () nbspjnb sp;/isnbsp ;,nbsp;h ide: functio n () nbsp;nb sp;nbsp;/g 00dnbsp;,nbspjupdat e: function (content) nb sp;nbsp;nbs p;/! ! !nbsp ;nbsp;nbsp ;nbsp; $ fn. tooltip =function (m ethod) nb sp;/method callinglogi cnbsp;if(methodsmet hod) nbs p;nb

14、sp;retu rnmethodsm ethod. apply (this, arra y. prototype slice. call (arguments, 1); nbsp: elseif(typ eofmethod二二二'object | | !method) nbsp;nbsp;r eturnmethod s. init .appl y(this, argu merits);nbsp ;elsenb sp;nbsp;$ e rror c metho d' +method+， doesnotexis tonjquery. t ooltip');nb sp;nbs

15、p;nb sp;) (jqu ery);/call stheinitmet hod$(' div '). tooltip () ;nbsp;/ca llstheinitm ethod$ (' div '). tooltip (nbsp;foo:' bar');/ca llsthehidem ethod$ (? d iv'). toolti p(' hide') : n bsp;/cal lstheupdate method$ (' div'). tooltip c update,' thisisth

16、enew to oltipc ontent!?;這種類(lèi)型的方法封裝和體系結(jié)構(gòu)在jquery插件社區(qū)中 是一個(gè)標(biāo)準(zhǔn)，它適用于無(wú)數(shù)的插件，包括jqueryui插件和 小部件。6、even ts：bind方法允許通過(guò)命名空間的方式綁定事件，如果你 的插件綁定了事件，可以通過(guò)命名空間的方式，在解除綁 定事件時(shí)，你也可以這樣做，來(lái)防止影響到其他的事件。 可以通過(guò)".it :namespaceg t;”的方式來(lái)設(shè)置綁定事件的 命名空間。(fu nction ($) n bsp; varmeth ods= nbsp ;nbsp; init:function (op tions) nb sp;nbs

17、p;ret urnthis eac h(function() nbspjnb sp;nbsp;$(w indow). bind c resize to oltip' , meth ods reposit ion);nbsp;n bsp;);nbsp ;nbsp;,n bsp; nbsp; de stroy: funct ion () nbs p;nbsp;retu rnthis each (function() nbsp;nbs p;nbsp; $ (wi ndow). unbin d( tooltip '); nbsp;nbs p;) nbspjnb sp;,nbsp ;nb

18、sp;repos ition:funct ion() nbsp;nbsp;nbsp;/ nbsp;nb sp;nbsp;,nbsp;nbsp; show: functi on() nbsp;n bspjnbsp;/ nbsp;nbs p;nbsp;,nbsp;nbsp;h ide:functio n() nbsp;nb sp; / nbs p:nbsp;nbsp ;,nbsp;n bsp;update:fimction(co ntent) nbsp ; nbspjnbsp;/ nbsp; n bsp: nbsp;；nbsp; $ f n. tooltip=f unction (met hod)

19、 nbsp :if (methods method)nbsp;nbsp; returnmetho dsmethod apply(this,array. proto type. slice. call (argume nts, 1);n bsp;elseif(typeofmethod=，object'| |!method ) nbspjnb sp:returnme thods init. apply(this, arguments);nbsp;else nbsp;nbsp ;$error c m ethod? +meth od+? doesnot existonjque ry. tool

20、tip');nbsp;nbs p; nbsp;；)(jquery);$(' #ftm'). too ltip();/so metimelater $ (' #fu n，). tooltip c des troy');7、data：關(guān)于data方法可以參考官方的文檔：http: /docs, jque ry. com/data ,既是在頁(yè)面的元素中綁定存儲(chǔ) 數(shù)據(jù)。這里通過(guò)編寫(xiě)插件，實(shí)現(xiàn)在頁(yè)面中的每個(gè)元素都綁定 一些當(dāng)前的狀態(tài)或者內(nèi)容。(function($) nbsp; varme thods=nb spjnbsp; ini t :f unction (o

21、ptions) nbsp;nbsp;r eturnthis e ach (functio n () nbsp;nbsp;nbsp;v ar$this=$ (t his),nbsp :nbsp:nbsp:nbsp:data=$this data(' tooltip'), nbsp; nbsp; nbsp; nbsp; t ooltip=$ c 1 t; div/gt;? , nbspjnbs p;nbsp;nbsp : text: $this attr (j titl e ) nbsp;n bsp;nbsp;nb sp;);nbsp;nbsp;nbsp;/ifthepluginh

22、asn tbeeninitializ edyetnbsp ;nbsp;nbsp; if (!data) n bsp;nbsp;nb sp;/*nbsp ; domoresetu pstuffheren bsp;*/nbs p;nbsp;nbsp ;$(this)datactooltip ' , nbsp;n bsp;nbsp;nb sp; target: $this,nbsp :nbsp;nbsp;nbsp;toolti p:tooltipnb sp;nbsp;nbs p;); nbsp;n bspjnbsp; n bspjnbsp;);nbsp;nbsp;,nbsp;nb sp: destroy: function() nbsp;nbsp jreturnthis each(funct ion() nbs p;nbsp;nbsp ; var$this=$ (this),nb sp;nbsp;nbs p;nbsp;data =$this .data ('toolti