不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap、pinch等。

一、继承关系

Recognizer与前面的Input一样,也相当于是个抽象类。

从上图中可以看到,6个子类都会先继承AttrRecognizer类,因为AttrRecognizer类中的2个方法可以共用,attrTest与process,如果自己不实现,就可以直接调用。

二、识别器状态

每个识别器的初始状态是 “POSSIBLE”,每个识别器都会有一个状态周期。

例如做一次 “tap” 操作,浏览器使用了touch相关操作模拟: touchstart -> touchend,而状态是从 STATE_FAILED -> STATE_ENDED。

6种操作的状态走向图如下:

在 manage.js 中recognize方法,就是在根据识别器状态,来给 “curRecognizer” 与 “session.curRecognizer” 赋值,缓存这个当前周期内的状态。

如果识别器的状态是FAILED, CANCELLED 或者 RECOGNIZED (等同于 ENDED),那就要重置为 POSSIBLE,或结束当前识别器周期,让下一个识别器来。

下面的1,2,4,8等这样取值是为了方便位运算。

1 var STATE_POSSIBLE = 1;
2 var STATE_BEGAN = 2;
3 var STATE_CHANGED = 4;
4 var STATE_ENDED = 8;
5 var STATE_RECOGNIZED = STATE_ENDED;
6 var STATE_CANCELLED = 16;
7 var STATE_FAILED = 32;

三、Recognizer父类中的抽象方法

1. process(inputData)

返回识别器的状态,各个子类的实现逻辑都会不同,如果没有实现,就会引用通用父类AttrRecognizer中的process。

2. getTouchAction()

获取“touch-action”的属性数组

 1 var TOUCH_ACTION_COMPUTE = 'compute';
 2 var TOUCH_ACTION_AUTO = 'auto';
 3 var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
 4 var TOUCH_ACTION_NONE = 'none';
 5 var TOUCH_ACTION_PAN_X = 'pan-x';
 6 var TOUCH_ACTION_PAN_Y = 'pan-y';
 7
 8 getTouchAction: function() {
 9     return [TOUCH_ACTION_MANIPULATION];
10 }

3. reset()

只有 tap.js 与 press.js实现了这个方法

1 reset: function() {
2     clearTimeout(this._timer);
3 }

四、Recognizer父类中的方法

1)recognizeWith(otherRecognizer)  和 dropRecognizeWith(otherRecognizer)

recognizeWith:就是让当前识别器运行的时候同步运行所给的其它识别器(otherRecognizer),就是让几个操作同时触发,例如结合tap和rotate。

dropRecognizeWith:就是解除这层关系。

tap.recognizeWith(new Hammer.Rotate());

上面的代码中 recognizeWith 在内部会调用三次,下面的第17行代码,促使这个方法调用3次。

 1 /**
 2  * @param {Recognizer|Array|String} otherRecognizer
 3  * @returns {Recognizer} this
 4  */
 5 recognizeWith: function(otherRecognizer) {
 6   //支持一个识别器组成的数组来作为参数
 7   if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) {
 8     return this;
 9   }
10
11   var simultaneous = this.simultaneous;
12   //如果识别器被添加到了Manager上,也支持将其它识别器(otherRecognizer)的事件名(字符串形式)来作为参数
13   otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
14   if (!simultaneous[otherRecognizer.id]) {
15     //保存到 simultaneous 数组中
16     simultaneous[otherRecognizer.id] = otherRecognizer;
17     otherRecognizer.recognizeWith(this);//调用otherRecognizer的方法
18   }
19   return this;
20 }

manager.js中recognize方法内调用了个 canRecognizeWith 的方法,里面其实就是在根据识别器的ID判断是否存在。

1 canRecognizeWith: function(otherRecognizer) {
2   return !!this.simultaneous[otherRecognizer.id];
3 }

2)requireFailure(otherRecognizer)  和 dropRequireFailure(otherRecognizer)

requireFailure:与recognizeWith相反,在某个操作的时候,不执行otherRecognizer。也就是只有当其它识别器(otherRecognizer)无效时才执行该识别器。

dropRequireFailure:解除这层关系。

 1 /**
 2  * @param {Recognizer|Array|String} otherRecognizer
 3  * @returns {Recognizer} this
 4  */
 5 requireFailure: function(otherRecognizer) {
 6   if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) {
 7     return this;
 8   }
 9
10   var requireFail = this.requireFail;
11   otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this);
12   if (inArray(requireFail, otherRecognizer) === -1) {
13     requireFail.push(otherRecognizer);//维护一个requireFail数组
14     otherRecognizer.requireFailure(this);
15   }
16   return this;
17 }

这个 requireFail 数组在 Recognizer.canEmit 方法中会被调用,返回一个boolean值,用于在 Recognizer.tryEmit 是否能执行子类中的 emit 方法。

在第一篇《基础结构》的操作流程图中,有调用 emit 方法,子类是 Tap。

