モバイル開発フレームワーク分析(一)Hammer専門のジェスチャー制御

ずっとjQueryのソースチュートリアルを書いていて、他のフレームワークを研究する時間がありません.Hammerは私のプロジェクトの御用達のジェスチャーライブラリで、初期の1.xバージョンのswipeイベントの応答が不感度な問題でソースコードを変更した.xはすでに訂正されており、ソースコードの構造も全体的にリニューアルされており、論理的にも組織的にも個人的に深く入り込む必要があると思いますので、一連のチュートリアルとして一緒に勉強しましょう.
本章では主に説明して使用します.公式のAPIはすべて英語で、中国語の資料も相対的に少ないので、ソースコードの分析は後で更新されます.
ネット側のチュートリアルを通じてまだよく分からないところがたくさんありますが、後でソースコードを見てから理解する必要があるかもしれません.
Hammer.jsはジェスチャーを制御、カスタマイズするためのJavaScriptライブラリです.よくあるタッチ、ドラッグ、長押し、スケールなどを認識することができ、Webページでジェスチャーを処理したい人に役立つはずです.
公式には、2.0バージョンがジェスチャー識別器を含む完全な書き換えであり、最近のモバイルブラウザがtouch-action cssプロパティを利用することをサポートすることを改善していることも明らかになった.同時に複数のデバイスをサポートするため、マルチユーザが可能となる.機能的にもっと強くなった
使用は簡単で、ソースコードを導入し、インスタンスを作成します.
 
Hammer

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

デフォルト設定では、tap、doubletap、press、panとswipeの横スライド、マルチタッチpinchとrotateジェスチャーが自動的に追加されます.
pinchとrotate識別器はデフォルトで無効です.要素がブロックされますが、手動でオンにすることができます.

hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });

もちろんpanとswipeの縦スライドを開くこともできます

hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL

metaのタグでdoubletap/タッチ増幅を無効にすることができます.しかし、新しいブラウザはtouch-actionプロパティをサポートしているので、これは必要ありません.

 
1.基本的な実現
簡単なswipeイベントをバインドし、コールバックによってイベントの応答を得る

var mc = new Hammer(el);

mc.on('swipe',function(evt){
    console.log(evt)
})

 
2.イベント処理の方向変更
しかし、デフォルトではHammerは上下スライドの応答を遮断しているので、縦方向の応答だけを指す場合は、再構成で設定する必要があります.

mc.get('pan').set({
    direction: Hammer.DIRECTION_VERTICAL
});

mc.on('swipe',function(evt){
    console.log(evt)
})

また、横方向と縦方向の両方に応答することもできます.また、指定した識別器を個別に構成することもできます.

var mc = new Hammer(el);

mc.get('swipe').set({
    direction: Hammer.DIRECTION_ALL
});

mc.on('swipe pan',function(evt){
    console.log(evt)
})

get法により指定対応の識別器を得ることができ,ここではswipeに上下左右スライドの応答のみを起動するとpanイベントは開かず,この指定特定イベントの処理はかなり柔軟である.
もちろん以上は比較的簡単で一般的なイベント処理であるが、1つの要素に複数の異なるイベント処理をバインドすればHammerを導入することができる.マネージャー制御
 
3.Hammer.Manager
このManagerで独自の識別器のインスタンスを設定できます.より多くの認識されたジェスチャーを設定することができます.
複雑なマルチイベント処理のExamplehttps://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html

var mc = new Hammer.Manager(myElement, myOptions);

mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) );

mc.on("pan", handlePan);
mc.on("quadrupletap", handleTaps);

上記の例では、panとquadrupletapジェスチャーを含むインスタンスを作成します.
もちろん、1つの要素に複数のイベントを同時にバインドする場合はnew Hammer(el)を使用します.直接on法でも実現できる
しかし、実際のテスト効果では、認識度と柔軟性はHammerよりも高い.Managerはかなり低いです.
マネージャ制御には、2つの近いイベントを関連付けるためのrecognizeWith requireFailureが されているため、 が します.

var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotation();
pinch.recognizeWith(rotate);

もちろん な はどのように して、 でソースコードの を ってやっと りました. の が なすぎます
に は のhammer.input ， ， を することにも した.

hammertime.on("hammer.input", function(ev) {
   console.log(ev.pointers);
});

 
その にもパラメータがたくさんあります
えばイベントオブジェクト,Directions , Input Events, など
 
する Utils
addEventListener

Hammer.on(window, "load resize scroll", function(ev) {
    console.log(ev.type);
});

する

Hammer.each([10,20,30,40], function(item, index, src) { });

var options = {
    b: false
};

var defaults = {
    a: true,
    b: true,
    c: [1,2,3]
};
Hammer.merge(options, defaults);

// options.a == true
// options.b == false
// options.c == [1,2,3]

extend,inherit,bindFnなど
hammerjsは かにとても で、 の の の な をして、 はソースコードの で な のコードについて く ることができて、 のソースコードの も は に っています
くの は1、2 の で ですが、これは ではありません. は たちが んでいるのは ではなく、「 を る」ことで を することができます.
:https://www.cnblogs.com/aaronjs/p/4024819.html