第五节：JQuery框架源码简析（1） / 憋错料

（转自老惠的博客）

JQuery是一个应用广泛、非常优秀的JavaScript框架，其代码简洁而优雅，有很多值得我们学习的地方。这里仅仅对其代码结构做一个简单的分析，方便大家的理解和学习。

我们进行分析、分解的基准版本是jQuery1.7.1。

开始之前，请准备好以下素材和工具：

jQuery源代码：jquery-1.7.1.js
文本编辑器：EditPlus，或者你喜欢的
参考书：《jQuery高级编程》、《jQuery技术内幕：深入解析jQuery架构设计与实现原理》、《JavaScript框架设计》

1、主体结构

jQuery的所有代码都在一个自调用匿名函数中，该函数构造一个jQuery对象，并初始化jQuery的各个模块，最后创建了$和jQuery命名空间，实现了框架代码和其他代码的隔离。

创建文件jquery.main.js，代码含义请看注释。

// 整体结构

(function(window,undefined){

var jQuery = (function(){

var jQuery = function(selector, context){

// 调用init方法创建jQuery对象

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

};

// 临时变量

var _$ = window.$;

var _jQuery = window.jQuery;

var rootjQuery;

var toString = Object.prototype.toString;

// 初始化jQuery对象

// 。。。

return jQuery;

})();

// 初始化jQuery各个模块

// 。。。

window.$ = window.jQuery = jQuery;

})(window);

创建测试文件jquery.test.html。

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

alert($);

</script>

</body>

</html>

执行结果：

说明jQuery的命名空间$，或者jQuery（alert(jQuery)）是个函数，该函数执行后，返回一个jQuery对象。现在我们执行测试代码$()：

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

$();

</script>

</body>

</html>

产生错误的原因是jQuery.prototype.init(selector, context,rootjQuery)方法不存在。

2、jQuery对象初始化

初始化代码定义了一些jQuery对象的原型属性和方法。我们创建文件jquery.init.js，将jQuery初始化的代码放在这个文件中。

// 初始化

// 定义了一些jQuery对象的原型属性和方法

