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;
}

 

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