jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.7 原型属性和方法-阿里云开发者社区

开发者社区> 华章出版社> 正文

jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.7 原型属性和方法

简介:

2.7 原型属性和方法

在构造jQuery对象模块时,除了2.3节和2.6节已经介绍和分析的jQuery.fn.init()和jQuery.fn.extend()外,还定义了一些其他的原型属性和方法,其整体源码结构如代码清单2-2所示。

代码清单2-2  原型属性和方法

97 jQuery.fn = jQuery.prototype = {

98     constructor: jQuery,

99     init: function( selector, context, rootjQuery ) {}

210     selector: "",

213     jquery: "1.7.1",

216     length: 0,

219     size: function() {},

223     toArray: function() {},

229     get: function( num ) {},

241     pushStack: function( elems, name, selector ) {},

270     each: function( callback, args ) {},

274     ready: function( fn ) {}, //

284     eq: function( i ) {},

291     first: function() {},

295     last: function() {},

299     slice: function() {},

304     map: function( callback ) {},

310     end: function() {},

316     push: push,

317     sort: [].sort,

318     splice: [].splice

319 };

其中.ready()用于绑定ready事件,将在9.11节进行介绍和分析。下面对其他的原型属性和方法逐一介绍和分析。

2.7.1 .selector、.jquery、.length、.size()

属性selector用于记录jQuery查找和过滤DOM元素时的选择器表达式,但不一定是可执行的选择器表达式,该属性更多的是为了方便调试。下面是一些示例:

$('div').find('p').selector            // "div p"

$('div p').selector                        // "div p"

$('div').first().selector                         // "div.slice(0,1)"

属性jquery表示正在使用的jQuery版本号。

属性.length表示当前jQuery对象中元素的个数。

方法.size()返回当前jQuery对象中元素的个数。方法.size()在功能上等价于属性.length,但应该优先使用属性.length,因为它没有函数调用开销。

属性.selector、.jquery、.length、.size()的相关代码如下所示:

209     // Start with an empty selector

210     selector: "",

211

212     // The current version of jQuery being used

213     jquery: "1.7.1",

214

215     // The default length of a jQuery object is 0

216     length: 0,

217

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

219     size: function() {

220         return this.length;

221     },

222

2.7.2 .toArray()、.get( [index] )

1.?.toArray()

方法.toArray()将当前jQuery对象转换为真正的数组,转换后的数组包含了所有元素。方法.toArray()的实现巧妙地借用了数组的方法slice(),相关的代码如下所示:

86     // Save a reference to some core methods

87     toString = Object.prototype.toString,

88     hasOwn = Object.prototype.hasOwnProperty,

89     push = Array.prototype.push,

90     slice = Array.prototype.slice,

91     trim = String.prototype.trim,

92     indexOf = Array.prototype.indexOf,

 

223    toArray: function() {

224       return slice.call( this, 0 );

225    },

第86~92行:连同slice()一起声明的还有toString()、hasOwn()、trim()、indexOf(),这里通过声明对这些核心方法的引用,使得在jQuery代码中可以借用这些核心方法的功能,执行时可通过方法call()和apply()指定方法执行的环境,即关键字this所引用的对象。这种“借鸡下蛋”的技巧非常值得借鉴。

数组方法slice()返回数组的一部分,语法如下:

array.slice(start, end)

// 参数start 表示数组片段开始处的下标。如果是负数,它声明从数组末尾开始算起的位置

// 参数end 表示数组片段结束处的后一个元素的下标。如果没有指定这个参数,切分的数组包含从 start 开始到数组结束的所有元素。如果这个参数是负数,它声明的是从数组尾部开始算起的元素

2.?.get( [index] )

方法.get( [index] )返回当前jQuery对象中指定位置的元素或包含了全部元素的数组。如果没有传入参数,则调用.toArray()返回包含了所有元素的数组;如果指定了参数index,则返回一个单独的元素;参数index从0开始计算,并且支持负数,负数表示从元素集合末尾开始计算。相关代码如下所示:

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

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

229     get: function( num ) {

230         return num == null ?

231

232             // Return a 'clean' array

233             this.toArray() :

234

235             // Return just the object

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

237     },

第236行:先判断num是否小于0,如果小于0,则用length + num重新计算下标,然后使用数组访问操作符([])获取指定位置的元素,这是支持下标为负数的一个小技巧;如果num大于等于0,则直接返回指定位置的元素。

2.7.3 .each( function(index, Element) )、jQuery.each( collection, callback (indexInArray, valueOfElement) )

1.?.each( function(index, Element) )

