JQuery source code analysis of the jQuery loop tips
- 2020-03-30 03:53:19
- OfStack
There are a lot of techniques to learn from in the source code of jQuery, this article is a collection of various traversal techniques and scenarios in jQuery. Specific analysis is as follows:
//Simple for-in (event)
for ( type in events ) {
}
//Cache the length property to avoid looking up the length property every time, slightly increasing the traversal speed
//But if you iterate over an HTMLCollection, you get a significant performance boost because every time you access an HTMLCollection property, the HTMLCollection internally matches all the nodes at once
for ( var j = 0, l = handlers.length; j < l; j++ ) {
}
//Determine whether an element is true without comparing subscripts (cast)
var elem;
for ( var i = 0; elems[i]; i++ ) {
elem = elems[i];
// ...
}
//Traversing dynamic arrays (events), unable to cache the length attribute, j-- before j++, to ensure that some array elements are not traversed because of an error in array subscripts
for ( j = 0; j < eventType.length; j++ ) {
eventType.splice( j--, 1 );
}
for ( var i = 1; i < results.length; i++ ) {
if ( results[i] === results[ i - 1 ] ) {
results.splice( i--, 1 );
}
}
//Reduce the number of traversals (events) as much as possible during the iteration. If you know where to start the traversal, here is pos
for ( j = pos || 0; j < eventType.length; j++ ) {
}
//Reverse order traversal (event), reduced by a few characters: loop conditional judgment, merge I subtracting and I value, reverse order traversal will have browser optimization, slightly improved traversal speed
for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}
//Reverse order traversal, regular, reverse order will have browser optimization, slightly improve the speed of traversal
for ( j = tbody.length - 1; j >= 0 ; --j ) {
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
tbody[ j ].parentNode.removeChild( tbody[ j ] );
}
}
//To judge elements (selectors) without determining subscripts
for ( i = 0; checkSet[i] != null; i++ ) {
if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
results.push( set[i] );
}
}
for ( ; array[i]; i++ ) {
ret.push( array[i] );
}
//Unjudges subscripts, fetches elements and then judges elements (selectors)
for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
}
//Traversing the DOM child elements
for ( node = parent.firstChild; node; node = node.nextSibling ) {
if ( node.nodeType === 1 ) {
node.nodeIndex = ++count;
}
}
//The DOM child element is traversed dynamically (DOM traversal), and the dir parameter represents the directional properties of the element, such as parentNode, nextSibling, previousSibling, lastChild, and firstChild
for ( ; cur; cur = cur[dir] ) {
if ( cur.nodeType === 1 && ++num === result ) {
break;
}
}
//While checking the index I
var i = promiseMethods.length;
while( i-- ) {
obj[ promiseMethods[i] ] = deferred[ promiseMethods[i] ];
}
//While checking element
while( (type = types[ i++ ]) ) {
}
//While traversing a dynamic array (AJAX), always getting the first element, checking to see if it is equal to a particular value, and if so, removing it from the head of the array until it encounters a different element or the array is empty
while( dataTypes[ 0 ] === "*" ) {
dataTypes.shift();
if ( ct === undefined ) {
ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
}
}
//While traversing a dynamic array (asynchronous queue), always getting the first element until the array is empty or an element with an undefined value is encountered
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );
}
//While repeatedly calling regexp.exec (AJAX), the ability to call repeatedly is why exec is more powerful than re.test, string.match, and each call sets the lastIndex property to the position of the character next to the matching String
while( ( match = rheaders.exec( responseHeadersString ) ) ) {
responseHeaders[ match[1].toLowerCase() ] = match[ 2 ]; //Store the response header in the responseHeaders as key-value
}