jQuery定义类及扩展
这个自定义类还是有点困惑滴。先看网上有个人做滴,模仿jQuery定义一个jQuery对象。
<script type= "text/javascript" > // zchain-0.1.js function $(selector){ //定义了名为jQuery的对象 用滴是构造法 return new $.prototype.init(selector); //有点怪 为什么会有return呢? } $.prototype={ init: function (selector){ if (selector === undefined){ this .length = 0; return this ; } if (selector.nodeType==1){ //怀疑这句有问题 alert( "div" ); this [0] = selector; } else { alert( "test" ); this [0]=document.getElementById(selector); } this .length=1; }, css: function (name,value){ this [0].style[name] = value; return this ; //链式调用 }, hide: function (){ var self= this ; setTimeout( function (){ self[0].style.display= "none" ; },3000); return this ; //链式调用 } } $.prototype.init.prototype=$.prototype; //var obj = $(); //console.dir(obj); </script> <div id= 'content' >3 seconds later I will hide.</div> </body> </html> <script type= "text/javascript" > //alert(document.getElementsByTagName('div')); $( 'content' ).css( "color" , "red" ).hide(); </script> |
刚开始看这段代码时晕晕滴,先定义一个类吧:function $(..)名字为$,让我看得很疑惑,原来它是定义一个jQuery的类呀。然后在后面调用的时候又发现一个问题:$('content'),这个content命名是一个#id类型嘛,然后他在构造函数中既然有:selector.nodeType==1。(感觉那个网友有错)。
接下来总结下类滴扩展吧:方法一、通过jQuery.extend扩展
还是先看下个例子(摘录别人滴,但自己有测试了下):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type= "text/javascript" > function fun(){} //定义一个类(函数) //为该类(函数)添加一个静态方法extend fun.extend= function (obj){ for ( var a in obj) this [a] = obj[a]; //注意:这里的tihs即fun } //调用extend为该类添加了静态属性name,静态方法method1 fun.extend({name: "fun" ,method1: function (){}}); //输出name,prototype,extend,method1 console.dir(fun); //输出fun的方法(为什么没有包括属性) console.log( "%o" ,fun); </script> |
上面有注释,entend也是fun的一个静态方法,这不是扩展吗?怎么会是一个方法呢?于是我把entend方法注释掉。运行在firebug就出错,提示:fun.extend is not a function。哦,再看看extend做了什么吧。
传了一个参数,然后吧这些参数赋值给fun类。原来是这样,如果没有先定义extend的话,那接下去就无法对其进行扩展了。至少我现在还没有发现其他方法。
扩展方法2:通过jQuery.fn.extend扩展
这个方法跟通过jQuery.extend扩展方法基本一样,感觉没差别。只要吧通过jQuery.fn.extend 替换下通过jQuery.extend就行啦。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性