function jQuery_init(jQuery){

jQuery.fn = jQuery.prototype;

jQuery.fn.constructor = jQuery;

// Start with an empty selector

jQuery.fn.selector = "";

// The current version of jQuery being used

jQuery.fn.jquery = "1.7.1";

// The default length of a jQuery object is 0

jQuery.fn.length = 0;

jQuery.fn.init = init;

jQuery.fn.size = size;

jQuery.fn.toArray = toArray;

jQuery.fn.get = get;

jQuery.fn.pushStack = pushStack;

jQuery.fn.each = each;

jQuery.fn.ready = ready;

jQuery.fn.eq = eq;

jQuery.fn.first = first;

jQuery.fn.last = last;

jQuery.fn.slice = slice;

jQuery.fn.map = map;

jQuery.fn.end = end;

// For internal use only.

// Behaves like an Array‘s method, not like a jQuery method.

jQuery.fn.push = Array.prototype.push;

jQuery.fn.sort = [].sort;

jQuery.fn.splice = [].splice;

// jQuery对象初始化，并返回init子对象

function init( selector, context, rootjQuery ) {

// 检查selector是HTML字符串，还是#id的正则表达式

var quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;

// 检测 HTML 代码是否是单独标签

// 包含一个分组“ (\w+) ”，该分组中不包含左右尖括号、不能包含属性、

// 可以自关闭或不关闭；

// “ \1 ”指向匹配的第一个分组“ (\w+) ”

var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;

var match, elem, ret, doc;

// selector为空，比如$()

// 0、""、null、false、undefined、NaN 都会判定为 false ，而其他都为 true

if ( !selector ) {

return this;

}

//selector是 DOM 元素，比如$(document.body)

//selector如果是DOM元素，则包含属性nodeType

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

// 文档树中只有一个body元素，所以要对body字符串查找优化

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

// selector是字符串

if ( typeof selector === "string" ) {

// selector是一个HTML字符串，还是#id

if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {

match = [null, selector, null];

}

else {

match = quickExpr.exec(selector);

// 正则 quickExpr 包含两个分组，依次匹配HTML代码和 id。

// 如果匹配成功，则数组match的第一个元素为参数selector，

// 第二个元素为匹配的 HTML代码或undefined，

// 第三个元素为匹配的id或undefined

}

// 这里面包含了对match[2]的判断，完整的表达式应该是

// if ( match && (match[1] || match[2] && !context) )

// 但是，如果match[1]不成立，那么match[2]必然成立，所以省略

if ( match && (match[1] || !context) ) {

// 处理参数 selector 是 HTML 代码的情况，先修正 context、 doc，

// 然后用正则 rsingleTag 检测 HTML 代码是否是单独标签，

// 匹配结果存放在数组 ret 中

if ( match[1] ) {

context = context instanceof jQuery ? context[0] : context;

doc = ( context ? context.ownerDocument || context : document );

// If a single string is passed in and it‘s a single tag

// just do a createElement and skip the rest

ret = rsingleTag.exec( selector );

if ( ret ) {

if ( jQuery.isPlainObject( context ) ) {

selector = [ document.createElement( ret[1] ) ];

jQuery.fn.attr.call( selector, context, true );

} else {

selector = [ doc.createElement( ret[1] ) ];

}

} else {

ret = jQuery.buildFragment( [ match[1] ], [ doc ] );

selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;

}

return jQuery.merge( this, selector );

// HANDLE: $("#id")

} else {

elem = document.getElementById( match[2] );

// Check parentNode to catch when Blackberry 4.6 returns

// nodes that are no longer in the document #6963

if ( elem && elem.parentNode ) {

// Handle the case where IE and Opera return items

// by name instead of ID

if ( elem.id !== match[2] ) {

return rootjQuery.find( selector );

}

// Otherwise, we inject the element directly into the jQuery object

this.length = 1;

this[0] = elem;

}

this.context = document;

this.selector = selector;

return this;

}

// HANDLE: $(expr, $(...))

} else if ( !context || context.jquery ) {

return ( context || rootjQuery ).find( selector );

// HANDLE: $(expr, context)

// (which is just equivalent to: $(context).find(expr)

} else {

return this.constructor( context ).find( selector );

}

// HANDLE: $(function)

// Shortcut for document ready

} else if ( jQuery.isFunction( selector ) ) {

return rootjQuery.ready( selector );

}

if ( selector.selector !== undefined ) {

this.selector = selector.selector;

this.context = selector.context;

}

return jQuery.makeArray( selector, this );

}

// The number of elements contained in the matched element set

function size() {

return this.length;

}

function toArray() {

return slice.call( this, 0 );

}

// Get the Nth element in the matched element set OR

// Get the whole matched element set as a clean array

function get( num ) {

return num == null ?

// Return a ‘clean‘ array

this.toArray() :

// Return just the object

( num < 0 ? this[ this.length + num ] : this[ num ] );

}

// Take an array of elements and push it onto the stack

// (returning the new matched element set)

function pushStack( elems, name, selector ) {

// Build a new jQuery matched element set

var ret = this.constructor();

if ( jQuery.isArray( elems ) ) {

Array.prototype.push.apply( ret, elems );

} else {

jQuery.merge( ret, elems );

}

// Add the old object onto the stack (as a reference)

ret.prevObject = this;

ret.context = this.context;

if ( name === "find" ) {

ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;

} else if ( name ) {

ret.selector = this.selector + "." + name + "(" + selector + ")";

}

// Return the newly-formed element set

return ret;

}

// Execute a callback for every element in the matched set.

// (You can seed the arguments with an array of args, but this is

// only used internally.)

function each( callback, args ) {

return jQuery.each( this, callback, args );

}

function ready( fn ) {

// Attach the listeners

jQuery.bindReady();

// Add the callback

readyList.add( fn );

return this;

}

function eq( i ) {

i = +i;

return i === -1 ?

this.slice( i ) :

this.slice( i, i + 1 );

}

function first(){

return this.eq( 0 );

}

function last() {

return this.eq( -1 );

}

function slice() {

var slice = Array.prototype.slice;

return this.pushStack( slice.apply( this, arguments ),

"slice", slice.call(arguments).join(",") );

}

function map( callback ) {

return this.pushStack( jQuery.map(this, function( elem, i ) {

return callback.call( elem, i, elem );

}));

}

function end() {

return this.prevObject || this.constructor(null);

}

// 这句代码很重要

// 让init子对象集成jQuery对象的属性和方法（通过原型链）

jQuery.fn.init.prototype = jQuery.fn;

}

