总结jQuery插件开发中的一些要点

1、总结jquery插件开发中的一些要点这篇文章主要介绍了总结jquery插件开发中的一些要 点,包括命名空间与事件events等重点和难点部分的讲解, 要的朋友可以参考下基础1、jquery插件开发主要使用如下两个方法：1. 1、添加静态方法jquery. extend (object);为扩展jquery本身，为类添加新的方法，可以理解文 添加静态方法。$ 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对象添加方法，对jquery. pro totype进行 扩展，为jquery类添加成员方法：$ 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、一个通用的框架： 以下是一个通用的框架： (fu notion($) n bsp;nbsp;$. fn. yourpl uginname=fu nction(options) nbsp;nbsp;nbsp;/各种属性和参数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;/插件的实现代码 nbsp;nbsp;);nbsp;nbs p; ;nbsp;) (jquery);关于

4、$ extend (defaults, op tions);就是通过合并default s和options来扩展defaults,实现插件默认参数的功能。实践1、声明插件名称：添加一个函数到 jq uery. fn (jqu ery. prototy pe)对 象，该函数的名称就是你的插件名称：jquery. fn. myplugin=fu notion() nbsp: /doyo urawesomepl uginstuffhe re;在命名不与jquery其他函数冲突的情况，可以使用闭 包的方式使用$符号：(f unction ($) nbsp; $. fn . myplugin=f unc

5、tion() nbsp;/doy ourawesomep luginstuffh erenbsp;)(jquery);2、插件中的上下文：jquery接收一个回调，该回调本身就指向了dom,直接 使用this就相当于我们平时的$(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 ();下面是一个简单的jquery插件，实现获取所有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、维护链接性：前面的示例返回一个整数值最高的div,但是通常的意 图仅在某种程度上是仅修改插件的元素集合,并将它们传递 到下一个链中的方法。这样的jquery的设计优雅的地方。 所以保持链接性放到一个插件,您必须确保您的插件返回这 个关键字。(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，);因为插件返回t his关键字的范围，它维护链接性， jquer y可以继续利用jque ry方法，女口. css。所以，如果 你的插件不返回一个内在价值，你应该总是返回thiso4、参数的传递,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，);通过$. extend合并默认参数和调用者传入的参数。5、命名空间：正确的命名空间在插件开发中是一个非常重要的部 分。正确的命名空间，可以确保你的插件将有一个很低的 几率在同一个页面上被他插件或代码覆盖。在任何情况下都不应该在一个插件的jqueryfn对象 中声称多个名称空间。(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);你应该收集所有的方法到一个对象化字面，并且通过 方法的字面值进行调用：(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!?;这种类型的方法封装和体系结构在jquery插件社区中 是一个标准，它适用于无数的插件，包括jqueryui插件和 小部件。6、even ts：bind方法允许通过命名空间的方式绑定事件，如果你 的插件绑定了事件，可以通过命名空间的方式，在解除绑 定事件时，你也可以这样做，来防止影响到其他的事件。 可以通过".it :namespaceg t;”的方式来设置绑定事件的 命名空间。(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：关于data方法可以参考官方的文档：http: /docs, jque ry. com/data ,既是在页面的元素中绑定存储 数据。这里通过编写插件，实现在页面中的每个元素都绑定 一些当前的状态或者内容。(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