jquery源码解析:each,makeArray,merge,grep,map详解
jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的。
jQuery.extend({
......
each: function( obj, callback, args ) { //$.each(arr , function(i,value){}),第三个参数用于内部调用。此方法就是来遍历数组的,然后取数组中的值进行显示。不能改变原数组arr,跟map一样,但是map返回新数组,而each返回原数组。这里跟原生的forEach和map的回调方法参数不一样,原生的回调方法中,第三个参数是原数组,可以在回调方法中改变原数组的值。但jQuery的回调方法,不会传第三个参数。
var value,
i = 0,
length = obj.length,
isArray = isArraylike( obj ); //是否是类数组或数组,json(不包括jQuery这种对象形式)返回false
if ( args ) { //jQuery内部使用
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
else {
for ( i in obj ) {
value = callback.apply( obj[ i ], args );
if ( value === false ) {
break;
}
}
}
}
else { //我们在外面调用时,执行的代码
if ( isArray ) { //如果是类数组
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] ); //回调方法返回false就停止循环
if ( value === false ) {
break;
}
}
}
else {
for ( i in obj ) { //如果是json对象
value = callback.call( obj[ i ], i, obj[ i ] );
if ( value === false ) {
break;
}
}
}
}
return obj;
},
trim: function( text ) { //core_trim是字符串的trim方法
return text == null ? "" : core_trim.call( text );
},
makeArray: function( arr, results ) { //把所有东西转换成数组,$.makeArray(json) -> [],第二个参数是给内部用的
var ret = results || [];
if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
//如果arr为数字123,这里会返回false,因为number不是类数组。但是如果是字符串"hello",Object会把它转成具有length的json对象,所以就返回true。字符串是有length属性的。
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
}
else { //如果传入123,就执行这里,把123push到数组中。假设有第二个参数,$.makeArray(123,{length:0}) ,那么就会出现[].push.call({length:0},123),这里我做了测试,是没有任何问题的,会变成{length:1,0:123}
core_push.call( ret, arr );
}
}
return ret;
},
inArray: function( elem, arr, i ) { //元素是否在arr数组中,从i位置开始找。core_indexOf=[].indexOf
return arr == null ? -1 : core_indexOf.call( arr, elem, i );
},
merge: function( first, second ) { //合并数组
var l = second.length,
i = first.length,
j = 0;
if ( typeof l === "number" ) { //第二个参数,可能不是数组或类数组,特殊json。第一个参数必须是。
for ( ; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
}
else {
while ( second[j] !== undefined ) { //普通json的情况,{0:"0",1:"1"},但必须是0,1,2...这种
first[ i++ ] = second[ j++ ];
}
}
first.length = i; //当第一个参数,不是数组时,比如是{0:"0",1:"1",length:2},length就需要手动改变
return first;
},
grep: function( elems, callback, inv ) {
//过滤得到一个新数组,$.grep(arr,function(value,index){ return value>2}),arr数组中大于2的,才会返回生成数组。也就是返回true时,才会返回此值生成数组,第三个参数,true,就代表相反的(小于等于2)返回生成数组
var retVal,
ret = [],
i = 0,
length = elems.length;
inv = !!inv; //转换成true or false,不传的时候是undefined,就会变成fase.
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i ); //转换成true or false
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
},
map: function( elems, callback, arg ) { //支持普通json,数组,类数组,特殊json(jQuery对象形式)
//$.map(arr,function(value,index){ return }),通过回调,把返回的值组成一个全新的数组,返回全新的数组。第三个参数内部调用
var value,
i = 0,
length = elems.length,
isArray = isArraylike( elems ), //数组和类数组都可以,jQuery对象形式也可以
ret = [];
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) { //回调返回的值不是null或者undefined,就存入新数组中
ret[ ret.length ] = value;
}
}
}
else { //普通json就执行这里,比如:{name:"chaojidan",age:25}
for ( i in elems ) {
value = callback( elems[ i ], i, arg );//callback("chaojidan",name)
if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
return core_concat.apply( [], ret );
//core_concat=[].concat,以防回调方法返回的是数组形式,那么就会出现复合数组,比如:ret = [[1],[2],[3]],通过concat([1],[2],[3]),合并,返回[1,2,3]
},
......
})
加油!
jquery源码解析:each,makeArray,merge,grep,map详解的更多相关文章
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- jQuery源码分析(九) 异步队列模块 Deferred 详解
deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
随机推荐
- Professional C# 6 and .NET Core 1.0 - Chapter 42 ASP.NET Web API
本文内容为转载,重新排版以供学习研究.如有侵权,请联系作者删除. 转载请注明本文出处: -------------------------------------------------------- ...
- Spring中Aspect的切入点的表达式定义细节
用过很多次切面aspect了,对于表达式总是记得很模糊,今天总结一下. 1.切面做如下设置则只会拦截返回值为String类型的方法 @Aspect public class MyInterceptor ...
- 通过Scanner从控制台获取数据
----------siwuxie095 Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据 Scanner类位于 java.util.Scanner 包中 Scanner ...
- 410. Split Array Largest Sum 把数组划分为m组,怎样使最大和最小
[抄题]: Given an array which consists of non-negative integers and an integer m, you can split the arr ...
- redis 面试题2
使用过Redis分布式锁么,它是什么回事? 先拿setnx来争抢锁,抢到之后,再用expire给锁加一个过期时间防止锁忘记了释放. 这时候对方会告诉你说你回答得不错,然后接着问如果在setnx之后执行 ...
- ubuntu14.04安装chromium以及flash插件
之前找了好几个方法都不还用,今天突然发现,还挺简单的.命令如下: sudo apt-get updatesudo apt-get install chromium-browser#sudo add-a ...
- jQuery自动截取文字长度,超过部分
<html> <head> <meta charset="utf-8"> <script src="js/jqu ...
- 白盒测试实践-任务进度-Day04
所使用静态代码检查工具 阿里巴巴Java开发代码检测IDE插件 小组成员 华同学.郭同学.覃同学.刘同学.穆同学.沈同学 任务进度 对大家完成各自任务情况进行询问后,以下是对小组成员完成任务进度的情况 ...
- CodeForces 342C Cupboard and Balloons (几何问题)
题意:给定一个 r 和 h,r 是上面那个半球的半径,h 是下面那个圆柱的高度,然后有一些半径为 r/2的气球,问你最多能放几个. 析:根据题意,很容易知道,先从下面往上放,两个两个的放,放到不能放的 ...
- sqpark编译时maven的pom文件内容(org.apachetype.maven.apachetypes:maven.archetypequickstat)
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...