读Zepto源码之Gesture模块

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 来进行设备侦测,里面是一大堆正则表达式,所以这个模块后面是不打算分析的了。

然后是监测 gesturestartgesturechangegestureend 事件,根据这三个事件,可以组合出 pinchpinchInpinchOut 事件。其实就是缩小和放大的手势操作。

其中变量 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 事件,即放大效果。

最终将 e1e2last 都设置为 0

last 不存在的情况下(在调用 preventDefault 时),将 gesture 清空。

系列文章

  1. 读Zepto源码之代码结构
  2. 读Zepto源码之内部方法
  3. 读Zepto源码之工具函数
  4. 读Zepto源码之神奇的$
  5. 读Zepto源码之集合操作
  6. 读Zepto源码之集合元素查找
  7. 读Zepto源码之操作DOM
  8. 读Zepto源码之样式操作
  9. 读Zepto源码之属性操作
  10. 读Zepto源码之Event模块
  11. 读Zepto源码之IE模块
  12. 读Zepto源码之Callbacks模块
  13. 读Zepto源码之Deferred模块
  14. 读Zepto源码之Ajax模块
  15. 读Zepto源码之Assets模块
  16. 读Zepto源码之Selector模块
  17. 读Zepto源码之Touch模块

参考

License

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

作者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

Unity的RuntimeInitializeOnLoadMethod属性初探

Unity 5.0开始增加了RuntimeInitializeOnLoadMethodAttribute,这样就很方便在游戏初始化之前做一些额外的初始化工作,比...

531
来自专栏圣杰的专栏

Asp.net mvc 知多少(七)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

2255
来自专栏互联网杂技

JavaScript定时器:setTimeout与setInterval 定时器与异步循环数组

深入了解一下 关于JavaScript定时器的知识; setTimeout与setInterval简述 setTimeout与setInterval使用方法基...

3616
来自专栏前端大白专栏

react 的state数据更新机制

3947
来自专栏Spark学习技巧

2,StructuredStreaming的事件时间和窗口操作

1964
来自专栏Google Dart

开始使用-编写你的第一个Flutter应用程序 顶

这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码和基本编程概念(如变量,循环和条件),则可以完成本教程。 您不需要以前使用Dart或移...

912
来自专栏码字搬砖

sqoop原理

sqoop,各位看官基本上都了解或者听说过,小二就不进行废话了。另外基于国内大部分用的为CDH,小二就想说一点:CDH中的sqoop2其实是apace版的sqo...

3091
来自专栏大前端_Web

几种方法实现ajax请求内容时使用浏览器后退和前进功能

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1772
来自专栏黄Java的地盘

提高开发效率之VS Code基础配置篇

VS Code可以通过名为代码片段的功能像编辑器中插入一段指定的文本,具体操作步骤为首选项->用户代码片段->新建全局代码片段。

2232
来自专栏Ryan Miao

eclipse中断点调试debug

几乎没有用过debug模式,每次想要知道结果都是sysou一下。记得曾经问乱码问题,jfinal说打断点调试看在哪里出错。简单记下普通调试。 1.在需要查看的地...

3358

扫码关注云+社区