方法.each()遍历当前jQuery对象,并在每个元素上执行回调函数。每当回调函数执行时,会传递当前循环次数作为参数,循环次数从0开始计数;更重要的是,回调函数是在当前元素为上下文的语境中触发的,即关键字this总是指向当前元素;在回调函数中返回false可以终止遍历。

方法.each()内部通过简单的调用静态方法jQuery.each()实现,相关代码如下所示:

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

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

269     // only used internally.)

270     each: function( callback, args ) {

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

272     },

2.?jQuery.each( collection, callback(indexInArray, valueOfElement) )

静态方法jQuery.each()是一个通用的遍历迭代方法,用于无缝地遍历对象和数组。对于数组和含有length属性的类数组对象(如函数参数对象arguments),该方法通过下标遍历,从0到length-1;对于其他对象则通过属性名遍历(for-in)。在遍历过程中,如果回调函数返回false,则结束遍历。相关代码如下所示:

627     // args is for internal usage only

628     each: function( object, callback, args ) {

629         var name, i = 0,

630             length = object.length,

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

632

633         if ( args ) {

634             if ( isObj ) {

635                 for ( name in object ) {

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

637                         break;

638                     }

639                 }

640             } else {

641                 for ( ; i < length; ) {

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

643                         break;

644                     }

645                 }

646             }

647

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

649         } else {

650             if ( isObj ) {

651                 for ( name in object ) {

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

653                         break;

654                     }

655                 }

656             } else {

657                 for ( ; i < length; ) {

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

659                         break;

660                     }

661                 }

662             }

663         }

664

665         return object;

666     },

第628行:定义方法jQuery.each( object, callback, args ),它接受3个参数。

参数object:待遍历的对象或数组。

参数callback:回调函数,会在数组的每个元素或对象的每个属性上执行。

参数args:传给回调函数callback的参数数组,可选。如果没有传入参数args,则执行回调函数时会传入两个参数(下标或属性名,对应的元素或属性值)如果传入了参数args,则只把该参数传给回调函数。

第631行:变量isObj表示参数object是对象还是数组,以便决定遍历方式。如果object.length是undefined或object是函数,则认为object是对象,设置变量isObj为true,将通过属性名遍历;否则认为是数组或类数组对象,设置变量isObj为false,将通过下标遍历。

第633~646行:如果传入了参数args,对于对象,通过for-in循环遍历属性名,对于数组或类数组对象,则通过for循环遍历下标,执行回调函数时只传入一个参数args。

注意,执行回调函数callback时通过方法apply()指定this关键字所引用的对象,同时要求并假设参数args是数组,如果不是就会抛出TypeError。

第648~663行:如果未传入参数args,对于对象,通过for-in循环遍历属性名,对于数组或类数组对象,则通过for循环遍历下标,执行回调函数时传入两个参数:下标或属性名,对应的元素或属性值。

注意,执行回调函数callback时通过方法call()指定this关键字所引用的对象。

似乎jQuery.each()的代码略显啰嗦,因为第633~646行和第648~663行的代码相似度很高,只是触发回调函数的方式和参数不同,完全可以考虑把它们合并,在合并后的代码中根据变量isObj的值决定触发方式和参数,这样就可以减少一半的代码,但是,这也会导致在遍历过程中需要反复判断变量isObj的值。两权相较,方法jQuery.each()选择了“略显啰嗦的”代码来避免性能下降。

第665行:最后,返回传入的参数object。方法.each()调用jQuery.each()时,把当前jQuery对象作为参数object传入,这里返回该参数,以支持链式语法。

2.7.4 .map( callback(index, domElement) )、jQuery.map( arrayOrObject, callback(value, indexOrKey) )

1.?.map( callback(index, domElement) )

方法.map()遍历当前jQuery对象,在每个元素上执行回调函数,并将回调函数的返回值放入一个新jQuery对象中。该方法常用于获取或设置DOM元素集合的值。

执行回调函数时,关键字this指向当前元素。回调函数可以返回一个独立的数据项或数据项数组,返回值将被插入结果集中;如果返回一个数组,数组中的元素会被插入结果集;如果回调函数返回null或undefined,则不会插入任何元素。

方法.map()内部通过静态方法jQuery.map()和原型方法.pushStack()实现,相关代码如下所示:

304     map: function( callback ) {

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

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

307         }));

308     },

原型方法.pushStack()将在2.7.5节介绍和分析。

2.?jQuery.map( arrayOrObject, callback(value, indexOrKey) )

