Zepto 소스 코드의 제스처 모듈 소개

Gesture 모듈은 IOS의 Gesture 이벤트 캡슐화를 기반으로 하며 scale 속성을 ​​사용하여 캡슐화합니다. pinch 일련의 이벤트. 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

소스코드 버전

이 글에서 읽은 소스코드는 zepto1.2.0🎜

GitBook

🎜"reading-zepto"🎜

전체 구조

rrreee🎜입니다 ios인지 확인하려면 $.os.ios 확인이 있습니다. 이 판단에는 장치 감지 모듈 Detect의 도입이 필요합니다. 이 모듈은 많은 정규식이 포함된 장치 감지를 위해 userAgent를 사용하므로 이 모듈은 나중에 분석되지 않습니다. 🎜🎜그런 다음 gesturestart, gesturechange, gestureend 이벤트를 모니터링하고 이 세 가지 이벤트를 기반으로 pinch를 결합할 수 있습니다. , pinchIn 및 pinchOut 이벤트. 실제로는 확대, 축소하는 제스처 동작이다. 🎜🎜변수 gesture 개체는 Touch 모듈의 touch 개체와 유사한 기능을 가지고 있습니다. 먼저 "Touch Module for"를 살펴보세요. Zepto 소스 코드 읽기' Touch 모듈 분석. 🎜

parentIfText

rrreee🎜이 보조 방법은 대상 노드를 가져오는 것입니다. 노드가 요소 노드가 아닌 경우 상위 노드를 대상 노드로 사용합니다. 이벤트가 텍스트 노드 또는 의사 클래스 요소에서 트리거되면 요소 노드가 아닙니다. 🎜

이벤트

gesturestart

rrreee🎜Touch 모듈과 마찬가지로 delta는 gesturestart에도 사용됩니다. > code> 두 start 사이의 시간 간격을 기록하려면 gesture.target을 사용하여 대상 요소를 저장하세요. e1은 출발점 . 🎜

gesturechange

rrreee🎜gesturechange에서 엔드포인트 guesture.e2의 배율 값을 업데이트하세요. 🎜

gestureend

rrreee🎜gesture.e2가 존재한다면(0보다 작을 수는 없겠죠?) 시작점의 스케일링 값과 종료 지점 확대/축소 값이 다른 경우 pinch 이벤트가 트리거되고, 시작 지점의 확대/축소 값이 종료 지점의 확대/축소 값보다 크면 pinchIn 이벤트는 계속 트리거되고 확대/축소 효과가 달성됩니다. 시작점이 종료점의 확대/축소 값보다 크면 확대/축소가 발생하면 <code>pinchIn 이벤트가 실행됩니다. 값이 끝점의 확대/축소 값보다 작으면 pinchOut 이벤트가 계속 발생합니다. 즉, 확대/축소 효과가 발생합니다. 🎜🎜마지막으로 e1, e2 및 last는 모두 0으로 설정됩니다. 🎜🎜 last가 존재하지 않는 경우 gesture를 비우세요(preventDefault가 호출되는 경우). 🎜

위 내용은 Zepto 소스 코드의 제스처 모듈 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!