首頁 >web前端 >js教程 >Zepto源碼中Gesture模組介紹

Zepto源碼中Gesture模組介紹

一个新手
一个新手原創
2017-09-25 09:28:072329瀏覽

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 來進行裝置偵測,裡面是一大堆正規表示式,所以這個模組後面是不打算分析的了。

然後是監控gesturestartgesturechangegestureend 事件,根據這三個事件,可以組合出pinchpinchInpinchOut 事件。其實就是縮小和放大的手勢操作。

其中變數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 事件,即放大效果。

最後將 e1e2  和 last 都設為 0

last 不存在的情況下(在呼叫 preventDefault 時),將 gesture 清空。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn