jQuery源码分析之jQuery中的循环技巧详解


Posted in Javascript onSeptember 06, 2014

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景。具体分析如下:

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

希望本文所述对大家jQuery的WEB程序设计有所帮助。

Javascript 相关文章推荐
JS中处理与当前时间间隔的函数代码
May 23 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 #Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 #Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 #Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 #Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 #Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 #Javascript
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
pandas数据集的端到端处理
2019/02/18 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
会计职业生涯规划书
2014/01/13 职场文书
副总经理岗位职责
2014/03/16 职场文书
中学生英语演讲稿
2014/04/26 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
工作收入证明范本
2015/06/12 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis