jquery 插件开发及extend

标签：class   code   http   java   tar   ext   

  以下信息是在看了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自己的代码贴出来，在上面加注释信息。

Js代码  

1. jQuery.extend = jQuery.fn.extend = function() {  
2.     //target就是复制目的是哪个对象，这里首先就是第一个参数。  
3.     //i表示source的起始坐标。0被target占用，所以源是目的的下一个  
4.     //length,当前参数长度了;deep,是否深度copy,深度copy就是将里面的对象再次序列化,进行迭代调用  
5.     var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;  
6.   
7.     //处理第一个函数是boolean的情况,就是说第一个函数可以控制是否深度copy,那这样的话接下来的参数就是往后移位了.  
8.     //jquery中很多地方都是这种处理情况,往往参数列表中有个参数缺失,那么不需要用null来占位,而是直接将后面的参数移到前面来,这样就有一个处理参数移位的问题.  
9.     //在这个里面,第一个参数被占位,那么target就为1位了,源再+1往后走了.  
10.     if ( typeof target === "boolean" ) {  
11.         deep = target;  
12.         target = arguments[1] || {};  
13.         // skip the boolean and the target  
14.         i = 2;  
15.     }  
16.   
17.     //处理这个目的不是object对象,且又不是函数的,这样的话,实际target可能就是其他东西,比如字符串或者基本类型等,这时就将target进行改变.实际上就是忽略target的原来信息.可以理解成一个用source来代替target.  
18.     if ( typeof target !== "object" && !jQuery.isFunction(target) )  
19.         target = {};  
20.   
21.     //如果length==i,其实就是没有source的情况,那么将将target变成source,原先的target就直接用调用者this代替了.这样的话,其实就是直接往调用者上加东西.  
22.     //这个用$.ajax来理解,最适合了.源代码中jQuery.extend({ajax:function()});的形式,其实就是直接往$上加函数,因为调用者就是jQuery  
23.     if ( length == i ) {  
24.         target = this;  
25.         --i;  
26.     }  
27.     //进行循环,将source(可能有很多个source,按顺序进行copy),也就是说可以这样写$.extend(target,source1,source2);  
28.     //这样后面的信息可以覆盖前面的信息,而source1可以是函数内置的一个默认信息,source2可以对信息进行更改.  
29.     for ( ; i < length; i++ )  
30.         // Only deal with non-null/undefined values  
31.         if ( (options = arguments[ i ]) != null )  
32.             // Extend the base object  
33.             for ( var name in options ) {  
34.                 //这里就对两边进行取信息了,src表示从target中取的信息(这个可能是null,当然也可能不是,不是的话,那么后面的copy就可能要覆盖这个值了)  
35.                 //copy就是从source中取的信息了.  
36.                 var src = target[ name ], copy = options[ name ];  
37.   
38.                 // Prevent never-ending loop  
39.                 //这里主要是为了防止在深度copy的情况下,出现无限迭代的情况.比如这种情况:extend(true,target,{"a":target}),这样的话,就会出现无限copy了  
40.                 if ( target === copy )  
41.                     continue;  
42.   
43.                 // //这里就是处理深度copy了,如果需要,就进行深度copy,将copy后的值加到target中  
44.                 if ( deep && copy && typeof copy === "object" && !copy.nodeType )  
45.                     target[ name ] = jQuery.extend( deep,   
46.                         // Never move original objects, clone them  
47.                         src || ( copy.length != null ? [ ] : { } )  
48.                     , copy );  
49.   
50.                 // 不加undefined值  
51.                 else if ( copy !== undefined )  
52.                     target[ name ] = copy;  
53.   
54.             }  
55.   
56.     // 返回target  
57.     return target;  
58. };  

     翻译都是按照自己的理解来翻译的，可能不对。

     在看了这个东西，感觉在其他程序中（我做java,java中很多这种）也有很多类似的设定，需要进行类似迭代处理，比较直观的就是java中java对象转json的处理了，都一样要对一个对象json化成一个string，中间仍要处理各种类型的信息，还要避免无限迭代等。

     以上都是整个jquery中大信息中的小小的一部分。了解一些，总比过后忘了好。

jquery 插件开发及extend,布布扣,bubuko.com

jquery 插件开发及extend

标签：class   code   http   java   tar   ext   

原文地址：http://www.cnblogs.com/ranran/p/3809957.html