读Zepto源码之IOS3模块
IOS3
模块是针对 IOS
的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim
和 reduce
。
读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto
源码版本
本文阅读的源码为 zepto1.2.0
GitBook
《reading-zepto》
trim
if (String.prototype.trim === undefined) // fix for iOS 3.2String.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, accumulatorif(typeof fun != 'function') throw new TypeError()if(len == 0 && arguments.length == 1) throw new TypeError()if(arguments.length >= 2)accumulator = arguments[1]elsedo{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]
elsedo{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
作为参数传递给回调函数,直至数组耗尽,然后将结果返回。
系列文章
《reading-zepto》
系列文章
- 读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模块
附文
- 译:怎样处理 Safari 移动端对图片资源的限制
参考
- Array.prototype.reduce()
License
署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
读Zepto源码之IOS3模块相关推荐
- 读Zepto源码之Deferred模块
Deferred 模块也不是必备的模块,但是 ajax 模块中,要用到 promise 风格,必需引入 Deferred 模块.Deferred 也用到了上一篇文章<读Zepto源码之Callb ...
- 读Zepto源码之Ajax模块 1
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- zepto ajax php实例,读Zepto源码之Ajax模块
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...
- 读 zepto 源码之工具函数
对角另一面 读 zepto 源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目 ...
- 读zepto源码之工具函数
2019独角兽企业重金招聘Python工程师标准>>> Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.e ...
- 读Zepto源码之代码结构
虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧. 源码版本 本文阅读的源 ...
- Zepto源码分析-event模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- 试读angular源码第三章:初始化zone
直接看人话总结 前言 承接上一章 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 文章列表 试读angular源码第一章:开场与platformBro ...
- nginx源码分析之模块初始化
在nginx启动过程中,模块的初始化是整个启动过程中的重要部分,而且了解了模块初始化的过程对应后面具体分析各个模块会有事半功倍的效果.在我看来,分析源码来了解模块的初始化是最直接不过的了,所以下面主要 ...
最新文章
- SpringBoot thymeleaf使用方法,thymeleaf模板迭代
- 北京冬奥会“特许上新日”迎春节 将集中上市多款年味产品
- burpsuite https 社区版_微软推出Visual Studio 2019 RC版 正式版预计四月到来
- #在android studio中维护日程管理系统
- eclipse输入中文为繁体字
- pta龟兔赛跑Java_PTA-龟兔赛跑
- jQuery动态增加表格一行和删除一行
- 德国拜尔集团迎来人工智能专家--李飞飞
- 在线考试新入.html,JSP+SSM+MySql实现的在线考试系统毕设指导思路模板
- 初识EntityFramework6【转】
- 拦截器手动添加spring注入方法
- windows11升级安装失败怎么办,电脑如何正确安装win11
- antimalware可以关闭吗_微信小程序可以关闭吗?如何关闭?
- 合并报表编制采用的理论_跟我一起学合并报表之——长期股权投资的抵消处理...
- 《排序算法篇》快排的递归与非递归
- 幼儿园故事导入语案例_幼儿园老师上课常用导入语 课前活跃气氛用这11种方法就对了...
- docker基础操作
- 51NOD - 1677treecnt
- 数据库字段属性的详解
- 零停机给Kubernetes集群节点打系统补丁