jQuery学习笔记

jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法，分别是：

JavaScript代码

  • jQuery.fn.extend(object);   
  • jQuery.extend(object);   

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码，就不难发现。

 JavaScript代码

  • jQuery.fn = jQuery.prototype = {      
  • 　　　init: function( selector, context ) {//….　   
  •   
  • 　　　//……   
  •   
  • };   

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句　$(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如：

 XML/HTML代码

  • $.extend({   
  •   
  • 　　add:function(a,b){return a+b;}   
  •   
  • });   

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，

JavaScript代码
  • $.add(3,4); //return 7  

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

JavaScript代码
  • $.fn.extend({        
  •         
  •      alertWhileClick:function(){        
  •        
  •          $(this).click(function(){        
  •        
  •               alert($(this).val());        
  •           });        
  •         
  •       }        
  •         
  • });        
  •         
  • $(“#input1″).alertWhileClick(); //页面上为：<input id=”input1″ type=”text”/>    

$(“#input1″)　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中，当然不会做这么小白的插件，事实上jQuery提拱了丰富的操作文档，事件，CSS ,Ajax、效果的方法，结合这些方法，便可以开发出更加 Niubility 的插件。

注意：

在这里还有一个特殊的地方，就是在函数开头的地方有jQuery.extend =  jQuery.fn.extend，而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了，所以在后面的调用中会出现  jQuery.extend()和jQuery.fn.extend()的不同调用，这两个方法调用产生的结果也不一样，jQuery.extend()  的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而  jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.js中到处体现这一点

 

jQuery.extend函数详细用法

jQuery中的extend方法通过不同的参数实现了几种不同的继承方法：

1. extend(src), 扩展jQuery静态方法.

也就是说，将src对象的属性和方法逐一复制给jQuery

Java代码 复制代码 收藏代码
  1. $.extend({  
  2.   test:function(){alert('test函数')}  
  3.  })   

2. extend(dest,src1,src2,src3...srcN) ,合并多个对象.

为jQuery.extend(css1,css2)为例，css1,css2各有一些属性(方法照样会如此处理,这里只讲属性). extend函数会把css2有而css1没有的属性加到css1中,如果css2的某个属性与css1的某个属性名称享用，就会用css2的属性去覆盖css1的同名属性。css1就是最后的整和对象。或者也可以用 ：

var newcss = jquery.extend(css1,css2)  newcss就是合并的新对象。

var newcss = jquery.extend({},css1,css2) newcss就是合并的新对象.而且没有破坏css1的结构。

Java代码 复制代码 收藏代码
  1. //用法: jQuery.extend(obj1,obj2,obj3,..)  
  2. ar Css1={size: "10px",style: "oblique"}  
  3. var Css2={size: "12px",style: "oblique",weight: "bolder"}  
  4. $.jQuery.extend(Css1,Css2)  
  5. //结果:Css1的size属性被覆盖,而且继承了Css2的weight属性  
  6. // Css1 = {size: "12px",style: "oblique",weight: "bolder"}7  

3.extend(boolean,dest,src1,src2...),深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

Java代码 复制代码 收藏代码
  1. // 以前的 .extend()     
  2.    jQuery.extend(     
  3.     { name: “John”, location: { city: “Boston” } },    
  4.     { last: “Resig”, location: { state: “MA” } }     
  5.    );     
  6.   // 结果:    
  7.   // => { name: “John”, last: “Resig”, location: { state: “MA” } }  
  8.   // 新的更深入的 .extend()     
  9.   jQuery.extend( true,     
  10.      { name: “John”, location: { city: “Boston” } },    
  11.      { last: “Resig”, location: { state: “MA” } }    
  12.  );     
  13.   // 结果     
  14.   // => { name: “John”, last: “Resig”,     
  15.   //      location: { city: “Boston”, state: “MA” } }  1617  

 

与其他的类库不同的是，jQuery的extend方法提供了“深层拷贝”的功能，如果你传入的第一个参数为boolean型变量，则该变量为深层拷贝的标志，第二个参数为extend方法的目标对象，其余参数为需要进行继承的“父类”。如果第一个参数的值为true（深层拷贝），并且dest和src元素都包括相同名称的对象属性，则对该对象属性的方法和属性再进行一次复制。

    * 最后我们来通过分析源代码，来加深对该继承机制的理解：

jQuery.extend = jQuery.fn.extend = function() { 

// copy reference to target object    

var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

// Handle a deep copy situation  /*如果第一个参数为boolean值，则取第二个参数为目标对象*/    

if ( target.constructor == Boolean ) {        

  deep = target;        

  target = arguments[1] || {};        

  // skip the boolean and the target        

  i = 2;  }

// Handle case when target is a string or something (possible in deep copy)     
/*如果目标参数不是object或者function，那么就有可能是深度copy,*/     
if ( typeof target != "object" && typeof target != "function" )        

  target = {};

// extend jQuery itself if only one argument is passed /*如果参数长度为1，则将参数表示的对象的属性和方法复制给jQuery本身*/    

if ( length == i ) {        

  target = this;        

  --i;     }

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 ) {                

      var src = target[ name ], copy = options[ name ];

      // Prevent never-ending loop /*防止死循环*/                

      if ( target === copy )                    

        continue;

     // Recurse if we're merging object values/*深度继承的实现*/                

    if ( deep && copy && typeof copy == "object" && !copy.nodeType )    

      target[ name ] = jQuery.extend( deep,                        

        // Never move original objects, clone them                        

        src || ( copy.length != null ? [ ] : { } )                    

        , copy );

    // Don't bring in undefined values  /*正常情况下的继承实现*/                

    else if ( copy !== undefined )                    

      target[ name ] = copy; }

      // Return the modified object    

      return target; };

 

 

posted on 2013-09-01 10:50  一笑之奈何  阅读(196)  评论(0)  编辑  收藏  举报