ZeptoソースのGestureモジュールを読む

Gestureモジュールは、IOS上のGestureイベントのカプセル化に基づいて、scale属性を利用して、pinchシリーズイベントをカプセル化する.
Zeptoソースシリーズの記事を読んでgithubに載せました.star:reading-zeptoを歓迎します.
ソースバージョン
本稿で読むソースコードはzepto 1である.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のイベントを監視し、これら3つのイベントに基づいて、pinch、pinchIn、およびpinchOutのイベントを組み合わせることができる.実は縮小と拡大のジェスチャー操作です.
変数gestureオブジェクトとTouchモジュールのtouchオブジェクトの役割の差は多くなく、まず「Zeptoソースコードを読むTouchモジュール」のTouchモジュールに対する分析を見ることができる.
parentIfText

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

この補助方法は、ターゲットノードを取得し、ノードが要素ノードでない場合は、親ノードをターゲットノードとします.イベントがテキストノードまたは擬似クラス要素でトリガーされると、要素ノードではない場合があります.
≪イベント｜Events｜ldap≫
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で2回の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ソースコードを読み取るコード構造

Zeptoソースコードを読み取る内部方法

Zeptoソースコードを読むツール関数

Zeptoソースコードを読む不思議な$

Zeptoソースコードの集合を読み取る動作

Zeptoソースコードの集合要素を読む

を検索する

Zeptoソースコードを読む動作DOM

Zeptoソースコードを読むスタイル操作

Zeptoソースコードを読み出す属性操作

ZeptoソースコードのEventモジュール

を読む

ZeptoソースコードのIEモジュール

を読む

Zeptoソースコードを読むCallbacksモジュール

ZeptoソースコードのDeferredモジュール

を読む

ZeptoソースコードのAjaxモジュール

を読む

Zeptoソースコードを読むAssetsモジュール

Zeptoソースコードを読むSelectorモジュール

Zeptoソースコードを読むTouchモジュール

リファレンス

指先の下のjs-マルチタッチウェブフロントエンド開発の3:複雑なジェスチャーを処理する

License
署名-非商業的使用-演繹禁止4.0国際(CC BY-NC-ND 4.0)
最後に、すべての文章は同時に微信の公衆番号に送信され、注目を歓迎し、意見を歓迎します.
作者:対角の反対側