“Manager”是所有识别器实例的容器,它为你设置的元素安装了交互事件监听器,并设置了触摸事件特性。

manager.js中的代码会涉及到input.js和recoginzer.js中的内容,这里会先做大致的流程分析,具体分析会在接下来的文章中详谈。

一、Manager构造函数

初始化流程如下所示:

对应的函数代码如下所示:

function Manager(element, options) {
this.options = assign({}, Hammer.defaults, options || {});//拷贝设置
this.options.inputTarget = this.options.inputTarget || element;//目标元素
this.handlers = {};//事件组,例如自定义的tap事件等
this.session = {};//全局属性缓存,例如当前Recognizer对象
this.recognizers = [];//当前绑定的Recognizer对象数组,通过add方法添加
this.element = element; this.input = createInputInstance(this);//根据特性初始化相关的input子类 此函数在input.js中
this.touchAction = new TouchAction(this, this.options.touchAction); toggleCssProps(this, true);//执行Hammer中的cssProps设置
//初始化需要执行的识别器
each(this.options.recognizers, function(item) {
var recognizer = this.add(new(item[0])(item[1]));
item[2] && recognizer.recognizeWith(item[2]);
item[3] && recognizer.requireFailure(item[3]);
}, this);
}

二、Manager对象中的函数

1)set(options)

修改Manager对象的相关参数,可以在需要的时候更新touchAction的值。

如果改动了“inputTarget”参数,input对象就要重新初始化。

mc.set({ touchAction: TOUCH_ACTION_PAN_X, inputTarget: null });

2)get(Recognizer|String)、add(Recognizer) 和 remove(Recognizer|String)

get:通过事件名(tap、pinch等)获取recognizers数组中相应的识别器,如果传入的是识别器则直接返回这个识别器

add:添加识别器到recognizers数组中。会做判断其是否存在,如果存在就先移除,然后再做添加,并执行touchAction对象的update方法,上面有讲到。

remove:先通过get方法获取到相应的识别器,再判断是否存在,最后recognizers数组做splice操作,并执行touchAction对象的update方法。

3)on(events, handler) 和 off(events, [handler])

on:绑定事件,通过空格隔开,可以绑定多个事件,splitStr就是通过空格字符串的函数。事件都会push到handlers[event]数组中,key就是事件名

off:移除绑定了的事件,会判断是否传入了handler,没有就直接delete,有的话还要搜索下是否在handlers[event]数组中,有就做splice

4)recognize(inputData)

执行recognizers数组。input.js中的inputHandler函数会调用这个方法,inputData是自定义事件对象,内容如下:

方法的大致流程如下:

下面的代码涉及了多处Recognizer中概念,下面的代码就先看个大致过程:

recognize: function(inputData) {
var session = this.session;//全局缓存,在Input对象中会用到
if (session.stopped) {//在stop方法中可以设置,有两个选项
return;
}
// 执行CSS属性“touch-action”的 polyfill
this.touchAction.preventDefaults(inputData); var recognizer;
var recognizers = this.recognizers;//在Hammer或外面调用add添加的识别器数组 // 每个识别器有四个状态:BEGAN, CHANGED, ENDED 和 RECOGNIZED
// 如果curRecognizer还没设置就是 `null`
var curRecognizer = session.curRecognizer; // 如果是一个新的或当前识别器的状态为RECOGNIZED,就重置为null
if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
curRecognizer = session.curRecognizer = null;
} var i = 0;
while (i < recognizers.length) {
recognizer = recognizers[i];
// 满足下面的条件就执行识别器的recognize方法,否则重置
// 1. 缓存的stopped不能是FORCED_STOP状态
// 2. curRecognizer还未设置或curRecognizer与循环中的recognizer相同
// 3. recognizer设置了可以与curRecognizer同时执行,这里有个识别器recognizeWith的概念后面会讲到
if (session.stopped !== FORCED_STOP && ( //
!curRecognizer || recognizer == curRecognizer || //
recognizer.canRecognizeWith(curRecognizer))) { //
recognizer.recognize(inputData);
} else {
recognizer.reset();
} // curRecognizer为空,并且recognizer的状态是STATE_BEGAN、STATE_CHANGED和STATE_ENDED中的一个
if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
curRecognizer = session.curRecognizer = recognizer;//设置curRecognizer与session.curRecognizer
}
i++;
}
}

