jquery 插件开发及extend
以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquery6/?ca=drs-tp4608之后,自己的一些想法。
这文章主要是从如何写一个插件上来说,中间主要用到的还是在jQuery.fn上做文章,通过定义一个闭包函数,将jQuery作为参数传递过去,再在这个fn增加自己的函数来实现。中间有几个问题,记录如下:
1,为什么往fn上加函数就可以让jquery对象调用了呢?
看了下代码,注意到这句(jQuery.fn = jQuery.prototype),这句其实很明白了,jQuery.fn实际上就是jQuery.prototype,通过原型来实现一个函数的添加。而在fn上追加的函数上使用this,这个this实际上就是jQuery对象。因为fn就是prototype,调用函数者就是jQuery实现上就是jQuery的一个实例化对象。
看了下文章中关于插件开发的,具体代码倒是其次,主要是其中有几个要点很重要。复制如下:
1,让内部方法私有化,这其实就是说在自己写的插件里面,因为这个函数可能就自己的插件调用,这其实也是为了避免代码污染。在jquery中有很多例子的。
2,让默认值可覆盖,这就是说在程序中可能会有一些默认值。所以需要在传递参数中,传递一些可以覆盖默认参数的东西,比如参数中经常传递options这个参数,其实就是拿来覆盖默认参数的。
还有几个插件开发规则,复制如下:
1,文件命名为 “jquery.<your plug-in name>.js
”,这个没什么说的。
2,所有新方法都附加到 jQuery.fn 对象,所有新功能都附加到 jQuery 对象,这个其实就是往对象上加函数。插件写法就是jQuery.fn.plugin=function(options)的这种样子。
3,“this
” 用于引用 jQuery 对象。这个如果按照第条规则,this肯定引用到jQuery的。
4,插件中定义的所有方法/函数的末尾都必须带有一个 “;”(分号),否则将不利于代码的最小化。这个不清楚了。
5,除有特别注明外,所有方法都必须返回 jQuery 对象,其实就是返回this。这个主要是为了链式编程吧,jQuery中到处都是这种。
6,总是在插件代码中使用 “jQuery” 而不是 “$”。这个不是强制的,比如中我写的闭包就可以这样写:(function($))(jQuery)的这种格式,然后在里面使用$,这里的$其实就是jQuery,这个是参数传递上的东西。
最后就是里面经常用到的extend函数了。简单看了下,整个函数很简单,就是一个复制过程,但在jQuery中经常用到,比如ajax就是通过extend带到jquery中的。
这里面有个问题,我们使用ajax都是通过$.ajax这种形式访问的,这就表明ajax其实不算是jquery对象的一个方法,最多算一个静态方法。这就实际上说明,extend是往一个对象上追加信息,而$.ajax是往$这个类对象上加,而不是jqury实例对象站加,所以就不能用类似$().ajax的形式来进行ajax访问了,后者返回的是一个undefined信息。在方法内部,实际上就是一个this引用的问题了。
还是将jquery自己的代码贴出来,在上面加注释信息。
- jQuery.extend = jQuery.fn.extend = function() {
- //target就是复制目的是哪个对象,这里首先就是第一个参数。
- //i表示source的起始坐标。0被target占用,所以源是目的的下一个
- //length,当前参数长度了;deep,是否深度copy,深度copy就是将里面的对象再次序列化,进行迭代调用
- var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
- //处理第一个函数是boolean的情况,就是说第一个函数可以控制是否深度copy,那这样的话接下来的参数就是往后移位了.
- //jquery中很多地方都是这种处理情况,往往参数列表中有个参数缺失,那么不需要用null来占位,而是直接将后面的参数移到前面来,这样就有一个处理参数移位的问题.
- //在这个里面,第一个参数被占位,那么target就为1位了,源再+1往后走了.
- if ( typeof target === "boolean" ) {
- deep = target;
- target = arguments[1] || {};
- // skip the boolean and the target
- i = 2;
- }
- //处理这个目的不是object对象,且又不是函数的,这样的话,实际target可能就是其他东西,比如字符串或者基本类型等,这时就将target进行改变.实际上就是忽略target的原来信息.可以理解成一个用source来代替target.
- if ( typeof target !== "object" && !jQuery.isFunction(target) )
- target = {};
- //如果length==i,其实就是没有source的情况,那么将将target变成source,原先的target就直接用调用者this代替了.这样的话,其实就是直接往调用者上加东西.
- //这个用$.ajax来理解,最适合了.源代码中jQuery.extend({ajax:function()});的形式,其实就是直接往$上加函数,因为调用者就是jQuery
- if ( length == i ) {
- target = this;
- --i;
- }
- //进行循环,将source(可能有很多个source,按顺序进行copy),也就是说可以这样写$.extend(target,source1,source2);
- //这样后面的信息可以覆盖前面的信息,而source1可以是函数内置的一个默认信息,source2可以对信息进行更改.
- for ( ; i < length; i++ )
- // Only deal with non-null/undefined values
- if ( (options = arguments[ i ]) != null )
- // Extend the base object
- for ( var name in options ) {
- //这里就对两边进行取信息了,src表示从target中取的信息(这个可能是null,当然也可能不是,不是的话,那么后面的copy就可能要覆盖这个值了)
- //copy就是从source中取的信息了.
- var src = target[ name ], copy = options[ name ];
- // Prevent never-ending loop
- //这里主要是为了防止在深度copy的情况下,出现无限迭代的情况.比如这种情况:extend(true,target,{"a":target}),这样的话,就会出现无限copy了
- if ( target === copy )
- continue;
- // //这里就是处理深度copy了,如果需要,就进行深度copy,将copy后的值加到target中
- if ( deep && copy && typeof copy === "object" && !copy.nodeType )
- target[ name ] = jQuery.extend( deep,
- // Never move original objects, clone them
- src || ( copy.length != null ? [ ] : { } )
- , copy );
- // 不加undefined值
- else if ( copy !== undefined )
- target[ name ] = copy;
- }
- // 返回target
- return target;
- };
翻译都是按照自己的理解来翻译的,可能不对。
在看了这个东西,感觉在其他程序中(我做java,java中很多这种)也有很多类似的设定,需要进行类似迭代处理,比较直观的就是java中java对象转json的处理了,都一样要对一个对象json化成一个string,中间仍要处理各种类型的信息,还要避免无限迭代等。
以上都是整个jquery中大信息中的小小的一部分。了解一些,总比过后忘了好。
jquery 插件开发及extend的更多相关文章
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()
jQuery插件开发 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可 ...
- jQuery插件开发的两种方法及$.fn.extend的详解(转)
jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下 jQuery插件开发分为两种: 1 类级别 类级别你可以 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发
jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...
- jQuery插件开发(溢出滚动)
声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...
随机推荐
- Python学习教程(learning Python)--3.2 if-else分支语句
if-else分支语句结构的特点是当conditon条件满足时,执行if下的语句块,当condition条件不满足时执行else下的语句块,也就是说根据条件来控制让某些语句执行,某些语句不被执行. i ...
- Windows上搭建android开发环境
在搭建android开发环境时需要四部分内容,框架如下 其中Java SDK和Eclipse在java4android中有过介绍,重点介绍ADT和Android SDK的安装. 安装Android S ...
- Excle快速输入√与×
如何在EXCLE中快速输入√与×呢 很简单的一个小技巧,只需要在EXCLE单元格中输入P(O) 然后将其字体设置为Wingdings 2,接着就出现符号了 不信你可以试试的哦.
- AppCan移动平台,开发者是这样用的……
随着生活节奏的加快,每天各种压力山大,难免产生心理问题.然而穷的都要吃土了,又不想面对陌生人,怎么办? 近日,AppCan开发者樊星阳“一夜爆红”,引起猎云网的持续关注.起因是这样的,樊星阳利用App ...
- 【Javascript】: for循环中定义的变量在for循环体外也有效
for循环中定义的变量在for循环体外也有效 <script> (function(){ var a = 111; for(var i=0;i<5;i++){ var carl = ...
- Hadoop之Hive自定义函数的陷阱
A left join B, 这个B会连到A. 如<A1,B>, <A2,B>,在处理第一条记录的时候将B.clear(),则第二条记录的B是[]空的这是自定义UDF函数必须注 ...
- libmemcached upcoming ISO C++ standard, C++0x
在编译我的小程序的时候,触发了一个编译错误,程序中使用了libmemcached,错误如下: 1 2 3 4 5 6 7 8 9 In file included from /usr/lib/gcc/ ...
- C#泛型集合之Dictionary<k, v>使用技巧
1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib) 2.描述 1).从一组键(Key)到一组值(Value) ...
- 35.在PCB中删除元件
在PCB Editor里面,如果想进行什么操作,首先得点击这个命令,再点击你要操作的区域/元件,最后右键选择"Done",这样你才能完成一个操作.
- C++中数组求偏移量计算公式
已知数组:type A[10][5]A[0][0] --A[8][4]面试常考:数组定义A[0....x][0...y]已知A[m][n] --求A[k][l]的地址: &A[m][n] ...