René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"移动端手势库AlloyFinger源码分析","articleBody":"## 简介\r\n\r\nAlloyFinger 是由腾讯前端团队 AlloyTeam 出品的一个小巧轻量级的移动端手势库，整个手势库的代码不超过400行，却支持绝大多数的手势操作，能够满足日常的开发需求。AlloyFinger传送门： [AlloyFinger](https://github.com/AlloyTeam/AlloyFinger)。\r\n\r\n## JavaScript 移动端触摸事件\r\n\r\n手机移动端浏览器提供了4种触摸事件：touchstart，touchmove，touchend，touchcancel，分别对应的是手指触点刚接触屏幕时触发事件，手指触点在屏幕上移动时触发事件，手指触点移开屏幕时触发事件以及被系统中断时触发事件（按 Home 键返回主屏等操作）。\r\n\r\n这里要说明下，移动端浏览器也支持部分 PC 端带有的事件，比如 click 事件。但是在移动端上，click 事件会存在延时触发的情况，大概延时300ms。\r\n\r\n### 移动端300ms延时触发 click 事件\r\n\r\n在移动端为什么click事件会存在延时触发的情况呢？究其原因，是因为苹果公司在早期发布iphone的时候，采用了双击缩放网页的设计。当用户手指点击一次屏幕时，浏览器不能立即判定用户操作是单击操作还是双击操作，而是延迟了300ms，以判断用户是否再次点击了屏幕，如果300ms之内没有再次点击屏幕就判定为单击事件，才会去触发click事件。\r\n\r\n## 源码分析\r\n\r\nAlloyTeam 团队为 AlloyFinger 打造了多个能够适用不同技术栈中的手势库版本，能够方便的使用在 React 框架，Vue框架以及原生JS中。不同场景下的手势库版本的实现思路都是一样的，所以这里只分析了原生JS的实现思路。\r\n\r\n### 如何使用\r\n\r\nAlloyFinger 的使用方式非常简单，源码中暴露出了一个全局的 AlloyFinger 构造函数对象，使用方式如下，返回值是一个 AlloyFinger 实例对象。\r\n\r\n```javascript\r\n// element 是需要手势操作的DOM元素，值可以是DOM对象也可以是元素选择器。\r\n// options 是一个对象，包含了需要的手势操作函数。\r\nvar af = new AlloyFinger(element, options);\r\n\r\nvar af = new AlloyFinger(element, {\r\n    tap: function() {\r\n        //do something...\r\n    }\r\n});\r\n```\r\n有了 AlloyFinger 实例对象后，你还可以通过绑定自定义事件的方式使用手势库\r\n\r\n```javascript\r\n//绑定手势事件\r\naf.on('tap', function() {\r\n    //do something...\r\n});\r\n//解绑手势事件\r\naf.off('tap', function() {\r\n    //do something...\r\n});\r\n//销毁实例\r\naf.destroy();\r\n```\r\n\r\n### 整体架构\r\n\r\n\r\n![源码架构](https://user-gold-cdn.xitu.io/2018/4/5/16296552b1a3dfac?w=1037\u0026h=634\u0026f=png\u0026s=42997)\r\n\r\n**AlloyFinger 构造函数**\r\n\r\n首先，先定义了一个 AlloyFinger 构造函数，里面做了很多操作，事件的监听回调，变量值的初始化，将手势操作作为订阅者添加到订阅列表中。在这部分源码中，会初始化很多关于手指触点的水平坐标和垂直坐标的存储变量，刚开始看的时候会觉得代码比较的混乱，所以笔者把这部分的变量捋一遍梳理了出来，便于清晰的阅读源码。\r\n\r\n* this.x1: 存储在刚开始触摸时第一个手指触点的X坐标位置\r\n* this.y1: 存储在刚开始触摸时第一个手指触点的Y坐标位置\r\n* this.preV.x: 存储第一个手指触点与第二个手指触点之间的水平间距\r\n* this.preV.y: 存储第一个手指触点与第二个手指触点之间的垂直间距\r\n* this.x2: 存储在移动操作时第一个手指触点的X坐标位置\r\n* this.y2: 存储在移动操作时第一个手指触点的Y坐标位置\r\n* this.sx2: 存储在移动操作时第二个手指触点的X坐标位置\r\n* this.sy2: 存储在移动操作时第二个手指触点的Y坐标位置\r\n\r\n整个的源码解读都放置在我的github上，几乎每一行都有自己的注解，感兴趣的话可以点击这里：[传送门](https://github.com/webproblem/Blog/blob/master/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/AlloyFinger/alloy_finger.js)。\r\n\r\n源码都是精简干练的，多看优秀的源码还是对自己的技术有帮助的，可能看完了之后会思考自己怎么去DIY一个手势库呢？想要自己怎么去DIY一个手势库，必须得先了解各个手势操作的实现思路，有思路了之后才能动手写代码。\r\n\r\n### 具体实现\r\n\r\n* tap点击\r\n\r\ntap的本质其实就是touchend，但是在具体实现的时候必须做下限制，当前只存在一个手指触点，且touchstart的时候手指触点和touchend时手指触点的X轴Y轴的偏差不能小于30，这样才能判定当前的操作是tap操作。\r\n\r\n```javascript\r\nvar len = evt.touches.length;\r\nif(len \u003c 1) {\r\n    if ((this.x2 \u0026\u0026 Math.abs(this.x1 - this.x2) \u003c= 30) ||\r\n                (this.y2 \u0026\u0026 Math.abs(this.y1 - this.y2) \u003c= 30)) {\r\n                    //我是tap操作，do something...\r\n    }\r\n}\r\n```\r\n\r\n* doubleTap\r\n \r\ndoubleTap双击操作的实现思路大致是这样的，得先判断一段时间内是否有两次touchstart操作，并且两次touchstart都是快速完成的，不然会被认为是长按操作了，还有一点就是两次触点的位置的X轴Y轴的偏差不能小于30。\r\n\r\n```javascript\r\n//存储手指按下触摸操作的时间戳\r\nthis.now = null;\r\n//存储上一次手指触点触摸的时间戳\r\nthis.last = null;\r\n//用于存储手指触摸操作时的水平坐标和垂直坐标（如果是多指触摸操作，则记录的是第一个手指触摸的位置）\r\nthis.preTapPosition = { x: null, y: null };\r\n//是否为双击操作\r\nthis.isDoubleTap = false;\r\n...\r\nfunction start() {\r\n    this.now = Date.now();\r\n    if (this.preTapPosition.x !== null) {\r\n        //如果手指连续触摸操作之间的时间间隔小于250毫秒，且手指连续触摸操作之间的触点位置水平坐标小于30，垂直坐标小于30，那么就判定该操作为双击操作\r\n        this.isDoubleTap = (this.delta \u003e 0 \u0026\u0026 this.delta \u003c= 250 \u0026\u0026 Math.abs(this.preTapPosition.x - this.x1) \u003c 30 \u0026\u0026 Math.abs(this.preTapPosition.y - this.y1) \u003c 30);\r\n    }\r\n    this.preTapPosition.x = this.x1;\r\n    this.preTapPosition.y = this.y1;\r\n    this.last = this.now;\r\n}\r\nfunction end() {\r\n    if (this.isDoubleTap) {\r\n        //我是doubleTap操作，do something...\r\n    }\r\n}\r\n```\r\n\r\n* swipe\r\n\r\nswipe滑过操作具体的实现思路是touchstart的手指触点的坐标和touchend时候手指触点的坐标x、y方向偏移要大于30，且还要判断是往哪个方向滑动。\r\n```javascript\r\n//判定swipe滑动的方向\r\n_swipeDirection: function (x1, x2, y1, y2) {\r\n    return Math.abs(x1 - x2) \u003e= Math.abs(y1 - y2) ? (x1 - x2 \u003e 0 ? 'Left' : 'Right') : (y1 - y2 \u003e 0 ? 'Up' : 'Down')\r\n}\r\n```\r\n\r\n更多的手势操作源码分析可以参考我的github上的源码分析，[传送门](https://github.com/webproblem/Blog/blob/master/%E6%BA%90%E7%A0%81%E8%A7%A3%E8%AF%BB/AlloyFinger/alloy_finger.js)。\r\n\r\nAlloyFinger 手势库还用在了一个小巧的移动端裁剪图片工具上，下次还可以分析一波裁剪工具 AlloyCrop 的源码，学习到裁剪图片的原理和实现方案，平时在开发过程中，其实只要清楚了实现思路和原理，就能够方便的实现具体的功能。","author":{"url":"https://github.com/webproblem","@type":"Person","name":"webproblem"},"datePublished":"2018-08-12T09:24:35.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/3/Blog/issues/3"}