静态方法jQuery.map()对数组中的每个元素或对象的每个属性调用一个回调函数,并将回调函数的返回值放入一个新的数组中。执行回调函数时传入两个参数:数组元素或属性值,元素下标或属性名。关键字this指向全局对象window。回调函数的返回值会被放入新的数组中;如果返回一个数组,数组中将被扁平化后插入结果集;如果返回null或undefined,则不会放入任何元素。相关代码如下所示:

760     // arg is for internal usage only

761     map: function( elems, callback, arg ) {

762         var value, key, ret = [],

763             i = 0,

764             length = elems.length,

765             // jquery objects are treated as arrays

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

767

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

769         if ( isArray ) {

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

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

772

773                 if ( value != null ) {

774                     ret[ ret.length ] = value;

775                 }

776             }

777

778         // Go through every key on the object,

779         } else {

780             for ( key in elems ) {

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

782

783                 if ( value != null ) {

784                     ret[ ret.length ] = value;

785                 }

786             }

787         }

788

789         // Fl atten any nested arrays

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

791     },

第761行:定义方法jQuery.map( elems, callback, arg ),它接受3个参数:

参数elems:待遍历的数组或对象。

参数callback:回调函数,会在数组的每个元素或对象的每个属性上执行。执行时传入两个参数:数组元素或属性值,元素下标或属性名。

参数arg:仅限于jQuery内部使用。如果调用jQuery.map()时传入了参数arg,则该参数会被传给回调函数callback。

第766行:变量isArray表示参数elems是否是数组,以便决定遍历方式。如果为true,将通过下标遍历;否则将通过属性名遍历。这行复合布尔表达式有些长,为了方便分析,将这行代码等价地格式化为下面的形式:

isArray = elems instanceof jQuery

   || length !== undefined && typeof length === "number"

       && ( ( length > 0 && elems[ 0 ] && elems[ length -1 ] )

              || length === 0

              || jQuery.isArray( elems ) ) ;

如果elems是jQuery对象,则变量isArray为true;如果elem.length是数值型,且满足以下条件之一,则变量isArray为true:

length大于0,且elems[0]存在,且elems[ length -1 ]存在,即elems是一个类数组对象。

length等于0。

elems是真正的数组。

第769~776行:对于数组或类数组对象,则通过for循环遍历下标,为每个元素执行回调函数callback,执行时依次传入三个参数:元素、下标、arg。如果回调函数的返回值不是null和undefined,则把返回值放入结果集ret。

第778~787行:对于对象,则通过for-in循环遍历属性名,为每个属性值执行回调函数callback,执行时依次传入三个参数:属性值、属性名、arg。如果回调函数的返回值不是null和undefined,则把返回值放入结果集ret。

第790行:最后在空数组[]上调用方法concat()扁平化结果集ret中的元素,并返回。

2.7.5 .pushStack( elements, name, arguments )

原型方法.pushStack()创建一个新的空jQuery对象,然后把DOM元素集合放入这个jQuery对象中,并保留对当前jQuery对象的引用。

原型方法.pushStack()是核心方法之一,它为以下方法提供支持:

jQuery对象遍历:.eq()、.first()、.last()、.slice()、.map()。

DOM查找、过滤:.find()、.not()、.filter()、.closest()、.add()、.andSelf()。

DOM遍历:.parent()、.parents()、.parentsUntil()、.next()、.prev()、.nextAll()、.prevAll()、

.nextUnit()、.prevUnit()、.siblings()、.children()、.contents()。

DOM插入:jQuery.before()、jQuery.after()、jQuery.replaceWith()、.append()、.prepent()、

.before()、.after()、.replaceWith()。

相关代码如下所示:

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

240     // (returning the new matched element set)

241     pushStack: function( elems, name, selector ) {

242         // Build a new jQuery matched element set

243         var ret = this.constructor();

244

245         if ( jQuery.isArray( elems ) ) {

246             push.apply( ret, elems );

247

248         } else {

249             jQuery.merge( ret, elems );

250         }

251

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

253         ret.prevObject = this;

254

255         ret.context = this.context;

256

257         if ( name === "find" ) {

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

259         } else if ( name ) {

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

261         }

262

263         // Return the newly-formed element set

264         return ret;

265     },

第241行:定义方法.push( elems, name, selector ),它接受3个参数:

参数elems:将放入新jQuery对象的元素数组(或类数组对象)。

参数name:产生元素数组elems的jQuery方法名。

参数selector:传给jQuery方法的参数,用于修正原型属性.selector。

第243行:构造一个新的空jQuery对象ret,this.constructor指向构造函数jQuery()。

第245~250行:把参数elems合并到新jQuery对象ret中。如果参数elems是数组,则借用数组方法push()插入,否则调用方法jQuery.merge( first, second )合并。

