JQuery源码解读__2__一些工具方法

196 阅读1分钟

JQ的继承方法 (妙味讲堂 - 视频笔记 - 第二部分)

初始化jQuery对象

jQury().fn = $().fn = function() {  
  return jQuery.fn.init()
}
get()方法使用

$("div").get() //返回集合
$("div").get(index) // 返回下标项,原生对象

get()方法源码实现

get: function(num) { 
   return num == null ?   
     this.toArray() :   
     (num < 0 ? this[this.length + num] : this[num])
}
pushStack()方法使用

$("div").pushStack($("span")) // div,span对象都在栈内   返回的是 span对象
pushStack()函数源码实现


pushStack:function(elems){
var ret = jQuery.merge(this.constructor(),elems);  //合并元素 
    ret.prevObject = this;  
    ret.context = this.context  //合并之后执行上下文是后者 
   return ret;
}

end()方法源码实现

end:function(){  
return this.prevObject||this.constructor(null)
}

slice()函数源码实现

slice:functon(){ 
 return this.pushStack(core_slice.apply(this,arguments))
}

eq()方法源码实现

eq:function(i){ 
 var len = this.length,  j = +i+(i<0?len:0); 
 return this.pushStack(j>=0&&j<len?[this[j]]:[])
}

extend()方法源码实现

jQuery.extend = jQuery.fn.extend = function() { 
   var src, copyIsArray, copy, name, options, clone,  
      target = arguments[0] || {},  
      i = 1,     
      length = arguments.length,  
      deep = false; 
     // 处理深度克隆情况
   if ( typeof target === "boolean" ) {  
       deep = target;    
       target = arguments[1] || {};     
      // skip the boolean and the target      
       i = 2;  
    }  
   // 处理当目标是字符串或者其他一些情况
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {      
       target = {};
    }   
  // 当只有一个参数的时候为扩展jQuery自身函数
   if ( length === i ) {  
       target = this; 
       --i;  
    }  
  for ( ; i < length; i++ ) {  
      //仅处理 null/undefined值的   
    if ( (options = arguments[ i ]) != null ) {    
        // 扩展基本对象 
      for ( name in options ) {      
          src = target[ name ];     
           copy = options[ name ];                // Prevent never-ending loop     
           if ( target === copy ) {   
                 continue;        
        }    
      //  使用递归处理对象或者数组合并       
         if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {   
               if ( copyIsArray ) { 
                       copyIsArray = false;     
                   clone = src && jQuery.isArray(src) ? src : [];  
                  }
               else {     
                   clone = src && jQuery.isPlainObject(src) ? src : {};    
                }                
            // 递归到不是原始类型数据后开始复制     
             target[ name ] = jQuery.extend( deep, clone, copy );     
           // Don't bring in undefined values       
         } 
        else if ( copy !== undefined ) {      
              target[ name ] = copy;      
          }      
       }   
     }  
  }  
  // 返回修改的对象
 return target;
};

extend()方法使用

// 当只写一个对象自变量的时候,jQ中扩展对象插件的形式
$.extend({  //扩展工具方法 
 aaa:function(){   
  alert(1) 
 }, 
 bbb: function(){  
  alert(2) 
 }
})

$.fn.extend({ 
 //扩展jQ实例方法  
aaa:function(){ 
    alert(3) 
 },
  bbb: function(){ 
   alert(3)
  }
})
$.aaa();
$.bbb();
$().aaa();
$().bbb();

// 当写多个对象的时候,后面的对象都是扩展到第一个对象身上
var a = {};
$.extend(a,{name:"hello"},{age: 30});
a= {name:"hello",age: 30};// 还可以深拷贝,浅拷贝//
 var a =  {};
var b = {name:"hello"} ;
$.extend(a,b) ; //浅拷贝,对象引用
a.name.age = 20;
$.extend(true,a,b) ; //深拷贝,对象复制,独立的两个对象