读Zepto源码之IOS3模块

lavnFan 发布于2019-08-21 16:51 / 1726人阅读

摘要：用法与参数要理解这段代码，先来看一下的用法和参数用法参数回调函数，有如下参数上一个回调函数返回的值或者是初始值当前值当前值在数组中的索引调用的数组初始值，如果没有提供，则为数组的第一项。接下来，检测回调函数是否为，如果不是，抛出类型错误。

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.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 的数组

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 作为参数传递给回调函数，直至数组耗尽，然后将结果返回。

系列文章

《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)

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面

专线服务私有云读源码源码中文说明之源码编译模块 linux 模块源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88817.html

读Zepto源码之Stack模块

摘要：读源码系列文章已经放到了上，欢迎源码版本本文阅读的源码为改写原有的方法模块改写了以上这些方法，这些方法在调用的时候，会为返回的结果添加的属性，用来保存原来的集合。方法的分析可以看读源码之模块。 Stack 模块为 Zepto 添加了 addSelf 和 end 方法。读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的...

crossea 2019-08-21 17:03 评论0 收藏0
读Zepto源码之Form模块

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。 Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。读 Zepto 源码系列文章已...

陈江龙 2019-08-21 17:12 评论0 收藏0
读Zepto源码之fx_methods模块

摘要：所以模块依赖于模块，在引入前必须引入模块。原有的方法分析见读源码之样式操作方法首先调用原有的方法，将元素显示出来，这是实现动画的基本条件。如果没有传递，或者为值，则表示不需要动画，调用原有的方法即可。 fx 模块提供了 animate 动画方法，fx_methods 利用 animate 方法，提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块，在引入 fx_m...

junbaor 2019-08-21 16:59 评论0 收藏0
读Zepto源码之Data模块

摘要：的模块用来获取节点中的属性的数据，和储存跟相关的数据。获取节点指定的缓存值。如果存在，则删除指定的数据，否则将缓存的数据全部删除。为所有下级节点，如果为方法，则节点自身也是要被移除的，所以需要将自身也加入到节点中。 Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据，和储存跟 DOM 相关的数据。读 Zepto 源码系列文章已经放到了github上，欢...

wua_wua2012 2019-08-21 17:14 评论0 收藏0
读Zepto源码之Gesture模块

摘要：模块基于上的事件的封装，利用属性，封装出系列事件。这个判断需要引入设备侦测模块。然后是监测事件，根据这三个事件，可以组合出和事件。其中变量对象和模块中的对象的作用差不多，可以先看看读源码之模块对模块的分析。 Gesture 模块基于 IOS 上的 Gesture 事件的封装，利用 scale 属性，封装出 pinch 系列事件。读 Zepto 源码系列文章已经放到了github上，欢...

coolpail 2019-08-21 16:43 评论0 收藏0