實現一個javascript手勢庫 -- base-gesture.js

標籤：學習   index   沒有   demo   記錄   www   mmc   例子   dex   

　　現在移動端這麼普及呢，我們在手機上可以操作更多了。對於網頁來說實現一些豐富的操作感覺也是非常有必要的，對吧(如果你僅僅需要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事件就可以啦，就這些啦，希望大家一起進步與完善，讓這個輪子更牛逼，說不定那天能成為跑車主胎呢（好吧，可能腦子太困糊塗了）。共勉啦，歡迎提問，以及拍磚哦

　　

實現一個javascript手勢庫 -- base-gesture.js