前言

1.总体结构 √

2.构建函数 √

3.each功能函数实现 √

4.map功能函数实现 √

5.sizzle初步学习

6.attr功能函数实现

7.toggleClass功能函数实现(好伤)

8.val功能函数实现

9.ajax异步请求以及扩展学习

正文

如果仔细看日期你会发现今天写了两篇,是不是感觉奇怪为什么会爆发?因为这几天攒了好多学习资料准备写Blog,而且近期看到不少激励自己的东西因此激动不已的开始了今天的第二篇。

╮(╯▽╰)╭

根据当初的设定这篇应该是map函数了。

重新打开sublime然后载入jquery1.11.3

迅速的定位到了map。然后发现自己好像也从来没怎么用过Map=-=(泪目)。于是按规矩去官网看看文档


Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

看描述遍历当前对象的每一个元素,在其上执行回调函数,并产生一个包含返回值的jquery对象。该方法常用于获取dom元素集合的值或者设置值。首先自己解读下源码。


// arg is for internal usage only
map: function( elems, callback, arg ) {
var value,
i = 0,
length = elems.length,
isArray = isArraylike( elems ),
ret = []; // Go through the array, translating each of the items to their new values
if ( isArray ) { //判断是数组还是对象,数组用for循环,对象用for in遍历其属性.
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg ); if ( value != null ) {
ret.push( value ); //将每一个执行回调函数的元素的返回值添加到数组中。
}
} // Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg ); if ( value != null ) {
ret.push( value );
}
}
} // Flatten any nested arrays
return concat.apply( [], ret ); //这里是一个难点

思路其实很好理解。但难的其中一些写法能够深深的伤害到基础薄弱的我。比如

return concat.apply( [], ret )

对于concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

但是一般例子都是

var arr =[1,2,3];

var arr2 = [4,5];

arr.concat(arr2);//return [1,2,3,4,5]

那为毛是apply的调用方式呢?无法理解于是继续查。

查看源码发现在开头

var deletedIds = [];

var slice = deletedIds.slice;

var concat = deletedIds.concat;

...

delet 大专栏  Jquery 实现原理深入学习(3)edIds 看名字好像只是一个中间的变量,而且翻了一下上下文,并没有啥赋值。那么姑且可以当做空数组看待。

然后看了下书上的。1.7的版本是这样的

var ret = [];
...
ret[ret.length] = value;
... return ret.concat.apply([],ret);

在空数组[]上调用方法concat扁平化结果集ret中的元素。看到这个解释我的表情是这样的(⊙o⊙)…

扁平化结果集是神马。。。

虽然能大概理解但是我还是google了一下。

关键作用的是apply,因为apply的第二个参数把ret的数组分成多个参数传入给concat

作用:把二维数组转化为一维数组

并且在其它地方找到了一个例子

$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
//输出:[0, 1, 1, 2, 2, 3]
//如果是return ret的话,输出将会是:[[0,1], [1,2], [2,3]]

其实这个应该是自己慢慢试出来,不过没关系,我们可以弥补一下去测试看看。

发现结果确实如此。

然后呢,按理说应该到这里结束了,但是我”突然”想起underscore里好像也有map的说于是。。。

   _.map = _.collect = function(obj, iterator, context) {
// 用于存放返回值的数组
var results = [];
if(obj == null)
return results;
// 优先调用宿主环境提供的map方法
if(nativeMap && obj.map === nativeMap)
return obj.map(iterator, context);
// 迭代处理集合中的元素
each(obj, function(value, index, list) {
// 将每次迭代处理的返回值存储到results数组
results[results.length] = iterator.call(context, value, index, list);
});
// 返回处理结果
if(obj.length === +obj.length)
//如果是数组的话,一定要返回相同长度的新数组
results.length = obj.length;
return results;
};

可以发现Underscore依旧那么省。。。而且还那么自信,直接把之前的each拿过来用。。。

而且看它的results结果怪怪的。于是在jsfiddle上加载最新版本的underscore。并执行

console.log(_.map([1, 2, 3], function(n){ return [ n, n + 1 ]; }));

发现结果如上图,并没有做jquery的扁平化结果集。

嗯,两者好坏我现在是没资格评论。不过按照写法而言,更喜欢underscore的。

今天就到这里。现在时间晚上11:11。好虐的时间。

最新文章

  1. SqlLocalDB使用笔记
  2. 关于ebox
  3. python_way ,day25 CMDB_models (数据库设计)
  4. easyui里弹窗的两种表现形式
  5. 指令随笔之:tail、cat、scp、&amp;、&amp;&amp;、;、|、&gt;、&gt;&gt;
  6. Interview----2 sum
  7. DOS命令之----Netstat+Task以及相关使用
  8. Intel HAXM
  9. ios Swift 备忘录
  10. Python之美[从菜鸟到高手]--Python垃圾回收机制及gc模块详解
  11. cocos2dx 文件处理
  12. thinkphp中的_get,_post,_request
  13. linux下分割和重组文件
  14. [Swift]LeetCode1010. 总持续时间可被 60 整除的歌曲 | Pairs of Songs With Total Durations Divisible by 60
  15. 接口隔离原则(ISP)
  16. Java中运行时异常和非运行时异常什么鬼?
  17. docker 下载加速
  18. 2-nginx 安装
  19. ASP.Net中自定义Http处理及应用之HttpModule篇
  20. 配置Gitlab Push自动触发jenkins构建

热门文章

  1. leetcode腾讯精选练习之除自身以外数组的乘积(十)
  2. SLAM领域资源链接
  3. 磁力搜索导航,MagnetW将搜索结果格式化统一显示
  4. 01 语言基础+高级:1-7 异常与多线程_day07 【线程池、Lambda表达式】
  5. JavaEE基础(01):Servlet实现方式,生命周期执行...
  6. TPO3-1Architecture
  7. 903A. Hungry Student Problem#饥饿的学生(暴力&amp;双层枚举)
  8. [ZJOI2019]浙江省选(半平面交)
  9. 搜刮一些开源项目的APP
  10. springCloud负载均衡Ribbon和Feign的区别