`
nuysoft
  • 浏览: 516366 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
91bd5d30-bd1e-3b00-9210-87db1cca0016
jQuery技术内幕
浏览量:198596
社区版块
存档分类
最新评论

[原创] jQuery源码分析-jQuery中的循环技巧

阅读更多
作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com    
声明:本文为原创文章,如需转载,请注明来源并保留原文链接。
前记:本文收集了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中
}

 
13
2
分享到:
评论
6 楼 it_boy1986 2013-04-18  
奥巴马 写道
拉登
5 楼 it_boy1986 2013-04-18  
刘德华 写道
我看好你哟!!~~~~~~~~~~~~~~~~

测试
4 楼 nuysoft 2011-11-24  
晨曦的朝阳 写道
简单补充一点:
for ( type in events ) { 
}
上面这种循环有个不好的地方就是会把原型的属性和方法也给遍历出来,所以如果使用
这种方式,经常会结合obj.hasOwnProperty来进行判断。

thx
3 楼 晨曦的朝阳 2011-11-24  
简单补充一点:
for ( type in events ) { 
}
上面这种循环有个不好的地方就是会把原型的属性和方法也给遍历出来,所以如果使用
这种方式,经常会结合obj.hasOwnProperty来进行判断。
2 楼 ywxowen999 2011-10-28  
楼主总结的很到位,收益了。
1 楼 zui4yi1 2011-10-27  
学习了,这么多技巧

相关推荐

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

    主要介绍了jQuery源码中的循环技巧,包括各类选择、判断、遍历等等操作,非常实用的技巧,需要的朋友可以参考下

    jQuery 源码分析笔记(6) jQuery.data

    data模块是一个比较有趣的功能,可以为任意的Element 添加额外的数据。而且处理了循环引用和内存泄漏的问题。API非常简单,就是.data(key, value)用来保存,.data(key)用开查询数据。

    jQuery源码解读之hasClass()方法分析

    本文较为详细的分析了jQuery源码解读之hasClass()方法。分享给大家供大家参考。具体分析如下: 代码如下:jQuery.fn.extend({  hasClass: function( selector ) { //将要检查的类名selector赋值给className, l为...

    《精通Javascript+jQuery》光盘源码

     2.7 循环语句  2.7.1 while语句  2.7.2 do…while语句  2.7.3 for语句  2.7.4 break和continue语句  2.7.5 for…in语句  2.7.6 实例:九九乘法表  2.8 函数  2.8.1 定义和调用函数  2.8.2 用...

    jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】

    主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

    jQuery源码中的chunker 正则过滤符分析

    :.|\r|\n)*)/g, 这是Jq中最长的一个正则了,也研究了很久,一直很懵懂,感觉还是通过调试,然后一步一步的分析值理解起来比较容易, 我尝试做成图形比较直观一点,以不同的颜色区分了一下,如下图: 分组一是通过...

    jQuery控制li上下循环滚动插件用法实例(附demo源码下载)

    主要介绍了jQuery控制li上下循环滚动插件用法,结合实例形式分析了jQuery循环滚动插件的实现技巧与使用方法,并附带demo源码供读者下载参考,需要的朋友可以参考下

    C程序设计语言(第2版·新版中文)

    linux的内核及其内核源码分析U-Boot PoorSakura vol.4 中文补丁(雯雅婷4 汉化补丁) 嵌入式系统构件基于arm sqlserver2005技术内幕:t-sql程序设计part1(中文完整版分4份下) C# 编程实例与技巧 本周上传用户...

    jQuery选择器源码解读(五):tokenize的解析过程

    以下分析基于jQuery-1.10.2.js版本。 下面将以$(“div:not(.class:contain(‘span’)):eq(3)”)为例,说明tokenize和preFilter各段代码是如何协调完成解析的。若想了解tokenize方法和preFilter类的每行代码的详细...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    堡垒机源码讲解 堡垒机项目表结构设计与实现 自动创建表对象 权限分组与数据初始化 第14周 开课介绍 前端技术概要 今日内容概要 Html本质以及在web程序中的作用 html的head内标签 html的body内标签之图标、换行及...

    千峰python课件笔记+源码 (凯哥)

    千锋python基础教程:3、字符串与循环中的while '千锋python基础教程:4、布尔&list;与条件循环语句与trutle' '千锋python基础教程:5、元组&字符串&字典' 千锋python基础教程:6、函数基础 '千锋python基础教程:...

    python入门到高级全栈工程师培训 第3期 附课件代码

    02 jquery循环方法和attr,prop方法 03 jquery模态对话框与clone的应用 04 jqueryCSS操作之offsets,position以及scrolltop 05 jquery事件绑定与事件委托 06 jquery动画效果 07 jquery扩展与插件 08 jquery扩展补充 09...

    PHP100视频教程全集112集BT种子【PHP经典】

    PHP100视频教程2:PHP的数据类型与源码调试 PHP100视频教程3:常用PHP运算类型介绍与应用 PHP100视频教程4: PHP条件语句介绍与应用 PHP100视频教程5:PHP循环语句的介绍与应用 PHP100视频教程6:PHP数组的创建...

    php课程(共100多节)

    95:SVN (Subversion) 应用与技巧 96:PHP程序员经典面试&笔试题目解析(上) 97:PHP程序员经典面试&笔试题目解析(下) 98:PHP会员权限交叉多类型的控制(上) 99:PHP会员权限交叉多类型的控制(下) 100:PHP...

    大数据培训课程安排.pdf

    主要技术包括:JavaScript、Jquery、注解反射⼀起使⽤,XML以及XML解析、解析dom4j、jxab、jdk8.0新特性、SVN、 Maven、easyui 4. 描述如下: 前两个阶段的基础上化静为动,可以实现让我们⽹页内容更加的丰富,当然...

Global site tag (gtag.js) - Google Analytics