1. 作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com
  2. 声明:本文为原创文章,如需转载,请注明来源并保留原文链接。
  3. 前记:本文收集了jQuery中出现的各种遍历技巧和场景
  1. // 简单的for-in(事件)
  2. for ( type in events ) {
  3. }
  1. // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度
  2. // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点
  3. for ( var j = 0, l = handlers.length; j < l; j++ ) {
  4. }
  1. // 不比较下标,直接判断元素是否为true(强制类型转换)
  2. var elem;
  3. for ( var i = 0; elems[i]; i++ ) {
  4. elem = elems[i];
  5. // ...
  6. }
  1. // 遍历动态数组(事件),不能缓存length属性,j++之前先执行j--,保证不会因为数组下标的错误导致某些数组元素遍历不到
  2. for ( j = 0; j < eventType.length; j++ ) {
  3. eventType.splice( j--, 1 );
  4. }
  5. for ( var i = 1; i < results.length; i++ ) {
  6. if ( results[i] === results[ i - 1 ] ) {
  7. results.splice( i--, 1 );
  8. }
  9. }
  1. // 迭代过程中尽可能减少遍历次数(事件),如果你能知道从哪里开始遍历的话,这里是pos
  2. for ( j = pos || 0; j < eventType.length; j++ ) {
  3. }
  1. //倒序遍历(事件),减少了几个字符:循环条件判断,合并i自减和i取值,倒序遍历会有浏览器优化,稍微提升遍历速度
  2. for ( var i = this.props.length, prop; i; ) {
  3. prop = this.props[ --i ];
  4. event[ prop ] = originalEvent[ prop ];
  5. }
  1. // 倒序遍历,中规中矩,倒序会有浏览器优化,稍微提升遍历速度
  2. for ( j = tbody.length - 1; j >= 0 ; --j ) {
  3. if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
  4. tbody[ j ].parentNode.removeChild( tbody[ j ] );
  5. }
  6. }
  1. //不判断下标,直接判断元素(选择器)
  2. for ( i = 0; checkSet[i] != null; i++ ) {
  3. if ( checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i])) ) {
  4. results.push( set[i] );
  5. }
  6. }
  7. for ( ; array[i]; i++ ) {
  8. ret.push( array[i] );
  9. }
  1. // 不判断下标,取出元素然后判断元素(选择器)
  2. for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
  3. }
  1. // 遍历DOM子元素
  2. for ( node = parent.firstChild; node; node = node.nextSibling ) {
  3. if ( node.nodeType === 1 ) {
  4. node.nodeIndex = ++count;
  5. }
  6. }
  1. // 动态遍历DOM子元素(DOM遍历),dir参数表示元素的方向属性,如parentNode、nextSibling、previousSibling、lastChild和firstChild
  2. for ( ; cur; cur = cur[dir] ) {
  3. if ( cur.nodeType === 1 && ++num === result ) {
  4. break;
  5. }
  6. }
  1. // while检查下标i
  2. var i = promiseMethods.length;
  3. while( i-- ) {
  4. obj[ promiseMethods[i] ] = deferred[ promiseMethods[i] ];
  5. }
  1. // while检查元素
  2. while( (type = types[ i++ ]) ) {
  3. }
  1. // while遍历动态数组(AJAX),总是获取第一个元素,检查是否与特殊值相等,如果相等就从数组头部移除,直到遇到不相等的元素或数组为空
  2. while( dataTypes[ 0 ] === "*" ) {
  3. dataTypes.shift();
  4. if ( ct === undefined ) {
  5. ct = s.mimeType || jqXHR.getResponseHeader( "content-type" );
  6. }
  7. }
  1. // while遍历动态数组(异步队列),总是获取第一个元素,直到数组为空,或遇到值为undefined的元素
  2. while( callbacks[ 0 ] ) {
  3. callbacks.shift().apply( context, args );
  4. }
  1. // while反复调用RegExp.exec(AJAX),能够否反复调是exec比re.test、String.match更加强大的原因,每次调用都将lastIndex属性设置到紧接着匹配字符串的字符位置
  2. while( ( match = rheaders.exec( responseHeadersString ) ) ) {
  3. responseHeaders[ match[1].toLowerCase() ] = match[ 2 ]; // 将响应头以key-value的方式存在responseHeaders中
  4. }
 

jQuery源码分析-jQuery中的循环技巧的更多相关文章

  1. {{jQuery源码分析}}jQuery对象初始化的多种传参数形式

    jQuery对象初始化的传参方式包括:1.$(DOMElement)2.$('<h1>...</h1>'), $('#id'), $('.class') 传入字符串, 这是最常 ...

  2. jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)

    在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...

  3. jQuery源码分析-each函数

    本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...

  4. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  5. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  6. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  7. js菜鸟进阶-jQuery源码分析(1)-基本架构

    导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的, ...

  8. jQuery源码分析系列(转载来源Aaron.)

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

  9. jQuery 源码分析(十八) ready事件详解

    ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件.用法: $(document).ready(fun) ;fun是一个函数,这样当DOM树加 ...

随机推荐

  1. Python练习笔记——字符串反转

    请输入一段字符串,不利用反转函数,编写一段代码,将其反转. def list_reverse(a): list_long = len(a) list_long_half = list_long // ...

  2. iptalbes -F

    iptalbes -F -F, --flush [chain] Flush the selected chain (all the chains in the table if none is giv ...

  3. vim 折叠

    zR 打开全部折叠 zr 打开当前折叠 zM 关闭全部折叠 zm 关闭当前折叠

  4. Python len() 方法

    描述 Python len() 方法返回对象(字符串.列表.元组.字典等)长度或项目个数. 语法 len() 方法语法: len(obj) 参数 obj -- 对象(字符串.列表.元组.字典等). 返 ...

  5. 使用NuGet发布自己的.NET NuGet 包( .NET Standard & Windows)

    发布自己的nuget包 STEP 1:获取API Key 首先,你需要到NuGet上注册一个新的账号,然后在My Account页面,获取一个API Key,或者是自建服务器上生成一个API Key( ...

  6. cocos2dx CallFunc注意事项

     CCDelayTime*delay=CCDelayTime::create(2); auto act = CallFunc::create([=](){   //func body ...  }); ...

  7. Java:集合,Collections工具类用法

    Collections工具类提供了大量针对Collection/Map的操作,总体可分为四类,都为静态(static)方法: 1. 排序操作(主要针对List接口相关) reverse(List li ...

  8. HDU 2444 The Accomodation of Students二分图判定和匈牙利算法

    本题就是先推断能否够组成二分图,然后用匈牙利算法求出最大匹配. 究竟怎样学习一种新算法呢? 我也不知道什么方法是最佳的了,由于看书本和大牛们写的匈牙利算法具体分析,看了几乎相同两个小时没看懂,最后自己 ...

  9. JBoss DataGrid的集群部署与訪问

    集群部署 JDG的缓存模式包含本地(Local)模式和集群(Clustered)模式.本项目採用多节点的Clustered模式部署.数据在多个节点的子集间进行复制.而不是同步拷贝到全部的节点. 使用子 ...

  10. Common Probability Distributions

    Common Probability Distributions Probability Distribution A probability distribution describes the p ...