Zepto ソースコードの Gesture モジュールの紹介-jsチュートリアル-php.cn

Zepto ソースコードの Gesture モジュールの紹介

一个新手

リリース： 2017-09-25 09:28:07

オリジナル

2364 人が閲覧しました

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(&#39;gesturestart&#39;, function(e){
     ...
    }).bind(&#39;gesturechange&#39;, function(e){
      ...
    }).bind(&#39;gestureend&#39;, function(e){
     ...
    })

    ;[&#39;pinch&#39;, &#39;pinchIn&#39;, &#39;pinchOut&#39;].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 &#39;tagName&#39; in node ? node : node.parentNode
}

ログイン後にコピー

这个辅助方法是获取目标节点，如果节点不是元素节点，则用父节点作为目标节点。如果事件在文本节点或者伪类元素上触发时，会出现不是元素节点的情况。

事件

gesturestart

bind(&#39;gesturestart&#39;, 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(&#39;gesturechange&#39;, function(e){
  gesture.e2 = e.scale
})

ログイン後にコピー

在 gesturechange 时，更新终点 guesture.e2 的缩放值。

gestureend

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

ログイン後にコピー

如果 gesture.e2 存在（不可能有小于 0 的情况吧？），在起点的缩放值和终点的缩放值不相同的情况下，触发 pinch 事件；如果起点的缩放值比终点的缩放值大，则继续触发 pinchIn 事件，则缩小效果；如果起点的缩放值比终点的缩放值小，则继续触发 pinchOut 事件，即放大效果。

最终将 e1 、 e2 和 last 都设置为 0 。

在 last 不存在的情况下（在调用 preventDefault 时），将 gesture

ソースコードのバージョン

この記事で読んだソースコードはzepto1.2.0です🎜

GitBook

🎜"reading-zepto"🎜

全体構成

rrreee🎜 ios かどうかを判断するための Determine $.os.ios があることに注意してください。この判断には、デバイス検出モジュール Detect の導入が必要です。このモジュールはデバイス検出に userAgent を使用しますが、これには多くの正規表現が含まれるため、このモジュールは後で分析されません。 🎜🎜次に、gesturestart、gesturechange、gestureend イベントを監視し、これら 3 つのイベントに基づいて pinch を組み合わせることができます。、pinchIn および pinchOut イベント。実はズームイン、ズームアウトのジェスチャー操作です。 🎜🎜変数 gesture オブジェクトには、Touch モジュールの touch オブジェクトと同様の機能があります。まず、「Touch モジュール」を見てください。 Zepto ソースコードの読み取り」 Touch モジュールの分析。 🎜

parentIfText

rrreee🎜 この補助メソッドは、ターゲットノードを取得するためのものです。ノードが要素ノードでない場合、親ノードをターゲットノードとして使用します。イベントがテキストノードまたは疑似クラス要素でトリガーされた場合、それは要素ノードではありません。 🎜

イベント

gesturestart

rrreee🎜 Touch モジュールと同様に、delta も gesturestart のときに使用されます。 > code> を使用して 2 つの start 間の時間間隔を記録し、gesture.target を使用してターゲット要素を保存します。e1 は、その時点でのスケーリング値です。出発点。 🎜

gesturechange

rrreee🎜 gesturechange で、エンドポイント guesture.e2 のスケーリング値を更新します。 🎜

gestureend

rrreee🎜 gesture.e2 が存在する場合 (0 未満にすることはできませんよね?)、開始点のスケーリング値と終了点ズーム値が異なる場合、開始点のズーム値が終了点のズーム値より大きい場合、

pinchIn イベントは引き続きトリガーされ、開始点が終了点のズーム値より大きい場合はズーム効果が実現され、ズームの場合は <code>pinchIn

イベントがトリガーされます。値が終点のズーム値より小さい場合、pinchOut イベントは引き続きトリガーされます (ズーム効果)。 🎜🎜最後に、e1、e2、last はすべて 0 に設定されます。 🎜🎜 last が存在しない場合 (preventDefault が呼び出された場合)、gesture を空にします。 🎜

以上がZepto ソースコードの Gesture モジュールの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。