实现一个javascript手势库 -- base-gesture.js

Posted 2020-09-24

　　现在移动端这么普及呢，我们在手机上可以操作更多了。对于网页来说实现一些丰富的操作感觉也是非常有必要的，对吧(如果你仅仅需要click，，那就当我没说咯。。。)~~比如实现上下，左右滑动，点击之类的，加上这些东西就感觉网页会库不少呢~~(舒服)。当然啦。原生javascript并没有为我们提供这些花里胡哨的东西，需要我们自己去实现下喽。又当然，，现在还是有许多js手势库的,比如hammer.js之类的。但是，学习是一个重复造轮子的过程（不知道那位伟人所多，如果无人认领，那就是我说的~~~~~~~~~）对吧。自己造个轮子玩，可能不能用在跑车上，但或许用在拖拉机上不错也说不定喽.

　　好啦，好啦，前戏就这么多。下面就是主题啦。。说说实现一个自己的手势库。我把它叫做base-gesture.js 传送门在次:gesture(GitHub。。。star一下可好)

　　然后嘞，讲讲思路喽。（仅仅是我个人的想法。。不做任何保证，也不负责。打我呀~）一个小起点，在移动端呢，如果使用click会有个300ms延迟，原因是移动端需要一个双击放大的判断，所以导致这个问题，具体点可以自己gooole或百度.为了避免这个问题我们就需要对touchstart，touchend这两个事件进行监听，已实现一个tap事件。然后你有非常好学，去百度了下，发现它们还有一个touchmove兄弟事件存在。。在我看来这三兄弟和mousedown,mouseup,mousemove贼像，那我们就可以利用这三个事件来实现一些基本的手势操作了。我实现呢。主要是在touchstart得时候记录一个startX,和一个startY就是起始位置啦。然后在touchmove时候在记录一个endX和一个ewndY。现在我们有两个点的坐标了哦。那就好说了，稍微运用下数学知识求下两点之间的夹角，有这个夹角了，你在判断下endX-startX以及endY-startY的正负你就可以基本实现了判断上，下左右滑动了哦~~还行吧

　　当然，有这些还是不够的，我们知道，（你必须知道）touchstart只在按下屏幕那一刻触发，这就导致startX与startY只要手指不松开，它就不会变，而这个直接导致的问题就是，你左划后再继续右划，之前的判断方法依然判断为左划，，直到到你右划过了起始点。哇，这个问题就很尴尬了。。简直是废的喽。这就需要解决下喽。我呢，决定多加几个参数辅助下喽，第一组就是compareX和compareY他们在touchstart时候初始化和startx和starty值一样喽，需要他们呢主要是不希望startX和startY值不要变(后面还有用)，他们就替代去完成一些任务，在touchmove可能就会更新它们的值(中途方向改变的时候)。然后就是两个数组了,gatherX以及gatherY。他们的第一位保存的是上一次触发touchmove时候记录的endX/Y-compareX/Y的值，第二位保存的是当前endX/Y-compareX/Y的值，这个时候我们就要判断gatherX/Y[1]-gatherX/Y的时候大小了，如果它小于零，恭喜你，它方向改变了(不知道有没有讲清楚，大概意识就是你从家里出去一直向外走了100米记录保存在gatherX/Y第一位上，下一秒这个距离变成94米了，保存在第二位上，一减小于零，说明你回头走了呀)。这个时候，把compareX/Y等于endX/endY表示一个新的手势的起点，然后gatherX/gatherY清空，这样就基本实现了，就算它中途非常手贱的不停移动，也没问题，也能触发正确对应事件。

　　基本的框架能思路就是这样了，他至少能判断上下左右滑动了。当然为了让它实用一点我为event加了两个属性,event.gapX/Y表示距离上一次触发touchmove在X/Y轴上滑动的距离，以及evnt.moveX/Y表示手势结束到手势开始的位置的距离。这两个还是非常有用的。。至少我这么认为（因为是本宝宝想的~~）。有了这些主要思路，接下来你就给他们封装性下，实现个小插件就可以了啊，上面右地址，你可以直接看，readme感觉基本上也都血比较清楚(感觉有点乱~~~)，请务必提意见以及发现的问题啊，大家一起学习。我呢，用自己的轮子造了两辆破车，破车1,破车2(绝对正经私家车)。第二个例子就是一个类似整页上划的东西啦。

　　对了，还实现了对鼠标的支持，思路一样啦，就是该成相应的mouse事件就可以啦，就这些啦，希望大家一起进步与完善，让这个轮子更牛逼，说不定那天能成为跑车主胎呢（好吧，可能脑子太困糊涂了）。共勉啦，欢迎提问，以及拍砖哦