Zepto源碼之gusture模塊

gesture 模塊是針對 IOS 系統上瀏覽器的 gesture 事件進行的封裝。

;(function($){
  // 判斷系統是不是 ios
  if ($.os.ios) {
    var gesture = {}, gestureTimeout

    // 獲取目標節點，如果目標節點不是元素節點，那麼獲取父節點
    function parentIfText(node){
      return 'tagName' in node ? node : node.parentNode
    }

    // 給瀏覽器綁定 gesturestart, gesturechange, gestureend 三個方法
    $(document).bind('gesturestart', function(e){
      // 記錄兩次 start 之間的間隔時間
      var now = Date.now(), delta = now - (gesture.last || now)
      // 獲取要操作的元素節點
      gesture.target = parentIfText(e.target)
      // 清空已有的計時器任務
      gestureTimeout && clearTimeout(gestureTimeout)
      // 獲取起點的縮放值
      gesture.e1 = e.scale
      gesture.last = now
    }).bind('gesturechange', function(e){
      // 更新終點的縮放值
      gesture.e2 = e.scale
    }).bind('gestureend', function(e){
      // 如果有縮放的情況
      if (gesture.e2 > 0) {
        // 根據縮放值的變化情況調用對應的 pinchIn, pinchOut, pinch 方法
        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 = {}
      }
    })

    // 將 gesturechange, gestureend, gesturestart 綁定到對應的 pinch, pinchout, pinchin 上面
    // 從而在多個操作系統上，對應的方法調用事件得以統一
    ;['pinch', 'pinchIn', 'pinchOut'].forEach(function(m){
      $.fn[m] = function(callback){ return this.bind(m, callback) }
    })
  }
})(Zepto)