jQuery-1.9.1源码分析系列(一)整体架构续

这一节主要是jQuery中最基础的几个东东

 

2.    jQuery的几个基础属性和函数

a. jQuery.noConflict函数详解

 

在jQuery初始化的时候保存了外部的$和jQuery

  

_jQuery = window.jQuery,

_$ = window.$,

noConflict函数

  noConflict: function( deep ) {
    if ( window.$ === jQuery ) {
         window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
      window.jQuery = _jQuery;
    }
    return jQuery;
  }

调用noConflict将$甚至jQuery的使用权让渡出去。返回的jQuery保存为自定义的变量。如

  var myJq = $.noConflict();

然后就可以将myJq当成jQuery来使用。

  var ps = myJq("p");//得到所有p标签的元素集合。

  

b. jQuery.extend = jQuery.fn.extend函数详解

 

用户再使用jQuery的时候可能需要对jQuery和jQuery.prototype(jQuery.fn/jQuery(...))进行拓展(添加属性或方法),这个时候使用到extend。

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

jQuery.extend是对jQuery本身的拓展;jQuery.fn.extend是对jQuery.fn的拓展,也就是对jQuery.prototype的拓展,最终表现为对jQuery实例$(...)的拓展。

源码分析:源码比较简单,这里不做分析,不过在其中有一个技术点

在使用extend的时候要注意,根据js规则对象变量只有一份的原则,如果浅拷贝中某个属性是通过对象变量获取的值,如果在外部改变了该对象变量,那么拷贝结果也会随着改变。

eg:

  var hd = {name: ‘hard’};
  var pc = {soft: ‘soft’,hdwe:hd};
  var tt = {td: ‘test’};
  var val = $.extend(tt,pc);// {td: "test", soft: "soft", hdwe: { name: ‘hard’}}
  hd.name = 'chenhua';
  //此时val的值为{td: "test", soft: "soft", hdwe: { name: ‘chenhua’ }}

 

c. jQuery.type函数用来识别对象类型

 

JavaScript也自带有一个typeof运算符,可以确定数据的类型。不过,对于绝大多数对象而言,typeof运算符都返回"object",无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。 

  class2type = {} ,
  core_toString = class2type.toString, 
  type: function( obj ) {
               if ( obj == null ) {
                      return String( obj );
               }
               return typeof obj === "object" || typeof obj === "function" ?
               class2type[ core_toString.call(obj) ] || "object" :
               typeof obj;
        }

  
  jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type[ "[object " + name + "]" ] = name.toLowerCase();
  });

代码core_toString.call(obj)使用对象的toString来处理obj得到JS内置对象的类型,得到的结果都是类似"[object Object]"、"[object Function]"、"[object Array]"等样式,最终得到JS内置对象的类型的完全小写形式。

jQuery.type( undefined ); // "undefined"
jQuery.type( null ); // "null"

jQuery.type( true ); // "boolean"
jQuery.type( new Boolean(true) ); // "boolean"

jQuery.type( 3 ); // "number"
jQuery.type( new Number(3) ); // "number"

jQuery.type( "test" ); // "string"
jQuery.type( new String("test") ); // "string"

jQuery.type( function(){} ); // "function"
jQuery.type( new Function() ); // "function"

jQuery.type( [] ); // "array"
jQuery.type( new Array() ); // "array"

jQuery.type( new Date() ); // "date"

jQuery.type( new Error() ); // "error" // jQuery 1.9 新增支持

jQuery.type( /test/ ); // "regexp"
jQuery.type( new RegExp("\\d+") ); // "regexp"

/* 除上述类型的对象外,其他对象一律返回"object" */

jQuery.type( {} ); // "object"
function User() { }
jQuery.type( new User() ); // "object"

 

d. jQuery.function和jQuery.fn.function

 

有的函数是直接绑定到jQuery上的,这种方法只能使用jQuery.function()来调用。而又的方法是绑定到jQuery.fn上的,这种方法一般有两种调用方式jQuery.fn.function()或是jQuery(...).function。

根据jQuery初始化函数jQuery = function(selector,context){

  return new jQuery.fn.init(selector,context,rootjQuery);

}应该是易于理解的。jQuery(...)最终返回的上下文环境是jQuery.fn,所以绑定在jQuery.fn的函数最终都是可以通过jQuery(selector,context).function()来调用

e. jQuery.fn.get

 

//获取当前集合中某一个或是全部的元素
get: function( num ) {
       return num == null ?
       // Return a 'clean' array
       this.toArray() :
  // Return just the object
        ( num < 0 ? this[ this.length + num ] : this[ num ] );
},

需要注意的是,这里返回的是DOM节点对象,非jQuery对象,可不能再链式调用了。

 

f. jQuery.fn.each和jQuery.each

 

jQuery.fn.each(callback,args)是对jQuery集合挨个处理,最终调用的还是$.each(obj,callback,args),只不过obj被换成了jQuery匹配的集合。

$.each的obj可以是数组,也可以是对象。如果是数组则遍历数组,如果是对象则遍历对象自身的所有属性(包括函数)。如果$.each没有设置args参数,则遍历过程中调用callBack会将每一个元素的下标(数组是下标,对象是属性名)和(数组是数组元素,对象是属性对应的值)传递给callBack;否则args会传递给callback(不过这个用的比较少)。

该函数规定为每个匹配元素执行的函数。源码如下

jquery.fn. each: function( callback, args ) {
       return jQuery.each( this, callback, args );
}

 

使用到了jQuery.each方法,源码如下

jQuery.each: function( obj, callback, args ) {
       var value,
              i = 0,
              length = obj.length,
              isArray = isArraylike( obj );
       if ( args ) {//如果有参数args,代入callback中
              if ( isArray ) {
                     for ( ; i < length; i++ ) {
                            value = callback.apply( obj[ i ], args );
                            if ( value === false ) {
                                   break;
                            }
                     }
              } else {
                     for ( i in obj ) {
                            value = callback.apply( obj[ i ], args );
                            if ( value === false ) {
                                   break;
                            }
                     }
              }
       } else {// 比较通用的是该分支
              if ( isArray ) {//遍历数组
                     for ( ; i < length; i++ ) {
                            value = callback.call( obj[ i ], i, obj[ i ] );
          if ( value === false ) {
                                   break;
                            }
                     }
              } else {
                     for ( i in obj ) {//遍历对象
                            value = callback.call( obj[ i ], i, obj[ i ] );
                if ( value === false ) {
                                   break;
                            }
                     }
              }
       }
  return obj;
}

 

  如果觉得本文不错,请点击右下方【推荐】!

你可能感兴趣的:(jQuery-1.9.1源码分析系列(一)整体架构续)