jQuery技术内幕:深入解析jQuery架构设计与实现原理.2.6 jQuery.extend()、jQuery.fn.extend()...

    xiaoxiao2024-01-23  143

    2.6 jQuery.extend()、jQuery.fn.extend()

    2.6.1 如何使用

    方法jQuery.extend()和jQuery.fn.extend()用于合并两个或多个对象的属性到第一个对象,它们的语法如下:

    jQuery.extend( [deep], target, object1 [, objectN] )

    jQuery.fn.extend( [deep], target, object1 [, objectN] )

    其中,参数deep是可选的布尔值,表示是否进行深度合并(即递归合并)。合并行为默认是不递归的,如果第一个参数的属性本身是一个对象或数组,它会被第二个或后面的其他参数的同名属性完全覆盖。如果为true,表示进行深度合并,合并过程是递归的。

    参数target是目标对象;参数object1和objectN是源对象,包含了待合并的属性。如果提供了两个或更多的对象,所有源对象的属性将会合并到目标对象;如果仅提供一个对象,意味着参数target被忽略,jQuery或jQuery.fn被当作目标对象,通过这种方式可以在jQuery或jQuery.fn上添加新的属性和方法,jQuery的其他模块大都是这么实现的。

    方法jQuery.extend()和jQuery.fn.extend()常用于编写插件和处理函数的参数。

    2.6.2 源码分析

    方法jQuery.extend()和jQuery.fn.extend()执行的关键步骤如下所示:

    1)修正参数deep、target、源对象的起始下标。

    2)逐个遍历源对象:

    a.?遍历源对象的属性。

    b.?覆盖目标对象的同名属性;如果是深度合并,则先递归调用jQuery.extend()。

    下面分析方法jQuery.extend()和jQuery.fn.extend()的源码。

    1.?定义jQuery.extend()和jQuery.fn.extend()

    相关代码如下所示:

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

    第324行:因为参数的个数是不确定的,可以有任意多个,所以没有列出可接受的参数。

    2.?定义局部变量

    相关代码如下所示:

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

    326         target = arguments[0] || {},

    327         i = 1,

    328         length = arguments.length,

    329         deep = false;

    330

    第325~329行:定义一组局部变量,它们的含义和用途如下:

    变量options:指向某个源对象。

    变量name:表示某个源对象的某个属性名。

    变量src:表示目标对象的某个属性的原始值。

    变量copy:表示某个源对象的某个属性的值。

    变量copyIsArray:指示变量copy是否是数组。

    变量clone:表示深度复制时原始值的修正值。

    变量target:指向目标对象。

    变量i:表示源对象的起始下标。

    变量length:表示参数的个数,用于修正变量target。

    变量deep:指示是否执行深度复制,默认为false。

    3.?修正目标对象target、源对象起始下标i

    相关代码如下所示:

    331     // Handle a deep copy situation

    332     if ( typeof target === "boolean" ) {

    333         deep = target;

    334         target = arguments[1] || {};

    335         // skip the boolean and the target

    336         i = 2;

    337     }

    338

    339     // Handle case when target is a string or something (possible in deep copy)

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

    341         target = {};

    342     }

    343

    344     // extend jQuery itself if only one argument is passed

    345     if ( length === i ) {

    346         target = this;

    347         --i;

    348     }

    349

    第331~337行:如果第一个参数是布尔值,则修正第一个参数为 deep,修正第二个参数为目标对象 target,并且期望源对象从第三个元素开始。

    变量i的初始值为1,表示期望源对象从第2个元素开始;当第一个参数为布尔型时,变量i变为2,表示期望源对象从第3个元素开始。

    第339~342行:如果目标对象target不是对象、不是函数,而是一个字符串或其他的基本类型,则统一替换为空对象{},因为在基本类型上设置非原生属性是无效的。例如:

    var s = 'hi';

    s.test = 'hello';

    console.log( s.test );        // 打印undefined

    第344~348行:变量i表示源对象开始的下标,变量length表示参数个数,如果二者相等,表示期望的源对象没有传入,则把jQuery或jQuery.fn作为目标对象,并且把源对象的开始下标减一,从而使得传入的对象被当作源对象。变量length等于i可能有两种情况:

    extend( object ),只传入了一个参数。

    extend( deep, object ),传入了两个参数,第一个参数是布尔值。

    4.?逐个遍历源对象

    相关代码如下所示:

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

    第350行:循环变量i表示源对象开始的下标,很巧妙的用法。

    (1)遍历源对象的属性

    下面的代码用于遍历源对象的属性:

    351         // Only deal with non-null/undefined values

    352         if ( (options = arguments[ i ]) != null ) {

    353             // Extend the base object

    354             for ( name in options ) {

    第352行:arguments是一个类似数组的对象,包含了传入的参数,可以通过整型下标访问指定位置的参数。这行代码把获取源对象和对源对象的判断合并为一条语句,只有源对象不是null、undefined时才会继续执行。

    第353行:开始遍历单个源对象的属性。

    (2)覆盖目标对象的同名属性

    相关代码如下所示:

    355                 src = target[ name ];

    356                 copy = options[ name ];

    357

    358                 // Prevent never-ending loop

    359                 if ( target === copy ) {

    360                     continue;

    361                 }

    362

    363                 // Recurse if we're merging plain objects or arrays

    364                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

    365                     if ( copyIsArray ) {

    366                         copyIsArray = false;

    367                         clone = src && jQuery.isArray(src) ? src : [];

    368

    369                     } else {

    370                         clone = src && jQuery.isPlainObject(src) ? src : {};

    371                     }

    372

    373                     // Never move original objects, clone them

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

    375

    376                 // Don't bring in undefined values

    377                 } else if ( copy !== undefined ) {

    378                     target[ name ] = copy;

    379                 }

    380             }

    381         }

    382     }

    383

    第355~361行:变量src是原始值,变量copy是复制值。如果复制值copy与目标对象target相等,为了避免深度遍历时死循环,因此不会覆盖目标对象的同名属性。如果注释掉第360行,下面的代码会抛出堆栈溢出异常:

    var o = {};

    o.n1 = o;

    $.extend( true, o, { n2: o } );

    // 抛出异常:

    // Uncaught RangeError: Maximum call stack size exceeded

    注意,判断target === copy时使用的是“===”,强制不做类型转换;如果使用“==”,则可能因自动类型转换而导致错误。

    第364~374行:如果是深度合并,且复制值copy是普通JavaScript对象或数组,则递归合并。

    第365~371行:复制值copy是数组时,如果原始值src不是数组,则修正为空数组;复制值copy是普通JavaScript对象时,如果原始值src不是普通JavaScript对象,则修正为空对象{}。把原始值src或修正后的值赋值给原始值副本clone。

    通过调用方法jQuery.isPlainObject( copy )判断复制值copy是否是“纯粹”的JavaScript对象,只有通过对象直接量{}或new Object()创建的对象,才会返回true。例如:

    jQuery.isPlainObject( { hello: 'world' } );  // true

    jQuery.isPlainObject( new Object() );                // true

    jQuery.isPlainObject( new Object(1) );              // true

    方法jQuery.isPlainObject()将在2.8.2节介绍和分析。

    第374行:先把复制值copy递归合并到原始值副本clone中,然后覆盖目标对象的同名属性。

    第376~379行:如果不是深度合并,并且复制值copy不是undefined,则直接覆盖目标对象的同名属性。

    相关资源:七夕情人节表白HTML源码(两款)
    最新回复(0)