第253行:在新Query对象ret上设置属性prevObject,指向当前jQuery对象,从而形成一个链式栈。因此,方法.pushStack()的行为还可以理解为,构建一个新的jQuery对象并入栈,新对象位于栈顶,这也是该方法如此命名的原因所在。

第255行:在新jQuery对象ret上设置属性prevObject,指向当前jQuery对象的上下文,后续的jQuery方法可能会用到这个属性。

第257~261行:在新jQuery对象ret上设置属性selector,该属性不一定是合法的选择器表达式,更多的是为了方便调试,例如,下面的代码打印了调用方法.pushStack()之后属性selector的值:

console.log( $('div').eq(0).selector );

// div.slice(0,1)

 

console.log( $('div').first().selector );

// div.slice(0,1)

 

console.log( $('div').last().selector );

// div.slice(-1)

 

console.log( $('div').slice(0,9).selector );

// div.slice(0,9)

 

console.log( $('div').find('p').selector );

// div p

 

console.log( $('div').not('.cls').selector );

// div.not(.cls)

 

console.log( $('div').find('p').not('.cls').selector );

// div p.not(.cls)

第264行:最后返回新jQuery对象ret。

2.7.6 .end()

方法.end()结束当前链条中最近的筛选操作,并将匹配元素集合还原为之前的状态。相关代码如下所示:

310     end: function() {

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

312     },

第311行:返回前一个jQuery对象。如果属性prevObject不存在,则构建一个空的jQuery对象返回。

方法.pushStack()用于入栈,方法.end()则用于出栈。这两个方法可以像下面的例子这样使用:

$('ul.first').find('.foo')

   .css('background-color', 'red')

.end().find('.bar')

   .css('background-color', 'green')

.end();

2.7.7 .eq( index )、.first()、.last()、.slice( start [, end] )

方法.eq( index )将匹配元素集合缩减为集合中指定位置的元素;方法.first()将匹配元素集合缩减为集合中的第一个元素;方法.last()将匹配元素集合缩减为集合中的最后一个元素;方法.slice( start [, end] )将匹配元素集合缩减为指定范围的子集。

方法.first()和.last()通过调用.eq( index )实现,.eq( index )则通过.slice( start [, end] )实现,.slice( start [, end] )则通过调用.pushStack( elements, name, arguments )实现,方法调用链为.first/last()→.eq( index )→.slice( start [, end] )→.pushStack( elements, name, arguments )。相关代码如下所示:

284      eq: function( i ) {

285         i = +i;

286         return i === -1 ?

287             this.slice( i ) :

288             this.slice( i, i + 1 );

289      },

290

291      first: function() {

292         return this.eq( 0 );

293      },

294

295      last: function() {

296         return this.eq( -1 );

297      },

298

299      slice: function() {

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

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

302     },

第285行:如果参数i是字符串,则通过在前面加上一个加号把该参数转换为数值。

第300~301行:先借用数组方法slice()从当前jQuery对象中获取指定范围的子集(数组),再调用方法.pushStack()把子集转换为jQuery对象,同时通过属性prevObject保留了对当前jQuery对象的引用。

2.7.8 .push( value, ... )、.sort( [orderfunc] )、.splice( start,deleteCount, value, ... )

方法.push( value, ... )向当前jQuery对象的末尾添加新元素,并返回新长度,例如:

var foo = $(document);

foo.push( document.body ); // 2

方法.sort( [orderfunc] )对当前jQuery对象中的元素进行排序,可以传入一个比较函数来指定排序方式,例如。

var foo = $([33, 4, 1111, 222]);

foo.sort(); // [1111, 222, 33, 4]

foo.sort(function(a, b){

   console.log( 'orderfun', a, b );

   return a - b;

}) // [4, 33, 222, 1111]

方法.splice( start,deleteCount, value, ... )向当前jQuery对象中插入、删除或替换元素。如果从当前jQuery对象中删除了元素,则返回含有被删除元素的数组。例如:

var foo = $('<div id="d1" /><div id="d2" /><div id="d3" />');

// [<div id="d1"></div>, <div id="d2"></div>, <div id="d3"></div>]

foo.splice( 1, 2 );

// [<div id="d2"></div>, <div id="d3"></div>]

方法.push()、.sort()、.splice()仅在内部使用,都指向同名的数组方法,因此它们的参数、功能和返回值与数组方法完全一致。相关代码如下所示:

314     // For internal use only.

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

316     push: push,

317     sort: [].sort,

318     splice: [].splice

319 };

2.7.9 小结

构造jQuery对象模块的原型属性和方法可以总结为图2-8。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接