jQuery源码分析—2代码整体结构与核心方法

该内容转自http://nuysoft.iteye.com/blog/1182087，笔者做了部分修改

?

去除掉jQuery变量和扩展方法，先看以下精简代码

?

?

(function( window, undefined ) {// 构造jQuery对象var jQuery = (function() {//以下定义了内部变量// Define a local copy of jQueryvar jQuery = function( selector, context ) {// The jQuery object is actually just the init constructor 'enhanced'return new jQuery.fn.init( selector, context, rootjQuery );};//把jQuery的原型 prototype赋给jQuery.fnjQuery.fn = jQuery.prototype = {constructor: jQuery,/** * selector有以下7种分支情况：       DOM元素       body（优化）       字符串：HTML标签、HTML字符串、#id、选择器表达式       函数（作为ready回调函数）       最后返回伪数组 */init: function( selector, context, rootjQuery ) {   //后期会详细分析此处的实现}};// Give the init function the jQuery prototype for later instantiation//把jQuery.fn赋值到jQuery.fn.init.prototype，这样init指向的原型prototype也具有了jQuery.fn的功能jQuery.fn.init.prototype = jQuery.fn;//jQuery的继承实现jQuery.extend = jQuery.fn.extend = function() {};// 在jQuery上扩展静态方法jQuery.extend({// ready bindReady   // isPlainObject isEmptyObject   // parseJSON parseXML   // globalEval   // each makeArray inArray merge grep map   // proxy   // access   // uaMatch   // sub   // browser});// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展return jQuery;})();// Expose jQuery to the global object//设置jQuery 和  $为window全局变量window.jQuery = window.$ = jQuery;})( window );

?

?

下面分析框架中的代码

?

1、?

jQuery对象不是通过//jQuery的继承实现/** * 合并两个或更多对象的属性到第一个对象中，jQuery后续的大部分功能都通过该函数扩展 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数 如果传入两个或多个对象，所有对象的属性会被添加到第一个对象target 如果只传入一个对象，则将对象的属性添加到jQuery对象中。用这种方式，我们可以为jQuery命名空间增加新的方法。可以用于编写jQuery插件。如果不想改变传入的对象，可以传入一个空对象：$.extend({}, object1, object2);默认合并操作是不迭代的，即便target的某个属性是对象或属性，也会被完全覆盖而不是合并第一个参数是true，则会迭代合并从object原型继承的属性会被拷贝undefined值不会被拷贝因为性能和安全原因，JavaScript自带类型的属性不会合并例如：jQuery.extend( target, [ object1 ], [ objectN ] )jQuery.extend( [ deep ], target, object1, [ objectN ] ) */jQuery.extend = jQuery.fn.extend = function() {var options, //传入的参数name, //参数中的属性src, //源copy, //待copy的对象或变量copyIsArray, //copy的是否为数组clone,//深层copy时，调整中间变量target = arguments[0] || {},//要copy到的目标i = 1,length = arguments.length,deep = false;//是否深度copy// Handle a deep copy situation//如果第一个参数为布尔型，则处理深层次copyif ( typeof target === "boolean" ) {deep = target;target = arguments[1] || {};// skip the boolean and the target// 跳过boolean和target，从第3个开始传入的参数开始i = 2;}// Handle case when target is a string or something (possible in deep copy)// target不是对象也不是函数，则强制设置为空对象if ( typeof target !== "object" && !jQuery.isFunction(target) ) {target = {};}// extend jQuery itself if only one argument is passed// 如果只传入一个参数，则认为是对jQuery扩展if ( length === i ) {target = this;--i;//此时i取第一个参数}for ( ; i < length; i++ ) {// Only deal with non-null/undefined values// 只处理非空参数if ( (options = arguments[ i ]) != null ) {// Extend the base objectfor ( name in options ) {src = target[ name ];copy = options[ name ];// Prevent never-ending loop// 避免循环引用，即target和要copy的是同一对象if ( target === copy ) {continue;}// Recurse if we're merging plain objects or arrays// 深度拷贝且值是纯对象（json对象）或数组，则递归if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {if ( copyIsArray ) {//如果是数组copyIsArray = false;//注意此处的写法，由于&&是返回第二个表达式的值，故可以分解成以下情况//1、src为null或undefined时，clone为[]//2、src为数组时，则直接返回src赋给clone//3、src为非数组时，则clone为[]//这种写法确保clone为数组，如果target[ name ]为非数组时，copy就会用数组覆盖原来的值clone = src && jQuery.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}// Never move original objects, clone them// 递归调用，深copytarget[ name ] = jQuery.extend( deep, clone, copy );// Don't bring in undefined values} else if ( copy !== undefined ) {target[ name ] = copy;}}}}// Return the modified objectreturn target;};?

关于jQuery中extend方法的具体分析参见代码中的注释，从代码中可以看出jQuery中的extend是实现了对象间的copy功能，更像ext中的apply方法，只是比ext中的apply强大多了。而ext中的extend方法更像是面向对象中类继承，主要对function实现了继承，包括属性和方法的继承，可以重构，也可以继承。