目前，AlloyFinger作为腾讯手机QQ网页手势解决方案，在各大项目中都发挥了作用。有兴趣的同学可以去Github看看：https://github.com/AlloyTeam/AlloyFinger在腾讯，如：兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、AlloyTeam、腾讯CDC等部门和团队和项目正在使用AlloyFinger。如下图所示：基本上只要有裁剪和查看图片的地方，都会用到AlloyFinger。因此，AlloyFinger也被选为腾讯代码平台的优质组件：除了国内外项目团队都在使用AlloyFinger外，国内外各大IT网站也纷纷转载报道。作为一个超小的手势库，为什么不选择腾讯的web项目选择AlloyFinger而不是hammerjs呢？下面我们从各个角度、架构、原理来分析一下。可以看出，hammerjs的体积要比AlloyFinger大很多。对于追求最好的手Q网页加载速度和性能的同学来说，hammerjs的体积是无法接受的！那么，为什么hammerjs这么大呢？看看架构设计就知道了。架构设计其实hammerjs抽象出的类并没有全部列出来，还有很多。如此过度设计，导致尺寸特别大。一个好的设计不需要把每一个逻辑点都抽象出来，局部过程化，整体OO是可以的。比如AlloyFinger的设计。只有Vector2和AlloyFinger可以触发touchstart、touchmove、touchend中的相关手势事件，简单直接！所有hammerjs支持的手势，AlloyFinger都可以支持。众所周知，浏览器向开发者暴露了四个事件，touchstarttouchmovetouchendtouchcancel，这四个事件的回调函数可以获得TouchEvent。TouchEvent:touches:当前在屏幕上的所有手指动作列表targetTouches:当前DOM元素上的手指动作列表changedTouches:当前事件涉及的手指动作列表TouchEvent可以得到每个手指的坐标，那么可编程就是这样发生的.移动端点击时有300毫秒的延迟。tap的本质其实就是touchend。但是需要判断touchstart时手的坐标和touchend时手的坐标在x和y方向上的偏移量小于30。只有小于30时才会触发点击。longTap长按touchstart启动settimeout750毫秒，如果750ms内有touchmove或者touchend，定时器会被清零。如果超过750ms没有touchmove或者touchend，就会触发longTapswipe。这里需要注意的是，当touchstart处的手的坐标和touchend的坐标在x、y方向偏移超过30时，会判断为swipe，小于则判断为tap30.那么用户滑动是从上到下，从下到上，还是从左到右，还是从右到左？综合以上三个判断即可确定。具体代码如下：_swipeDirection:function(x1,x2,y1,y2){returnMath.abs(x1-x2)>=Math.abs(y1-y2)?(x1-x2>0?'Left':'Right'):(y1-y2>0?'Up':'Down')}pinch这个手势用的很频繁，比如裁剪图片的时候放大或者缩小，就需要pinch。如上图所示，两点之间的距离比用于找到夹点的尺度。这个scale会挂载在事件上，让用户反馈给dom的transform或者其他元素的scale属性。rotate旋转如上图所示，利用内积可以得到两个手势状态的夹角θ。但是如何找到这里的旋转方向呢？然后使用差分乘法（VectorCross）。使用十字的正负结果来确定旋转方向。十字架的本质其实就是面积。可以看到下面的推导：所以物理引擎中经常用十字来计算惯性矩，因为力乘以力矩其实就相当于面积：事件触发的主要原理有上面已经解释过了。MultipointStart、doubleTap、singleTap、multipointEnd可以看源码，不到200行的代码应该很容易消化。在触发手势事件的同时，还可以监听touchStart、touchMove、touchEnd和touchCancel。详细的Vector2和AlloyFinger代码可以在Github上找到：https://github.com/AlloyTeam/AlloyFinger有任何意见或建议欢迎提issue：https://github.com/AlloyTeam/AlloyFinger/issues