在上面的代码中会涉及到recoginzer.js中的“recognizeWith”,这里简单介绍下“recognizeWith”和“requireFailure”。

1)recognizeWith:其实就是让几个事件同时触发,例如旋转的时候还要做放大。

2)requireFailure:正好相反,例如双击的时候不触犯单机的事件。

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分析(二)——manager.js的更多相关文章

  1. js分析 快速定位 js 代码, 还原被混淆压缩的 js 代码

    -1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...

  2. Hammer.js分析(三)——input.js

    input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...

  3. Hammer.js分析(四)——recognizer.js

    不同识别器会使用不同逻辑,根据从相关Input类获取到的事件对象和事件,实现自定义的触屏事件,例如tap.pinch等. 一.继承关系 Recognizer与前面的Input一样,也相当于是个抽象类. ...

  4. Hammer.js分析(一)——基础结构

    从github上面将源码下载下来,会发现有个src文件夹.当前版本是2.0.6. 总的结构如下: 一.常量 这里将常量全部列在一起是可以在对比源码的时候,更方便的查看相应内容. var VENDOR_ ...

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

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

  6. angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)

    昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...

  7. 初学node.js有感二

    node.js进阶 一.回顾与继续   对于一种语言的认识都是经历这样的一个过程的,首先从原生的环境(CMD)中开始学习,找到一门语言之间各种引用的本质和相互之间的调用方式,明澈各种依赖关系,在这个基 ...

  8. 前端监控系统(二)JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

  9. JavaScript进阶(二)在一个JS文件中引用另一个JS文件

    在一个JS文件中引用另一个JS文件       转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...

随机推荐

  1. WebService创建与使用

    因为项目中需要实现客户端与服务器端的数据交换,以及获取服务器端其他程序的分析结果,所以对WebService做了些简单的了解,现记录如下: 一.WebService程序编写 1.  在VS中新建空白网 ...

  2. elasticsearch 之mapping

    搭好elk 后,有时候会发现kibana 统计数据时,数据类型不对,这个时候就和elasticsearch的mapping有关,虽然我们可以用logstash修改传入es里的数据类型,比如 float ...

  3. Mysql常用表操作 | 单表查询

    160905 常用表操作 1. mysql -u root -p 回车 输入密码   2. 显示数据库列表 show databases     3. 进入某数据库 use database data ...

  4. Android Studio编码问题

    Android Studio编码问题 不同于Eclipse,选中项目右击即会出现"Properties"选项,可以设置项目文件的默认编码,可以根据自己的需要设置为UTF-8/GB2 ...

  5. IIS 8:IIS 入门

    深埋在您的 Microsoft 服务器 (2008年. 2008 R2 和 2012年的版本) 的范围内是最强大的 Web 服务器可用. 它只等待你来发挥其全部潜力. 您的目标是要从家里运行一个 Wo ...

  6. Web打印组件jatoolsPrinter

    应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于web的应用,客户端的规则很简单,容易学习,容易维护,容易发布.但对程序员来说,因为浏览器的局限性,却要面对很多挑战.怎么样 ...

  7. 业务安全通用解决方案——WAF数据风控

    业务安全通用解决方案——WAF数据风控 作者:南浔@阿里云安全 “你们安全不要阻碍业务发展”.“这个安全策略降低用户体验,影响转化率”——这是甲方企业安全部门经常听到合作团队抱怨.但安全从业者加入公司 ...

  8. 为什么使用Binder而不是其他IPC机制

    本文搬运自:Advantages of using Binder for IPC in Android 使用Binder而不是其他(Semaphores , Message Queue, PIPES) ...

  9. Kafka随笔一

    一.KafKa所涉及到的名词概念: 1.    Topic:用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. 2.    Partition:是Kafka中横向扩展和一切 ...

  10. JSON-fastjson

    fastjson 是alibaba的一个Json处理工具包. 1.使用  JSON.toJSONString   和  JSON.parseObject fastjson只需要掌握两个静态方法:JSO ...