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相册效果代码(点击创建即可)
Apr 16 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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通用防注入程序 推荐
2011/02/26 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
玩转方法:call和apply
2014/05/08 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
js重写方法的简单实现
2016/07/10 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
《望庐山瀑布》教学反思
2014/04/22 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
解除劳动合同证明书
2014/09/26 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书