我们发现init方法返回的是init子对象，所以要有这句代码jQuery.fn.init.prototype = jQuery.fn，从而使init子对象和jQuery对象的属性和方法集成在一起。

修改文件jquery.main.js，添加对方法jQuery_init的调用。

修改jquery.test.html文件，添加对jquery.init.js的引用，并测试。

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

var o = $();

alert(o.jquery);

</script>

</body>

</html>

测试结果说明，我们成功创建了jQuery对象，并显示了它的版本号属性：

3、extend方法定义

extend方法实现jQuery的功能扩展，用于合并两个或多个对象的静态属性和静态方法到第一个对象。我们把extend方法定义的代码放在文件jquery.extend.define.js中。

// extend方法定义，该方法实现功能扩展

// 用于合并两个或多个对象的属性和方法到第一个对象（静态属性和静态方法）

// 参数 [deep], target, object1 [, objectN]

// deep 是可选的布尔值，表示是否进行深度合并（即递归合并）。默认不递归。

// 参数 target 是目标对象；参数 object1 和 objectN 是源对象，包含了待合并的属性。如果

// 提供了两个或更多的对象，所有源对象的属性将会合并到目标对象；如果仅提供一个对象，

// 意味着参数 target 被忽略， jQuery 或 jQuery.fn 被当作目标对象，通过这种方式可以在 jQuery

// 或 jQuery.fn 上添加新的属性和方法， jQuery 的其他模块大都是这么实现的

function jQuery_extend_defined(jQuery){

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

var options, name, src, copy, copyIsArray, clone,

target = arguments[0] || {},

i = 1,

length = arguments.length,

deep = false;

// Handle a deep copy situation

if ( typeof target === "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)

if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

target = {};

}

// extend jQuery itself if only one argument is passed

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 ( name in options ) {

src = target[ name ];

copy = options[ name ];

// Prevent never-ending loop

if ( target === copy ) {

continue;

}

// Recurse if we‘re merging plain objects or arrays

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

}

// Never move original objects, clone them

target[ name ] = jQuery.extend( deep, clone, copy );

// Don‘t bring in undefined values

} else if ( copy !== undefined ) {

target[ name ] = copy;

}

// Return the modified object

return target;

};

}

修改文件jquery.main.js，添加对方法jQuery_extend_defined的调用。

修改jquery.test.html文件，添加对jquery.extend.define.js的引用，并测试。

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

$.extend({

test_func: function() {

alert("扩展了一个测试方法");

return jQuery;

}

});

$.test_func();

</script>

</body>

</html>

我们发现通过jQuery对象的extend方法，我们成功地给jQuery对象扩展了一个测试方法：

4、核心方法

我们把jQuery对象核心方法定义的代码放在文件jquery.extend.core.js中，这些方法都是通过jQuery对象的extend方法实现的。

// jQuery对象的核心方法

