读Zepto源码之IOS3模块
IOS3
模块是针对 IOS
的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim
和 reduce
。
读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto
源码版本
本文阅读的源码为 zepto1.2.0
GitBook
trim
if (String.prototype.trim === undefined) // fix for iOS 3.2
String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, '') }
看注释, trim
是为了兼容 ios3.2
的。
也是常规的做法,如果 String
的 prototype
上没有 trim
方法,则自己实现一个。
实现的方式也简单,就是用正则将开头和结尾的空格去掉。^\s+
这段是匹配开头的空格,\s+$
是匹配结尾的空格。
reduce
// For iOS 3.x
// from https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/reduce
if (Array.prototype.reduce === undefined)
Array.prototype.reduce = function(fun){
if(this === void 0 || this === null) throw new TypeError()
var t = Object(this), len = t.length >>> 0, k = 0, accumulator
if(typeof fun != 'function') throw new TypeError()
if(len == 0 && arguments.length == 1) throw new TypeError()
if(arguments.length >= 2)
accumulator = arguments[1]
else
do{
if(k in t){
accumulator = t[k++]
break
}
if(++k >= len) throw new TypeError()
} while (true)
while (k < len){
if(k in t) accumulator = fun.call(undefined, accumulator, t[k], k, t)
k++
}
return accumulator
}
用法与参数
要理解这段代码,先来看一下 reduce
的用法和参数:
用法:
arr.reduce(callback[, initialValue])
参数:
- callback: 回调函数,有如下参数
- accumulator: 上一个回调函数返回的值或者是初始值(
initialValue
) - currentValue: 当前值
- currentIndex: 当前值在数组中的索引
- array: 调用
reduce
的数组
- accumulator: 上一个回调函数返回的值或者是初始值(
- initialValue: 初始值,如果没有提供,则为数组的第一项。如果数组为空数组,而又没有提供初始值时,会报错
检测参数
if(this === void 0 || this === null) throw new TypeError()
var t = Object(this), len = t.length >>> 0, k = 0, accumulator
if(typeof fun != 'function') throw new TypeError()
if(len == 0 && arguments.length == 1) throw new TypeError()
首先检测是否为 undefined
或者 null
,如果是,则报类型错误。这里有一点值得注意的,判断是否为 undefined
时,用了 void 0
的返回值,因为 void
操作符返回的结果都为 undefined
,这是为了避免 undefined
被重新赋值,出现误判的情况。
接下来,将数组转换成对象,用变量 t
来保存,后面会看到,遍历用的是 for...in
来处理。为什么不直接用 for
来处理数组呢?因为 reduce
不会处理稀疏数组,所以转换要转换成对象来处理。
数组长度用 len
来保存,这里使用了无符号位右移操作符 >>>
,确保 len
为非负整数。
用 k
来保存当前索引,accumulator
为返回值。
接下来,检测回调函数 fun
是否为 function
,如果不是,抛出类型错误。
在数组为空,并且又没有提供初始值(即只有一个参数 fun
)时,抛出类型错误。
accumulator初始值
if(arguments.length >= 2)
accumulator = arguments[1]
else
do{
if(k in t){
accumulator = t[k++]
break
}
if(++k >= len) throw new TypeError()
} while (true)
如果参数至少有两项,则 accumulator
的初始值很简单,就是 arguments[1]
,即 initialValue
。
如果没有提供初始值,则迭代索引,直到找到在对象 t
中存在的索引。注意这里用了 do...while
,所以最终结果,要么是报类型错误,要么 accumulator
能获取到值。
这段还巧妙地用了 ++k
和 k++
。如果 k
在对象 t
中存在时,则赋值给 accumulator
后 k
再自增,否则用 k
自增后再和 len
比较,如果超出 len
的长度,则报错,因为不存在下一个可以赋给 accumulator
的值。
返回结果
while (k < len){
if(k in t) accumulator = fun.call(undefined, accumulator, t[k], k, t)
k++
}
return accumulator
要注意,如果没有提供初始值时,k
是自增后的值,即不再需要处理数组的第一个值。
到这里问题就比较简单了,就是 while
循环,用 accumulator
保存回调函数返回的值,在下一次循环时,再将 accumulator
作为参数传递给回调函数,直至数组耗尽,然后将结果返回。
系列文章
系列文章
- 读Zepto源码之代码结构
- 读Zepto源码之内部方法
- 读Zepto源码之工具函数
- 读Zepto源码之神奇的$
- 读Zepto源码之集合操作
- 读Zepto源码之集合元素查找
- 读Zepto源码之操作DOM
- 读Zepto源码之样式操作
- 读Zepto源码之属性操作
- 读Zepto源码之Event模块
- 读Zepto源码之IE模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Assets模块
- 读Zepto源码之Selector模块
- 读Zepto源码之Touch模块
- 读Zepto源码之Gesture模块
附文
参考
License
署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)
作者:对角另一面
读Zepto源码之IOS3模块的更多相关文章
- 读Zepto源码之Fx模块
fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能,在 fx 模块中,只做了事件和样式浏览器前缀的补全,没有做太多的兼容.对于不支持 CSS3 过渡和动画的, Zepto ...
- 读Zepto源码之fx_methods模块
fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法.所以 fx_methods 模块依赖于 fx 模块,在引入 fx_methods ...
- 读Zepto源码之Stack模块
Stack 模块为 Zepto 添加了 addSelf 和 end 方法. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 ...
- 读Zepto源码之Form模块
Form 模块处理的是表单提交.表单提交包含两部分,一部分是格式化表单数据,另一部分是触发 submit 事件,提交表单. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之Data模块
Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据,和储存跟 DOM 相关的数据. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading ...
- 读Zepto源码之Callbacks模块
Callbacks 模块并不是必备的模块,其作用是管理回调函数,为 Defferred 模块提供支持,Defferred 模块又为 Ajax 模块的 promise 风格提供支持,接下来很快就会分析到 ...
- 读Zepto源码之Deferred模块
Deferred 模块也不是必备的模块,但是 ajax 模块中,要用到 promise 风格,必需引入 Deferred 模块.Deferred 也用到了上一篇文章<读Zepto源码之Callb ...
- 读Zepto源码之Ajax模块
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之Selector模块
Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器. 在阅读本篇文章之前,最好先阅读<读Zept ...
随机推荐
- python汉字输出编码问题
python中文输出乱码问题困扰了多少初学者,我在这方面栽了不知道多少跟头.现在我把我碰到的问题和解决的方法写出来与大家分享一下: 1输出乱码 所谓的乱码是指“鎴戞槸涓枃瀛楃涓”这样的内容.为什么 ...
- VS2015企业版和专业版永久密匙
专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV
- Ubuntu部署可视化爬虫Portia2.0环境
部署portia环境官方文档给出的方法太过简单,对于初学者来说是很难根据那一两行字成功部署portia环境的.对于部署portia这只可爱的爬虫的过程还是有很多坑的,主要写一篇portia2.0版本的 ...
- Java中ArrayList remove会遇到的坑
前言 平时最常用的莫过于ArrayList和HashMap了,面试的时候也是问答的常客.先不去管容量.负载因子什么的,就是简单的使用也会遇到坑. Remove 元素 经常遇到的一个场景是:遍历list ...
- 第3阶段——内核启动分析之start_kernel初始化函数(5)
内核启动分析之start_kernel初始化函数(init/main.c) stext函数启动内核后,就开始进入start_kernel初始化各个函数, 下面只是浅尝辄止的描述一下函数的功能,很多函数 ...
- 第3阶段——内核启动分析之make uImage编译内核(3)
目标: 通过分析makefile,明白make uImage如何编译内核 把整个内核的makefile分成三类(makefile资料文档在linux-2.6.22.6/Documentation/bu ...
- Angular+ionic2 web端 启动程序出现短暂 白屏或黑屏 的处理小妙招
在ionic2项目启动是会出现短暂的白屏或者黑屏,虽然很短,但是用户体验不太好.上网查了相关的资料,都是针对打包APP的解决办法,针对浏览器端使用的项目没有效果,所以自己写了样式,巧妙的避开这个问题, ...
- Navicat连接oracle数据出现的oci问题
为了用navicat操作数据库,我安装了navicat,安装完后可以连接oracle,mysql,sql service,sqlite,所以这个工具非常好用. 但是在连接数据库的时候报错了:" ...
- 转:深入Java集合学习系列:HashMap的实现原理
1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现(Hashtable跟HashMap很像,唯一的区别是Hashtalbe中的方法是线程安全的,也就是同步的).此实现提供所 ...
- 【Socket编程】通过Socket实现TCP编程
通过Socket实现TCP编程 Socket通信 : 1.TCP协议是面向对象连接.可靠的.有序的,以字节流的方式发送数据. 2.基于TCP协议实现网络通信的类: 客户端----Socket类 服务器 ...