ホームページ > 記事 > ウェブフロントエンド > Zepto ソース コードの Gesture モジュールの紹介
Gesture
モジュールは、IOS
上の Gesture
イベントのカプセル化に基づいており、scale
属性を使用してカプセル化しますpinch
一連のイベント。 Gesture
模块基于 IOS
上的 Gesture
事件的封装,利用 scale
属性,封装出 pinch
系列事件。
本文阅读的源码为 zepto1.2.0
《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
模块的分析。
function parentIfText(node){ return 'tagName' in node ? node : node.parentNode }
这个辅助方法是获取目标节点,如果节点不是元素节点,则用父节点作为目标节点。如果事件在文本节点或者伪类元素上触发时,会出现不是元素节点的情况。
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
是起点时的缩放值。
bind('gesturechange', function(e){ gesture.e2 = e.scale })
在 gesturechange
时,更新终点 guesture.e2
的缩放值。
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
ios
かどうかを判断するための Determine $.os.ios
があることに注意してください。この判断には、デバイス検出モジュール Detect
の導入が必要です。このモジュールはデバイス検出に userAgent
を使用しますが、これには多くの正規表現が含まれるため、このモジュールは後で分析されません。 🎜🎜次に、gesturestart
、gesturechange
、gestureend
イベントを監視し、これら 3 つのイベントに基づいて pinch
を組み合わせることができます。 、pinchIn
および pinchOut
イベント。実はズームイン、ズームアウトのジェスチャー操作です。 🎜🎜変数 gesture
オブジェクトには、Touch
モジュールの touch
オブジェクトと同様の機能があります。まず、「Touch モジュール」を見てください。 Zepto ソース コードの読み取り」 Touch
モジュールの分析。 🎜Touch
モジュールと同様に、delta
も gesturestart
のときに使用されます。 > code> を使用して 2 つの start
間の時間間隔を記録し、gesture.target
を使用してターゲット要素を保存します。e1
は、その時点でのスケーリング値です。出発点 。 🎜gesturechange
で、エンドポイント guesture.e2
のスケーリング値を更新します。 🎜gesture.e2
が存在する場合 (0
未満にすることはできませんよね?)、開始点のスケーリング値と終了点 ズーム値が異なる場合、開始点のズーム値が終了点のズーム値より大きい場合、pinchIn イベントは引き続きトリガーされ、開始点が終了点のズーム値より大きい場合はズーム効果が実現され、ズームの場合は <code>pinchIn
イベントがトリガーされます。値が終点のズーム値より小さい場合、pinchOut
イベントは引き続きトリガーされます (ズーム効果)。 🎜🎜最後に、e1
、e2
、last
はすべて 0
に設定されます。 🎜🎜 last
が存在しない場合 (preventDefault
が呼び出された場合)、gesture
を空にします。 🎜以上がZepto ソース コードの Gesture モジュールの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。