function jQuery_extend_core(jQuery,_$,_jQuery,toString){

var trim = String.prototype.trim;

var class2type = {};

jQuery.extend({

noConflict: function( deep ) {

if ( window.$ === jQuery ) {

window.$ = _$;

}

if ( deep && window.jQuery === jQuery ) {

window.jQuery = _jQuery;

}

return jQuery;

// Is the DOM ready to be used? Set to true once it occurs.

isReady: false,

// A counter to track how many items to wait for before

// the ready event fires. See #6781

readyWait: 1,

// Hold (or release) the ready event

holdReady: function( hold ) {

if ( hold ) {

jQuery.readyWait++;

} else {

jQuery.ready( true );

}

// Handle when the DOM is ready

ready: function( wait ) {

// Either a released hold or an DOMready/load event and not yet ready

if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {

// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).

if ( !document.body ) {

return setTimeout( jQuery.ready, 1 );

}

// Remember that the DOM is ready

jQuery.isReady = true;

// If a normal DOM Ready event fired, decrement, and wait if need be

if ( wait !== true && --jQuery.readyWait > 0 ) {

return;

}

// If there are functions bound, to execute

readyList.fireWith( document, [ jQuery ] );

// Trigger any bound ready events

if ( jQuery.fn.trigger ) {

jQuery( document ).trigger( "ready" ).off( "ready" );

}

bindReady: function() {

if ( readyList ) {

return;

}

readyList = jQuery.Callbacks( "once memory" );

// Catch cases where $(document).ready() is called after the

// browser event has already occurred.

if ( document.readyState === "complete" ) {

// Handle it asynchronously to allow scripts the opportunity to delay ready

return setTimeout( jQuery.ready, 1 );

}

// Mozilla, Opera and webkit nightlies currently support this event

if ( document.addEventListener ) {

// Use the handy event callback

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

// A fallback to window. that will always work

window.addEventListener( "load", jQuery.ready, false );

// If IE event model is used

} else if ( document.attachEvent ) {

// ensure firing before onload,

// maybe late but safe also for iframes

document.attachEvent( "onreadystatechange", DOMContentLoaded );

// A fallback to window. that will always work

window.attachEvent( " jQuery.ready );

// If IE and not a frame

// continually check to see if the document is ready

var toplevel = false;

try {

toplevel = window.frameElement == null;

} catch(e) {}

if ( document.documentElement.doScroll && toplevel ) {

doScrollCheck();

}

// See test/unit/core.js for details concerning isFunction.

// Since version 1.3, DOM methods and functions like alert

// aren‘t supported. They return false on IE (#2968).

isFunction: function( obj ) {

return jQuery.type(obj) === "function";

isArray: Array.isArray || function( obj ) {

return jQuery.type(obj) === "array";

// A crude way of determining if an object is a window

isWindow: function( obj ) {

return obj && typeof obj === "object" && "setInterval" in obj;

isNumeric: function( obj ) {

return !isNaN( parseFloat(obj) ) && isFinite( obj );

type: function( obj ) {

return obj == null ?

String( obj ) :

class2type[ toString.call(obj) ] || "object";

isPlainObject: function( obj ) {

// Must be an Object.

// Because of IE, we also have to check the presence of the constructor property.

// Make sure that DOM nodes and window objects don‘t pass through, as well

if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {

return false;

}

try {

// Not own constructor property must be Object

if ( obj.constructor &&

!hasOwn.call(obj, "constructor") &&

!hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {

return false;

}

} catch ( e ) {

// IE8,9 Will throw exceptions on certain host objects #9897

return false;

}

// Own properties are enumerated firstly, so to speed up,

// if last one is own, then all properties are own.

var key;

for ( key in obj ) {}

return key === undefined || hasOwn.call( obj, key );

isEmptyObject: function( obj ) {

for ( var name in obj ) {

return false;

}

return true;

error: function( msg ) {

throw new Error( msg );

parseJSON: function( data ) {

if ( typeof data !== "string" || !data ) {

return null;

}

// Make sure leading/trailing whitespace is removed (IE can‘t handle it)

data = jQuery.trim( data );

// Attempt to parse using the native JSON parser first

if ( window.JSON && window.JSON.parse ) {

return window.JSON.parse( data );

}

// Make sure the incoming data is actual JSON

// Logic borrowed from http://json.org/json2.js

if ( rvalidchars.test( data.replace( rvalidescape, "@" )

.replace( rvalidtokens, "]" )

.replace( rvalidbraces, "")) ) {

return ( new Function( "return " + data ) )();

}

jQuery.error( "Invalid JSON: " + data );

// Cross-browser xml parsing

parseXML: function( data ) {

var xml, tmp;

try {

if ( window.DOMParser ) { // Standard

tmp = new DOMParser();

xml = tmp.parseFromString( data , "text/xml" );

} else { // IE

xml = new ActiveXObject( "Microsoft.XMLDOM" );

xml.async = "false";

xml.loadXML( data );

}

} catch( e ) {

xml = undefined;

}

if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {

jQuery.error( "Invalid XML: " + data );

}

return xml;

noop: function() {},

// Evaluates a script in a global context

// Workarounds based on findings by Jim Driscoll

// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context

globalEval: function( data ) {

if ( data && rnotwhite.test( data ) ) {

// We use execScript on Internet Explorer

// We use an anonymous function so that context is window

// rather than jQuery in Firefox

( window.execScript || function( data ) {

window[ "eval" ].call( window, data );

} )( data );

}

// Convert dashed to camelCase; used by the css and data modules

// Microsoft forgot to hump their vendor prefix (#9572)

camelCase: function( string ) {

return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );

nodeName: function( elem, name ) {

return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();

// args is for internal usage only

each: function( object, callback, args ) {

var name, i = 0,

length = object.length,

isObj = length === undefined || jQuery.isFunction( object );

if ( args ) {

if ( isObj ) {

for ( name in object ) {

if ( callback.apply( object[ name ], args ) === false ) {

break;

}

} else {

for ( ; i < length; ) {

if ( callback.apply( object[ i++ ], args ) === false ) {

break;

}

// A special, fast, case for the most common use of each

} else {

if ( isObj ) {

for ( name in object ) {

if ( callback.call( object[ name ], name, object[ name ] ) === false ) {

break;

}

} else {

for ( ; i < length; ) {

if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {

break;

}

return object;

// Use native String.trim function wherever possible

trim: trim ?

function( text ) {

return text == null ?

"" :

trim.call( text );

} :

// Otherwise use our own trimming functionality

function( text ) {

return text == null ?

"" :

text.toString().replace( trimLeft, "" ).replace( trimRight, "" );

// results is for internal usage only

makeArray: function( array, results ) {

var ret = results || [];

if ( array != null ) {

// The window, strings (and functions) also have ‘length‘

// Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930

var type = jQuery.type( array );

if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) {

push.call( ret, array );

} else {

jQuery.merge( ret, array );

}

return ret;

inArray: function( elem, array, i ) {

var len;

if ( array ) {

if ( indexOf ) {

return indexOf.call( array, elem, i );

}

len = array.length;

i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;

for ( ; i < len; i++ ) {

// Skip accessing in sparse arrays

if ( i in array && array[ i ] === elem ) {

return i;

}

return -1;

merge: function( first, second ) {

var i = first.length,

j = 0;

if ( typeof second.length === "number" ) {

for ( var l = second.length; j < l; j++ ) {

first[ i++ ] = second[ j ];

}

} else {

while ( second[j] !== undefined ) {

first[ i++ ] = second[ j++ ];

}

first.length = i;

return first;

grep: function( elems, callback, inv ) {

var ret = [], retVal;

inv = !!inv;

// Go through the array, only saving the items

// that pass the validator function

for ( var i = 0, length = elems.length; i < length; i++ ) {

retVal = !!callback( elems[ i ], i );

if ( inv !== retVal ) {

ret.push( elems[ i ] );

}

return ret;

// arg is for internal usage only

map: function( elems, callback, arg ) {

var value, key, ret = [],

i = 0,

length = elems.length,

// jquery objects are treated as arrays

isArray = elems instanceof jQuery || length !== undefined && typeof length === "number" && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] ) || length === 0 || jQuery.isArray( elems ) ) ;

// Go through the array, translating each of the items to their

if ( isArray ) {

for ( ; i < length; i++ ) {

value = callback( elems[ i ], i, arg );

if ( value != null ) {

ret[ ret.length ] = value;

}

// Go through every key on the object,

} else {

for ( key in elems ) {

value = callback( elems[ key ], key, arg );

if ( value != null ) {

ret[ ret.length ] = value;

}

// Flatten any nested arrays

return ret.concat.apply( [], ret );

// A global GUID counter for objects

guid: 1,

// Bind a function to a context, optionally partially applying any

// arguments.

proxy: function( fn, context ) {

if ( typeof context === "string" ) {

var tmp = fn[ context ];

context = fn;

fn = tmp;

}

// Quick check to determine if target is callable, in the spec

// this throws a TypeError, but we will just return undefined.

if ( !jQuery.isFunction( fn ) ) {

return undefined;

}

// Simulated bind

var args = slice.call( arguments, 2 ),

proxy = function() {

return fn.apply( context, args.concat( slice.call( arguments ) ) );

};

// Set the guid of unique handler to the same of original handler, so it can be removed

proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;

return proxy;

// Mutifunctional method to get and set values to a collection

// The value/s can optionally be executed if it‘s a function

access: function( elems, key, value, exec, fn, pass ) {

var length = elems.length;

// Setting many attributes

if ( typeof key === "object" ) {

for ( var k in key ) {

jQuery.access( elems, k, key[k], exec, fn, value );

}

return elems;

}

// Setting one attribute

if ( value !== undefined ) {

// Optionally, function values get executed if exec is true

exec = !pass && exec && jQuery.isFunction(value);

for ( var i = 0; i < length; i++ ) {

fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );

}

return elems;

}

// Getting an attribute

return length ? fn( elems[0], key ) : undefined;

now: function() {

return ( new Date() ).getTime();

// Use of jQuery.browser is frowned upon.

// More details: http://docs.jquery.com/Utilities/jQuery.browser

uaMatch: function( ua ) {

ua = ua.toLowerCase();

var match = rwebkit.exec( ua ) ||

ropera.exec( ua ) ||

rmsie.exec( ua ) ||

ua.indexOf("compatible") < 0 && rmozilla.exec( ua ) ||

[];

return { browser: match[1] || "", version: match[2] || "0" };

sub: function() {

function jQuerySub( selector, context ) {

return new jQuerySub.fn.init( selector, context );

}

jQuery.extend( true, jQuerySub, this );

jQuerySub.superclass = this;

jQuerySub.fn = jQuerySub.prototype = this();

jQuerySub.fn.constructor = jQuerySub;

jQuerySub.sub = this.sub;

jQuerySub.fn.init = function init( selector, context ) {

if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {

context = jQuerySub( context );

}

return jQuery.fn.init.call( this, selector, context, rootjQuerySub );

};

jQuerySub.fn.init.prototype = jQuerySub.fn;

var rootjQuerySub = jQuerySub(document);

return jQuerySub;

browser: {}

});

}

其中，noConflict方法实现了jQuery和其他框架的多库共存。我们可以测试一下。当然，测试之前，要修改文件jquery.main.js，添加对方法jQuery_extend_core的调用。

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

alert($);

</script>

</body>

</html>

测试文件中<script>$="假设这是另一个库的命名空间";</script>，是假设我们引用了其他的库，而且这个库的命名空间同样是$。测试结果是：

显示的是jQuery对象的构造函数，说明我们引入jQuery库的时候，jQuery框架的命名空间$覆盖了之前那个库的命名空间。现在我们用方法noConflict实现多库共存。

<!doctype html>

<head>

<title>jquery demo</title>

</head>

<body>

var myQuery = $.noConflict();

alert($);

alert(myQuery);

</script>

</body>

</html>

这样以来，jQuery对象就释放了命名空间$，而使用新的命名空间myQuery。

（待续）

时间： 2024-10-14 10:19:15

第五节：JQuery框架源码简析（1）

第五节：JQuery框架源码简析（1）的相关文章

第五节：JQuery框架源码简析（3）

第五节：JQuery框架源码简析（2）

SpringMVC学习——概念、流程图、源码简析（一）

并发工具-CyclicBarrier源码简析

JDK源码简析--java.lang包中的基础类库

JDK源码简析--java.util包中的工具类库

0002 - Spring MVC 拦截器源码简析：拦截器加载与执行

[tomcat]源码简析异步/非阻塞和请求构成

Linux Hugetlbfs内核源码简析-----(一)Hugetlbfs初始化