Zepto源碼中Gesture模組介紹

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

原始碼版本

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

GitBook

《reading-zepto》

#整體架構

;(function($){
  if ($.os.ios) {    
  var gesture = {}, gestureTimeout

    $(document).bind('gesturestart', function(e){
     ...
    }).bind('gesturechange', function(e){
      ...
    }).bind('gestureend', function(e){
     ...
    })

    ;['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
      $.fn[m] = function(callback){ return this.bind(m, callback) }
    })
  }
})(Zepto)

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

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

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

parentIfText

function parentIfText(node){
  return 'tagName' in node ? node : node.parentNode
}

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

事件

gesturestart

bind('gesturestart', function(e){
  var now = Date.now(), delta = now - (gesture.last || now)
  gesture.target = parentIfText(e.target)
  gestureTimeout && clearTimeout(gestureTimeout)
  gesture.e1 = e.scale
  gesture.last = now
})

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

gesturechange

bind('gesturechange', function(e){
  gesture.e2 = e.scale
})

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

gestureend

if (gesture.e2 > 0) {  
    Math.abs(gesture.e1 - gesture.e2) != 0 && $(gesture.target).trigger('pinch') &&
    $(gesture.target).trigger('pinch' + (gesture.e1 - gesture.e2 > 0 ? 'In' : 'Out'))
  gesture.e1 = gesture.e2 = gesture.last = 0} else if ('last' in gesture) {
  gesture = {}
}

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

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

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

以上是Zepto源碼中Gesture模組介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！