讀Zepto原始碼之Gesture模組

gesture模組基於ios上的gesture事件的封裝，利用scale屬性，封裝出pinch系列事件。

讀 zepto 原始碼系列文章已經放到了github上，歡迎star: reading-zepto

本文閱讀的原始碼為 zepto1.2.0

《reading-zepto》

;(function($), gesturetimeout
$(document).bind('gesturestart', function(e)).bind('gesturechange', function(e)).bind('gestureend', function(e))
;['pinch', 'pinchin', 'pinchout'].foreach(function(m)
})}})(zepto)

注意這裡有個判斷$.os.ios，用來判斷是否為ios。這個判斷需要引入裝置偵測模組detect。這個模組利用useragent來進行裝置偵測，裡面是一大堆正規表示式，所以這個模組後面是不打算分析的了。

然後是監測gesturestart、gesturechange、gestureend事件，根據這三個事件，可以組合出pinch、pinchin和pinchout事件。其實就是縮小和放大的手勢操作。

其中變數gesture物件和touch模組中的touch物件的作用差不多，可以先看看《讀zepto原始碼之touch模組》對touch模組的分析。

function parentiftext(node)

這個輔助方法是獲取目標節點，如果節點不是元素節點，則用父節點作為目標節點。如果事件在文字節點或者偽類元素上觸發時，會出現不是元素節點的情況。

bind('gesturestart', function(e))

如touch模組一樣，在gesturestart時，也用delta來記錄兩次start之間的時間間隔，用gesture.target來儲存目標元素，e1是起點時的縮放值。

bind('gesturechange', function(e))

在gesturechange時，更新終點guesture.e2的縮放值。

if (gesture.e2 > 0)  else if ('last' in gesture) 
}

如果gesture.e2存在（不可能有小於0的情況吧？），在起點的縮放值和終點的縮放值不相同的情況下，觸發pinch事件；如果起點的縮放值比終點的縮放值大，則繼續觸發pinchin事件，則縮小效果；如果起點的縮放值比終點的縮放值小，則繼續觸發pinchout事件，即放大效果。

最終將e1、e2和last都設定為0。

在last不存在的情況下（在呼叫preventdefault時），將gesture清空。

讀zepto原始碼之**結構

讀zepto原始碼之內部方法

讀zepto原始碼之工具函式

讀zepto原始碼之神奇的$

讀zepto原始碼之集合操作

讀zepto原始碼之集合元素查詢

讀zepto原始碼之操作dom

讀zepto原始碼之樣式操作

讀zepto原始碼之屬性操作

讀zepto原始碼之event模組

讀zepto原始碼之ie模組

讀zepto原始碼之callbacks模組

讀zepto原始碼之deferred模組

讀zepto原始碼之ajax模組

讀zepto原始碼之assets模組

讀zepto原始碼之selector模組

讀zepto原始碼之touch模組

署名-非商業性使用-禁止演繹 4.0 國際 (cc by-nc-nd 4.0)

讀Zepto原始碼之Gesture模組

讀Zepto原始碼之Gesture模組

讀Zepto原始碼之Stack模組

讀Zepto原始碼之Form模組

讀Zepto原始碼之Gesture模組

讀Zepto原始碼之Gesture模組

讀Zepto原始碼之Stack模組

讀Zepto原始碼之Form模組

相關推薦