jQuery each函数源码分析

jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大，下面就这个函数做了详细讲解：

代码 

/*!
* jQuery源码分析-each函数
* jQuery版本:1.4.2
*
* ----------------------------------------------------------
* 函数介绍
*
* each函数通过jQuery.extend函数附加到jQuery对象中：
* jQuery.extend({
* each: function() {}
* });
* 如果对jQuery.extend函数源码还不了解,可以参考《jQuery源码分析-extend函数》一文
*
* jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理
* jQuery.each方法可以为处理函数增加附带的参数(带参数与不带参数的回调使用方法不完全一致)
*
* ----------------------------------------------------------
* 使用说明
* each函数根据参数的类型实现的效果不完全一致：
* 1、遍历对象(有附加参数)
* $.each(Object, function(p1, p2) {
* this; //这里的this指向每次遍历中Object的当前属性值
* p1; p2; //访问附加参数
* }, ['参数1', '参数2']);
*
* 2、遍历数组(有附件参数)
* $.each(Array, function(p1, p2){
* this; //这里的this指向每次遍历中Array的当前元素
* p1; p2; //访问附加参数
* }, ['参数1', '参数2']);
*
* 3、遍历对象(没有附加参数)
* $.each(Object, function(name, value) {
* this; //this指向当前属性的值
* name; //name表示Object当前属性的名称
* value; //value表示Object当前属性的值
* });
*
* 4、遍历数组(没有附加参数)
* $.each(Array, function(i, value) {
* this; //this指向当前元素
* i; //i表示Array当前下标
* value; //value表示Array当前元素
* });
* ----------------------------------------------------------
*
*/
//jQuery.each(), $.each()
//@param {Object}|{Array} object 需要遍历处理的对象或数组
//@param {Function} callback 遍历处理回调函数
//@param {Array} args callback回调函数的附加参数
each: function(object, callback, args){
//当需要遍历的是一个对象时,name变量用于记录对象的属性名
var name,
//当需要遍历的是一个数组时,i变量用于记录循环的数组下标
i = 0,
//遍历数组长度,当需要遍历的对象是一个数组时存储数组长度
//如果需要遍历的是一个对象,则length === undefined
length = object.length,
//检查第1个参数object是否是一个对象
//根据object.length排除数组类型，根据isFunction排除函数类型(因为函数也是对象)
isObj = length === undefined || jQuery.isFunction(object);
//回调函数具有附加参数时,执行第一个分支
//if(!!args) {
if (args) {
//需要遍历的是一个对象
if (isObj) {
//遍历对象属性,name是对象的属性名,再函数顶部已声明
//许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量
for (name in object) {
//调用callback回调函数,且回调函数的作用域表示为当前属性的值
//如:callback() { this; //函数中的this指向当前属性值
//将each的第3个参数args作为回调函数的附加参数
if (callback.apply(object[name], args) === false) {
//如果在callback回调函数中使用return false;则不执行下一次循环
break;
}
}
}
//需要遍历的是一个数组
else {
//循环长度,循环变量i在函数顶部已定义
//循环变量的自增在循环内部执行
for (; i < length;) {
//调用callback函数,与上面注释的callback调用一致
//此处callback函数中的this指向当前数组元素
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
}
//回调函数没有附加参数时,执行第二个分支
else {
//需要遍历的是一个对象
if (isObj) {
//循环对象的属性名,name在函数顶部已定义
for (name in object) {
//调用callback回调函数
//在不带参数的对象遍历中,作用域表示为当前属性的值
//且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值
//我觉得这句代码修改一下会更好用：if(callback.call(object, name, object[name]) === false) {
if (callback.call(object[name], name, object[name]) === false) {
//如果在callback回调函数中使用return false;则不执行下一次循环
break;
}
}
}
//需要遍历的是一个数组
else {
//这里的for写法有点BT,解释为：
//var value = object[0];
//for(; i < length;) {
// if(false === callback.call(value, i, value)) {
// break;
// }
// value = object[++i];
//}
//同样,我觉得这里的代码稍加修改会更好用:
//for (; i < length && false !== callback.call(object, i, object[i++]);) {
//}
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {
}
}
}
//这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值
//但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改
//则这里返回的object是被修改后的对象或数组
return object;
}
赞 (0)

相关推荐

  • JQuery each()函数如何优化循环DOM结构的性能

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 复制代码 代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children('tbody'), tr

  • 浅析jQuery的链式调用之each函数

    话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子.浏览器的

  • jquery中map函数与each函数的区别实例介绍

    ​jquery中的each函数和map函数的用法看起来差不多,但其实还是有一点区别的. ​其中一个重要的区别是,each返回的是原来的数组,并不会新创建一个数组.而map方法会返回一个新的数组.如果在没有必要的情况下使用map,则有可能造成内存浪费. ​例如: var items = [1,2,3,4]; $.each(items, function() { alert('this is ' + this); }); var newItems = $.map(items, function(i)

  • 关于jquery中全局函数each使用介绍

    jquery 包含了两个each一个是 $().each 另一个是 $.each 区别就在于前一个是jquery对象的内置函数 而后一个 这是对象的遍历函数 一般用于ajax中获取不同的对象数据进行遍历以json为例 jquery 的getJSON 快捷方法可以便利的取得 指定url中的json文件 jquery 会内置的调用 js原生 的eval函数来解析json文本 转换成一个 js对象 然后通过each全局函数 进行遍历 以取得其中的值  语法 each(data,[params],fun

  • 模仿jQuery each函数的链式调用

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l

  • jQuery函数map()和each()介绍及异同点分析

    方法语法:map() map(callback) 为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中. 参数 callback (函数)回调函数,为包装集中的每个元素调用该函数. 比如,下面的代码将页面上所有div元素的id值收集到一个javascript数组中: 复制代码 代码如下: var iDs = $("div").map(function(){     return (this.id==undefined) ? null :this.id; }).g

  • jQuery中$.each()函数的用法引申实例

    语法: $.each( collection, callback(indexInArray, valueOfElement) ) 值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 forEach 方法部署到数组和 NodeList 中: if ( !Array.prototype.forEach )

  • jQuery each函数源码分析

    jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 代码 /*! * jQuery源码分析-each函数 * jQuery版本:1.4.2 * * ---------------------------------------------------------- * 函数介绍 * * each函数通过jQuery.extend函数附加到jQuery对象中: * jQuery.extend({ * each:

  • FilenameUtils.getName 函数源码分析

    FilenameUtils.getName 函数源码分析

    目录 一.背景 二.源码分析 2.1 问题1:为什么需要 NonNul 检查 ? 2.1.1 怎么检查的? 2.1.2 为什么要做这个检查呢? 2.2 问题2: 为什么不根据当前系统类型来获取分隔符? 三.Zoom Out 3.1 代码健壮性 3.2 代码严谨性 3.3 如何写注释 四.总结 一.背景 最近用到了 org.apache.commons.io.FilenameUtils#getName 这个方法,该方法可以传入文件路径,获取文件名. 简单看了下源码,虽然并不复杂,但和自己设想略有区

  • Vue中之nextTick函数源码分析详解

    1. 什么是Vue.nextTick()? 官方文档解释如下: 在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"&

  • vue parseHTML函数源码解析start钩子函数

    目录 正文 platformGetTagNamespace 源码 isForbiddenTag 函数 addIfCondition是什么 processIfConditions 源码 正文 接上章节:parseHTML 函数源码解析 AST 预备知识 现在我们就可以愉快的进入到Vue start钩子函数源码部分了. start: function start(tag, attrs, unary) { // check namespace. // inherit parent ns if ther

  • vue parseHTML函数源码解析 AST预备知识

    目录 正文 createASTElement函数 解析指令所用正则 parse 函数中的变量 正文 接上章节:parseHTML 函数源码解析AST 基本形成 在正式扎进Vue parse源码之前,我们先了解下他周边的工具函数, 这能帮我们快速的去理解阅读. 还记得我们在上章节讲的element元素节点的描述对象吗? var element = { type: 1, tag: tag, parent: null, attrsList: attrs, children: [] } 在源码中定义了一

  • vue parseHTML 函数源码解析

    vue parseHTML 函数源码解析

    目录 正文 函数开头定义的一些常量和变量 while 循环 textEnd ===0 parseStartTag 函数解析开始标签 总结: 正文 接上篇: Vue编译器源码分析AST 抽象语法树 function parseHTML(html, options) { var stack = []; var expectHTML = options.expectHTML; var isUnaryTag$$1 = options.isUnaryTag || no; var canBeLeftOpen

  • vue parseHTML 函数源码解析AST基本形成

    目录 AST(抽象语法树)? 子节点 Vue中是如何把html(template)字符串编译解析成AST 解析html 代码重新改造 接着解析 html (template)字符串 解析div AST(抽象语法树)? 在上篇文章中我们已经把整个词法分析的解析过程分析完毕了. 例如有html(template)字符串: <div id="app"> <p>{{ message }}</p> </div> 产出如下: { attrs: [&q

  • PHP中array_keys和array_unique函数源码的分析

    性能分析 从运行性能上分析,看看下面的测试代码: $test=array(); for($run=0; $run<10000; $run++) $test[]=rand(0,100); $time=microtime(true); $out = array_unique($test); $time=microtime(true)-$time; echo 'Array Unique: '.$time."\n"; $time=microtime(true); $out=array_k

  • Django contrib auth authenticate函数源码解析

    引言 django提供了一个默认的auth系统用于用户的登录和授权,并提供了一定的扩展性,允许开发者自行定义多个验证后台,每个验证后台必须实现authenticate函数,并返回None或者User对象. 默认的后台是django.contrib.auth.backends.ModelBackend,该后台通过用户名和密码进行用户的验证,以settings.AUTH_USER_MODEL作为模型.但是在实际的开发中,相信大家都不会固定的使用用户名以及同一个model进行验证,比如,不同的角色需要

  • Ruby实现命令行中查看函数源码的方法

    如果要查看 ActiveRecord 的 update_attribute 函数的源代码,一个比较常见的方法是直接在 Rails 源码中搜索 def update_attribute.博客 The Pragmatic Studio 介绍了一个更方便的技巧,在 Ruby 命令行中就能启动编辑器直接访问. 通过 Object#method 方法可以获得 update_attribute 方法的对象,而 Method#source_location 则返回这个方法定义的文件和位置.有了这个信息后,就能

随机推荐