tryEmit: function(input) {if (this.canEmit()) {return this.emit(input);}// it's failing anywaythis.state = STATE_FAILED;},canEmit: function() {var i = 0;while (i < this.requireFail.length) {if (!(this.requireFail[i].state & (STATE_FAILED | STATE_POSSIBLE))) {return false;}i++;}return true;}

demo源码下载:

http://download.csdn.net/download/loneleaf1/9429375

参考资料:

http://tech.gilt.com/2014/09/23/five-things-you-need-to-know-about-hammer-js-2-0/

FIVE THINGS YOU NEED TO KNOW ABOUT HAMMER.JS 2.0

http://www.cnblogs.com/iamlilinfeng/p/4239957.html   Hammer.js

http://colinued.leanote.com/post/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%89%8B%E5%8A%BF%E5%BA%93hammerJS-2.0.4%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91    移动端手势库hammerJS-2.0.4

Hammer.js分析(四)——recognizer.js相关推荐

  1. Python爬虫实战(四) Python鬼灭漫画爬取+简单JS分析

    本次爬取仅供学习,无任何商业用途 猪油骨,拿来卤~今天,来分享一下python图片爬取+简单JS分析 爬取网址:漫画地址 (这个网站只更新到188话,实际上已经有200多话了) 目录 一.获取所有章节 ...

  2. 3、Spark 和 D3.js 分析航班大数据

    实验资源 1998.csv airports.csv 实验环境 VMware Workstation Ubuntu 16.04 spark-2.4.5 scala-2.12.10 实验内容 " ...

  3. 某验通杀js版,流程各个验证码那对应的js分析,你确定不进来看看(无感)?

    你只管努力,剩下的交给天意. 文章只提供学习,如有侵权请立即联系我. 本文章更新部分有误以更新,抱歉!!! 前言 某验官网:官网 总体来说某验的验证码配合js总共分为三套 无感(fullpage.js ...

  4. 渲染引擎分析 - 鸿蒙(OpenHarmony) JS UI 源码阅读笔记

    作者:门柳 鸿蒙是华为研发的新一代终端操作系统,能适用于 IoT.手表.手机.Pad.电视等各种类型的设备上,扛起"国产操作系统"的大旗,也遭受了很多非议.2021 年 6 月初发 ...

  5. [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before

    0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

  6. 星期三,今天早上上了四节JS课程,下午听健康讲座,晚上装系统

    星期三,今天早上上了四节JS课程,下午听健康讲座,晚上装系统.我想说装系统是最浪费时间的,以前大一的时候,有一段时间喜欢上装系统,我去有时候一个系统装了两三天,因为有很多问题. ~ 后面就不研究了,昨 ...

  7. [JS 分析] 天_眼_查 字体文件

    0. 参考 js分析 猫_眼_电_影 字体文件 @font-face 1. 分析 1.1 定位目标元素 1.2 查看网页源代码 1.3 requests 请求提取得到大量错误信息 对比猫_眼_电_影抓 ...

  8. 每日源码分析 - Lodash(remove.js)

    本系列使用 lodash 4.17.4版本 源码分析不包括引用文件分析 一.源码 import basePullAt from './.internal/basePullAt.js'/*** Remo ...

  9. webpack 深入浅出分析之打包 JS、ES6 和 Typescript

    一.webpack 打包 JS 文件 通过 npm install webpack 命令可以下载 webpack,通过 npm install webpack-cli -g 命令下载 webpack- ...

  10. 后端程序员看前端想死(二)进入页面之后js分析

    在上一篇中分析了一下以网页的组成.header中引入的乱七八糟的东西,现在进入到js中进行分析了 tuhooo啊,你是要搞前端了么? nonono,好玩,学一下 打开页面之后执行js的几种方法 直接写 ...

最新文章

  1. jsp是在html中添加什么作用域,JSP九个内置对象 四大作用域 动作指令
  2. jbpm binding类深入解析
  3. 转一个网络软件开发的广告
  4. 从Visual Studio中生成Linux设备
  5. oracle课程设计摘要,Oracle程序设计课程设计概要(doc 35页)
  6. leetcood学习笔记-167-两数之和 II - 输入有序数组
  7. Idea导入jar包的两种方法
  8. 破解并配置WebStorm
  9. 电信保温杯笔记——简洁latex中文简历模板
  10. 贪心算法适用条件_贪心算法
  11. SQL Server 2000/2005/2008 系列产品下载地址
  12. win10 清理回收站右键
  13. iphone6 计算机无法检测到照相机,爱思助手无法识别设备怎么办 爱思助手无法识别设备解决方法...
  14. MySQL中文存到数据库是,springMVC保存数据到mysql数据库中文乱码问题解决方法
  15. 用计算机说我爱你怎么能,让电脑替你说我爱你 520科技宅花式告白技巧 (全文)...
  16. AE开发之主窗体通过Base Comand和IHookHelper接口向子窗体转递图层信息方法模板
  17. 控制系统 丢包 matlab 程序,基于MATLAB的网络控制系统仿真.pdf
  18. Android中使用ExpandableListView实现微信通讯录界面(完善仿微信APP)
  19. JS - Array - 在数组的指定下标添加或替换元素 。 也可删除指定下标的元素
  20. lemming games 1!! hdlbits

热门文章

  1. 【数据结构_浙江大学MOOC】第六七八讲 图
  2. 学习dubbo(四): 启动时检查
  3. ubuntu16全程安装mysql5.7.15!
  4. Android 异步处理AsyncTask
  5. VNC+SSH相关应用
  6. 用代码初始化APP的window
  7. Q96:PT(1):方格纹理(Checker)(1)——3D Checker
  8. 大数据带来的安全隐患有哪些
  9. 5G网络将给物联网卡带来什么发展前景
  10. python 生成文字图片_[ImageFont] 如何利用字体生成文字图片