Hammer.js分析(四)——recognizer.js
2016-02-18 10:09
681 查看
不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap、pinch等。
![](http://images2015.cnblogs.com/blog/211606/201602/211606-20160208211840464-1867820479.jpg)
Recognizer与前面的Input一样,也相当于是个抽象类。
从上图中可以看到,6个子类都会先继承AttrRecognizer类,因为AttrRecognizer类中的2个方法可以共用,attrTest与process,如果自己不实现,就可以直接调用。
例如做一次 “tap” 操作,浏览器使用了touch相关操作模拟: touchstart -> touchend,而状态是从 STATE_FAILED -> STATE_ENDED。
6种操作的状态走向图如下:
![](http://images2015.cnblogs.com/blog/211606/201602/211606-20160209122213136-1303767842.jpg)
在 manage.js 中recognize方法,就是在根据识别器状态,来给 “curRecognizer” 与 “session.curRecognizer” 赋值,缓存这个当前周期内的状态。
如果识别器的状态是FAILED, CANCELLED 或者 RECOGNIZED (等同于 ENDED),那就要重置为 POSSIBLE,或结束当前识别器周期,让下一个识别器来。
下面的1,2,4,8等这样取值是为了方便位运算。
返回识别器的状态,各个子类的实现逻辑都会不同,如果没有实现,就会引用通用父类AttrRecognizer中的process。
2. getTouchAction()
获取“touch-action”的属性数组
3. reset()
只有 tap.js 与 press.js实现了这个方法
recognizeWith:就是让当前识别器运行的时候同步运行所给的其它识别器(otherRecognizer),就是让几个操作同时触发,例如结合tap和rotate。
dropRecognizeWith:就是解除这层关系。
上面的代码中 recognizeWith 在内部会调用三次,下面的第17行代码,促使这个方法调用3次。
manager.js中recognize方法内调用了个 canRecognizeWith 的方法,里面其实就是在根据识别器的ID判断是否存在。
2)requireFailure(otherRecognizer) 和 dropRequireFailure(otherRecognizer)
requireFailure:与recognizeWith相反,在某个操作的时候,不执行otherRecognizer。也就是只有当其它识别器(otherRecognizer)无效时才执行该识别器。
dropRequireFailure:解除这层关系。
这个 requireFail 数组在 Recognizer.canEmit 方法中会被调用,返回一个boolean值,用于在 Recognizer.tryEmit 是否能执行子类中的 emit 方法。
在第一篇《基础结构》的操作流程图中,有调用 emit 方法,子类是 Tap。
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
/article/4871916.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
一、继承关系
![](http://images2015.cnblogs.com/blog/211606/201602/211606-20160208211840464-1867820479.jpg)
Recognizer与前面的Input一样,也相当于是个抽象类。
从上图中可以看到,6个子类都会先继承AttrRecognizer类,因为AttrRecognizer类中的2个方法可以共用,attrTest与process,如果自己不实现,就可以直接调用。
二、识别器状态
每个识别器的初始状态是 “POSSIBLE”,每个识别器都会有一个状态周期。例如做一次 “tap” 操作,浏览器使用了touch相关操作模拟: touchstart -> touchend,而状态是从 STATE_FAILED -> STATE_ENDED。
6种操作的状态走向图如下:
![](http://images2015.cnblogs.com/blog/211606/201602/211606-20160209122213136-1303767842.jpg)
在 manage.js 中recognize方法,就是在根据识别器状态,来给 “curRecognizer” 与 “session.curRecognizer” 赋值,缓存这个当前周期内的状态。
如果识别器的状态是FAILED, CANCELLED 或者 RECOGNIZED (等同于 ENDED),那就要重置为 POSSIBLE,或结束当前识别器周期,让下一个识别器来。
下面的1,2,4,8等这样取值是为了方便位运算。
var STATE_POSSIBLE = 1; var STATE_BEGAN = 2; var STATE_CHANGED = 4; var STATE_ENDED = 8; var STATE_RECOGNIZED = STATE_ENDED; var STATE_CANCELLED = 16; var STATE_FAILED = 32;
三、Recognizer父类中的抽象方法
1. process(inputData)返回识别器的状态,各个子类的实现逻辑都会不同,如果没有实现,就会引用通用父类AttrRecognizer中的process。
2. getTouchAction()
获取“touch-action”的属性数组
var TOUCH_ACTION_COMPUTE = 'compute'; var TOUCH_ACTION_AUTO = 'auto'; var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented var TOUCH_ACTION_NONE = 'none'; var TOUCH_ACTION_PAN_X = 'pan-x'; var TOUCH_ACTION_PAN_Y = 'pan-y'; getTouchAction: function() { return [TOUCH_ACTION_MANIPULATION]; }
3. reset()
只有 tap.js 与 press.js实现了这个方法
reset: function() { clearTimeout(this._timer); }
四、Recognizer父类中的方法
1)recognizeWith(otherRecognizer) 和 dropRecognizeWith(otherRecognizer)recognizeWith:就是让当前识别器运行的时候同步运行所给的其它识别器(otherRecognizer),就是让几个操作同时触发,例如结合tap和rotate。
dropRecognizeWith:就是解除这层关系。
tap.recognizeWith(new Hammer.Rotate());
上面的代码中 recognizeWith 在内部会调用三次,下面的第17行代码,促使这个方法调用3次。
/** * @param {Recognizer|Array|String} otherRecognizer * @returns {Recognizer} this */ recognizeWith: function(otherRecognizer) { //支持一个识别器组成的数组来作为参数 if (invokeArrayArg(otherRecognizer, 'recognizeWith', this)) { return this; } var simultaneous = this.simultaneous; //如果识别器被添加到了Manager上,也支持将其它识别器(otherRecognizer)的事件名(字符串形式)来作为参数 otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); if (!simultaneous[otherRecognizer.id]) { //保存到 simultaneous 数组中 simultaneous[otherRecognizer.id] = otherRecognizer; otherRecognizer.recognizeWith(this);//调用otherRecognizer的方法 } return this; }
manager.js中recognize方法内调用了个 canRecognizeWith 的方法,里面其实就是在根据识别器的ID判断是否存在。
canRecognizeWith: function(otherRecognizer) { return !!this.simultaneous[otherRecognizer.id]; }
2)requireFailure(otherRecognizer) 和 dropRequireFailure(otherRecognizer)
requireFailure:与recognizeWith相反,在某个操作的时候,不执行otherRecognizer。也就是只有当其它识别器(otherRecognizer)无效时才执行该识别器。
dropRequireFailure:解除这层关系。
/** * @param {Recognizer|Array|String} otherRecognizer * @returns {Recognizer} this */ requireFailure: function(otherRecognizer) { if (invokeArrayArg(otherRecognizer, 'requireFailure', this)) { return this; } var requireFail = this.requireFail; otherRecognizer = getRecognizerByNameIfManager(otherRecognizer, this); if (inArray(requireFail, otherRecognizer) === -1) { requireFail.push(otherRecognizer);//维护一个requireFail数组 otherRecognizer.requireFailure(this); } return this; }
这个 requireFail 数组在 Recognizer.canEmit 方法中会被调用,返回一个boolean值,用于在 Recognizer.tryEmit 是否能执行子类中的 emit 方法。
在第一篇《基础结构》的操作流程图中,有调用 emit 方法,子类是 Tap。
tryEmit: function(input) { if (this.canEmit()) { return this.emit(input); } // it's failing anyway this.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
/article/4871916.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
相关文章推荐
- JS之公共方法(通讯、正则、乘法)
- JavaScript事件使用指南
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat使用详解
- JavaScript客户端接口之SuperMap.Handler
- js ==与===的区别
- JSP取得绝对路径
- javascript数组去重的4个方法
- 使用JSONP解决跨域问题的实例
- json字符串
- JSON 数据格式
- javascript window.location的用法
- javascript运动应用二
- JavaScript运动应用一
- js实现简单的省市县三级联动效果实例
- JavaScript中width和offsetWidth的区别(动画中)
- JSON
- XML、HTML、CSS与JS的区别整理
- EChars3.0学习(一)
- 关于jsp标签A跳转路径的疑惑
- jsPlumb实例