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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
用javascript来实现动画导航效果的代码
Dec 16 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
跟我学习javascript的循环
Nov 18 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
javascript中对对层的控制
2006/12/29 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
JS中FormData类实现文件上传
2020/03/27 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
运动会跳远加油稿
2014/02/20 职场文书
保护黄河倡议书
2014/05/16 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers