开始
话说上周周末闲的蛋疼，突然想了解一下前端手势如何处理，好解开自己一个知识盲点，于是开始啃源码。。。并纪录一下。
一个手势
在我们的前端页面里面复杂的手势应该是不多见的，一般常用就是拖拉，双击，放大缩小这几个，但是合理运用手势很明显也能为我们页面的交互体验有一点增色，那么问题来了，如何识别一个手势尼？
Hammer.js
Hammer.js 应该算是前端使用的比较广泛的一个手势框架了（我所了解的还有一个AlloyTouch，更小，当然它提供的抽象程度是不如Hammer.js的），今天就拿这个框架来开刀吧。
配置参数
我们先来看Hammer.js的配置参数：
{
//手势事件触发时，是否同时触发对应的一个自定义的dom事件，当然这个没有直接绑定事件回调高效
domEvents: false,
//这个会影响对应的css属性touch-action的值，下面会接着说
touchAction: TOUCH_ACTION_COMPUTE,
enable: true, //是否开启手势识别
//可以指定在其他的元素上来检测与touch相关的事件并作为输入源，如果没设置就是当前检测的元素了
inputTarget: null,
inputClass: null, //输入源类型，鼠标还是触摸或者是混合
recognizers: [], //我们配置的手势识别器
//预设的一些手势识别器，格式：[RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]]
preset: [
[RotateRecognizer, { enable: false }],
[PinchRecognizer, { enable: false }, ['rotate']],
[SwipeRecognizer, { direction: DIRECTION_HORIZONTAL }],
[PanRecognizer, { direction: DIRECTION_HORIZONTAL }, ['swipe']],
[TapRecognizer],
[TapRecognizer, { event: 'doubletap', taps: 2 }, ['tap']],
[PressRecognizer]
],
cssProps: { //额外的一些css属性
userSelect: 'none',
touchSelect: 'none',
touchCallout: 'none',
contentZooming: 'none',
userDrag: 'none',
tapHighlightColor: 'rgba(0,0,0,0)'
}
}总的来说配置参数不多，也不算复杂，这个框架基本也算是开箱即用了，好，我们接着再深入一点。
初始化
接着来到源码里面manager.js，可以看到以下一段的代码：
export default class Manager {
constructor() {
...
this.element = element;
this.input = createInputInstance(this);// 1
this.touchAction = new TouchAction(this,this.options.touchAction);// 2
toggleCssProps(this, true);
each(this.options.recognizers, (item) => { //3
let recognizer = this.add(new (item[0])(item[1]));
item[2] && recognizer.recognizeWith(item[2]);
item[3] && recognizer.requireFailure(item[3]);
}, this);
}
...
} 1.新建一个输入源
根据设备的不同手势可能是来自鼠标也有可能来自手机上的触摸屏，而且mouse event的属性和touch event的属性是有一丝差异的（还有pointer event），所以为了方便后续处理，Hammer.js也分别定义了不同类型输入源：MouseInput，PointerEventInput，SingleTouchInput，TouchInput和TouchMouseInput；并针对不同的事件，对参数做了一个简单处理（handler方法），最终得到统一格式的数据输出，就像这样：
{
pointers: touches[0],
changedPointers: touches[1],
pointerType: INPUT_TYPE_TOUCH,
srcEvent: ev
}在获取统一格式的输入数据后，会交由InputHandler进一步处理，会判断这次输入是手势的开始还是结束，如果是开始就会新建一个手势识别的session，并且计算一些与手势相关的数据（角度，偏移距离，移动方向等），具体可以在compute-input-data.js里面看到。
经过以这一轮计算，我们已经有足够的数据来支持之后的手势识别了。
另外一提的是，这五种输入源都继承了Input，在Input里面事件是这样绑定的：
this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
有三种绑定目标，当前的element，inputTarget，element所属的window，在window上绑定事件处理器还是很必要的（例如拖拉一个元素的时候）；另外翻了一下代码，inputTarget绑定都是touch相关的事件，不是很明白它的意图和场景，为什么要分离一个目标单独处理触摸事件。
2.设置元素样式里touch-action的值
在手机浏览器里面，一般也会自带一些手势处理，例如向右滑动或者向左滑动就是前进和后退，所以除了我们自己定义手势，还需要对浏览器的手势做一些限制或者禁止。
这里也举个栗子吧，在Hammer.js里面默认提供拖拉手势的识别器（就是pan.js），当在检测水平方向的拖拉的时候，这个识别器会把touch-action的值设为pay-y（允许浏览器处理垂直方向的拖拉，可以是一个垂直的滚动或者其他），那如果我又接着定义一个垂直方向拖拉的识别器时，touch-action的值是多少尼？（答案就是none，浏览器不会帮我们再处理了，垂直方向滚动也只能靠自己），那是怎样计算出来的尼？
在创建TouchAction对象时，如果配置参数中touchAction的值为TOUCH_ACTION_COMPUTE，便调用compute方法开始遍历recognizers，收集它们所希望设置的touch-action的值：
compute() {
let actions = [];
each(this.manager.recognizers, (recognizer) => {
if (boolOrFn(recognizer.options.enable, [recognizer])) {
actions = actions.concat(recognizer.getTouchAction());
}
});
return cleanTouchActions(actions.join(' '));
}最终在cleanTouchActions方法集中计算最终的值：
...
let hasPanX = inStr(actions, TOUCH_ACTION_PAN_X);
let hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y);
if (hasPanX && hasPanY) {
return TOUCH_ACTION_NONE;
}
...3.配置手势识别器
主要是配置各个手势识别器之间的关系，是否可以协同还是互斥，用官网一个例子：
var hammer = new Hammer(el, {});
var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
var tripleTap = new Hammer.Tap({event: 'tripletap', taps: 3 });
hammer.add([doubleTap, doubleTap, singleTap]);
tripleTap.recognizeWith([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
doubleTap.requireFailure(tripleTap);
singleTap.requireFailure([tripleTap, doubleTap]);
以上定义了三个手势识别器：singleTap，doubleTap和tripleTap，很明显这个三个识别器是互斥的，如果用户点三下屏幕时都触发就比较尴尬了；
这里得注意添加的顺序，因为Hammer.js是会按顺序遍历识别器调用他们的recognize方法，因为我们已经设置了手势的互斥，Hammer.js为了知道手势是单击还是双击，singleTap，doubleTap，tripleTap识别器都设置了300ms等待时间来判断之后还会不会有点击事件，根据识别顺序，singleTap总能获取tripleTap和doubleTap的识别结果来判断是否要触发事件，假如我们不设置他们之间的互斥关系，Hammer.js默认一满足条件就会触发，就会出现刚才说的那种尴尬的场景。
那recognizeWith有啥作用尼，看以下代码：
if (!curRecognizer || (curRecognizer && curRecognizer.state & STATE_RECOGNIZED)) {
curRecognizer = session.curRecognizer = null;
}
let i = 0;
while (i < recognizers.length) {
recognizer = recognizers[i];
if (session.stopped !== FORCED_STOP && (
!curRecognizer || recognizer === curRecognizer ||
recognizer.canRecognizeWith(curRecognizer))) {
recognizer.recognize(inputData);
} else {
recognizer.reset();
}
if (!curRecognizer && recognizer.state & (STATE_BEGAN | STATE_CHANGED | STATE_ENDED)) {
curRecognizer = session.curRecognizer = recognizer;
}
i++;
}
虽然singleTap，doubleTap和tripleTap从最终结果上应该是互斥的，但是同样的数据输入时可能会同时让几个手势识别器识别，例如当用户点击一下屏幕，singleTap识别器的状态可能是STATE_RECOGNIZED或者STATE_BEGAN（等待doubleTap和tripleTap识别器的结果），session会把singTap识别器记录为当前的手势识别器，但是doubleTap和tripleTap也是需要记录一些状态（例如当前点击次数），因为很有可能接下来又是一个单击，变成双击手势；当用户接着再单击一下，doubleTap识别器因为设置了recognizeWith(singleTap)和以协同singleTap识别数据输入，然后doubleTap识别器开始进入STATE_RECOGNIZED或者STATE_BEGAN（等待tripleTap识别器的结果），此时session当前的手势识别器就是doubleTap了，而singleTap识别器因为没有设置recognizeWith(doubleTap)，会被重置。
一点小的细节
我们在旋转一张图片时，如何实现旋转，怎么知道旋转的角度尼？
再回到computeInputData方法，有这样一行代码获取偏转角度：
...
let center = input.center = getCenter(pointers);
...
input.angle = getAngle(offsetCenter, center);
...
再跟踪一下getCenter方法：
while (i < pointersLength) {
x += pointers[i].clientX;
y += pointers[i].clientY;
i++;
}
return {
x: round(x / pointersLength),
y: round(y / pointersLength)
};
很简单的算出手势的中心位置，当我们双指旋转时，中心位置也会跟着移动，很容易计算出前后偏转角度。
最后一点思考
Hammer.js都是在冒泡阶段绑定事件处理器，为什么不在捕获阶段拦截事件尼，如果一个向右活动的手势被识别，后续的事件（如touchMove）已经没必要再传给子节点，完全可以在拦截的元素上处理，这样性能上也应该会有一点提升，挖个坑给自己以后实现一下。
最后的最后。。。
因为没有使用经验，单靠啃源码，难免有所错漏，望指正。