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()来调用

jQuery-1.9.1源码分析系列（一）整体架构续

标签：

原文地址：http://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-frame2.html