读Zepto源码之Gesture模块

coolpail 发布于2019-08-21 16:43 / 2269人阅读

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

Gesture 模块基于 IOS 上的 Gesture 事件的封装，利用 scale 属性，封装出 pinch 系列事件。

读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

《reading-zepto》

整体结构

;(function($){
  if ($.os.ios) {
    var gesture = {}, gestureTimeout

    $(document).bind("gesturestart", function(e){
     ...
    }).bind("gesturechange", function(e){
      ...
    }).bind("gestureend", function(e){
     ...
    })

    ;["pinch", "pinchIn", "pinchOut"].forEach(function(m){
      $.fn[m] = function(callback){ return this.bind(m, callback) }
    })
  }
})(Zepto)

注意这里有个判断 $.os.ios ，用来判断是否为 ios 。这个判断需要引入设备侦测模块 Detect 。这个模块利用 userAgent 来进行设备侦测，里面是一大堆正则表达式，所以这个模块后面是不打算分析的了。

然后是监测 gesturestart 、gesturechange、 gestureend 事件，根据这三个事件，可以组合出 pinch 、pinchIn 和 pinchOut 事件。其实就是缩小和放大的手势操作。

其中变量 gesture 对象和 Touch 模块中的 touch 对象的作用差不多，可以先看看《读Zepto源码之Touch模块》对 Touch 模块的分析。

parentIfText

function parentIfText(node){
  return "tagName" in node ? node : node.parentNode
}

这个辅助方法是获取目标节点，如果节点不是元素节点，则用父节点作为目标节点。如果事件在文本节点或者伪类元素上触发时，会出现不是元素节点的情况。

事件 gesturestart

bind("gesturestart", function(e){
  var now = Date.now(), delta = now - (gesture.last || now)
  gesture.target = parentIfText(e.target)
  gestureTimeout && clearTimeout(gestureTimeout)
  gesture.e1 = e.scale
  gesture.last = now
})

如 Touch 模块一样，在 gesturestart 时，也用 delta 来记录两次 start 之间的时间间隔，用 gesture.target 来保存目标元素，e1 是起点时的缩放值。

gesturechange

bind("gesturechange", function(e){
  gesture.e2 = e.scale
})

在 gesturechange 时，更新终点 guesture.e2 的缩放值。

gestureend

if (gesture.e2 > 0) {
  Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger("pinch") &&
    $(gesture.target).trigger("pinch" + (gesture.e1 - gesture.e2 > 0 ? "In" : "Out"))
  gesture.e1 = gesture.e2 = gesture.last = 0
} else if ("last" in gesture) {
  gesture = {}
}

如果 gesture.e2 存在（不可能有小于 0 的情况吧？），在起点的缩放值和终点的缩放值不相同的情况下，触发 pinch 事件；如果起点的缩放值比终点的缩放值大，则继续触发 pinchIn 事件，则缩小效果；如果起点的缩放值比终点的缩放值小，则继续触发 pinchOut 事件，即放大效果。

最终将 e1 、 e2 和 last 都设置为 0 。

在 last 不存在的情况下（在调用 preventDefault 时），将 gesture 清空。

系列文章

读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模块

参考

指尖下的js —— 多触式web前端开发之三：处理复杂手势

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

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

作者：对角另一面

云服务器 GPU云服务器读源码源码中文说明之 Gesture 源码编译模块

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

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

读Zepto源码之Touch模块

摘要：在触发事件前，先将保存定时器的变量释放，如果对象中存在，则触发事件，保存的是最后触摸的时间。如果有触发的定时器，清除定时器即可阻止事件的触发。其实就是清除所有相关的定时器，最后将对象设置为。进入时，立刻清除定时器的执行。大家都知道，因为历史原因，移动端上的点击事件会有 300ms 左右的延迟，Zepto 的 touch 模块解决的就是移动端点击延迟的问题，同时也提供了滑动的 swip...

Prasanta 2019-08-22 11:11 评论0 收藏0
读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源码之IOS3模块

摘要：用法与参数要理解这段代码，先来看一下的用法和参数用法参数回调函数，有如下参数上一个回调函数返回的值或者是初始值当前值当前值在数组中的索引调用的数组初始值，如果没有提供，则为数组的第一项。接下来，检测回调函数是否为，如果不是，抛出类型错误。 IOS3 模块是针对 IOS 的兼容模块，实现了两个常用方法的兼容，这两个方法分别是 trim 和 reduce 。读 Zepto 源码系列文章...

lavnFan 2019-08-21 16:51 评论0 收藏0