Jquery 实现原理深入学习(3)
前言
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。好虐的时间。
Jquery 实现原理深入学习(3)的更多相关文章
- jQuery内部原理和实现方式浅析
这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQ ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- 笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习
笔记:FastAdmin 之 jQuery 选择器 $("[name$='[]']", form) 学习 $("[name$='[]']", form)这个是什 ...
- JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- Windows原理深入学习系列-信任等级检查
这是[信安成长计划]的第 23 篇文章 0x00 目录 0x01 介绍 0x02 逆向分析 Win10_x64_20H2 0x03 WinDBG 0x04 参考文章 在之前的时候,一直以为 SACL ...
- Windows原理深入学习系列-强制完整性检查
这是[信安成长计划]的第 24 篇文章 0x00 目录 0x01 介绍 0x02 逆向分析 Win10_x64_20H2 0x03 总结 0x04 参考文章 最近因为一些事情,拖更了三个周,大家见谅啊 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
- jQuery中事件的学习
刚学习了jQuery中的事件,主要通过bind(),toggle(),hover()来主要实现,下面先说一说关于bind的想关要点. 1.bind方法. bind方法的主要参数为bind(type,f ...
- jquery ui draggable,droppable 学习总结
刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...
随机推荐
- SLAM领域资源链接
半闲居士高翔博客: https://www.cnblogs.com/gaoxiang12/ 视觉大佬冯兵博客: http://www.fengbing.net/ SLAMCN http://www.s ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Activity组件(二):通过显式意图和隐式意图来跳转至第三方应用
一.显式意图来跳转到第三方应用 /** * 这个方法会在点击按钮的时候执行 * @param view */ public void skip2Browser(View view){ Log.d(TA ...
- CodeForces 998B Cutting(贪心)
https://codeforces.com/problemset/problem/998/B 简单贪心题 代码如下: #include <stdio.h> #include <st ...
- sphinx转pdf显示中文
在conf.py中 修改, 加入 ctex包 latex_elements = { # The paper size ('letterpaper' or 'a4paper'). #'papersize ...
- 一张图看懂三维GIS
- xcode7 上传APPStore错误ERROR ITMS-90474: iPad Multitasking support requires these orientations
在使用Xcode7 上传AppStore时候发现ERROR ITMS-90474错误.报错描述如下: ERROR ITMS-90474: “Invalid Bundle. iPad Multitask ...
- 系统学习javaweb补充1----HTML常用语句
HTML 常用语句 一.单行文本框语法格式 <input type="text" name="输入信息的名字" value="输入信息的值&qu ...
- Dangal 观影感受,(摘录)
===================================================================================== 引用: https://ww ...
- Java类的三大特征
1.三大特征是封装.继承和多态 2.封装 特点: 需要修改属性的访问控制符为private: 创建getter/setter方法用于属性的读写: 在getter/setter方法中加入属性控制语句,用 ...