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 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
js定时器实例分享
Dec 20 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 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的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python实现Kmeans聚类算法
2020/06/10 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python打印异常信息的两种实现方式
2019/12/24 Python
pytorch实现查看当前学习率
2020/06/24 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
我们的节日端午节活动方案
2014/03/02 职场文书
信息管理专业自荐书
2014/06/05 职场文书