🐴 🏬 🎌 モバイルWeb開発：ジェスチャー、フレームワーク、数字 🏛️ 👇🏽 💤

モバイルサイトおよびモバイルデバイス用アプリケーションのWeb開発のテーマを続けると、DOMを操作して非同期リクエストを送信するためのフレームワークなどのトピックに触れるしかありません。

デスクトップ標準は長い間jQueryでしたが、モバイルプラットフォームでの開発には適していません。 jQueryがどのようにモバイルデバイスと友達になるかを見てみましょう。

jQueryおよびモバイルデバイス。

最初のjQueryの問題はタチです。クリックイベントでクリックを処理することはお勧めできません。モバイルブラウザはクリックイベントをサポートしなければならないという事実のため、私たちはそれを行うことができますが、高価です。モバイルデバイスでは、ユーザーが画面に触れてから300ミリ秒後までクリックイベントが呼び出されません。スクロールまたはダブルタップなどが行われ、クリックイベント処理が機能するかどうかを判断します。 300ミリ秒は顕著な遅延を引き起こします。

これを回避するには、jQueryサテライト-jQuery Mobileでサポートされているタップイベントを使用できます。ただし、jQuery Mobileも最適なソリューションではありません。まず、jQueryのようにサイズが非常に大きく、jQueryの一部をカットできるサービスでも、サイズを十分に小さくすることはできません。 2番目の主な欠点は、ジェスチャーのサポートがないことです。

理論上のジェスチャー。

WebKitのモバイルバージョン（iOS、Android）は、次のイベントをサポートしています。

touchstart-タッチするとトリガーされます。アナログ-mouseDown
touchmove-タッチが移動するとトリガーされます。アナログ-mouseMove
touchend-タップが終了するとトリガーされます。アナログ-mouseUp
touchcancel-タッチが中断されると開始されます（ユーザーが画面をロックし、ホームボタンを押し、画面の向きを変更しました）

したがって、svaypをスワイプするには、次のコードが必要です。

var touchstartX = 0; var touchstartY = 0; var touchendX = 0; var touchendY = 0; var gesuredZone = document.getElementById('gesuredZone'); gesuredZone.addEventListener('touchstart', function(event) { touchstartX = event.screenX; touchstartY = event.screenY; }, false); gesuredZone.addEventListener('touchend', function(event) { touchendX = event.screenX; touchendY = event.screenY; handleGesure(); }, false); function handleGesure() { var swiped = 'swiped: '; if (touchendX < touchstartX) { alert(swiped + 'left!'); } if (touchendX > touchstartX) { alert(swiped + 'right!'); } if (touchendY < touchstartY) { alert(swiped + 'down!'); } if (touchendY > touchstartY) { alert(swiped + 'left!'); } if (touchendY == touchstartY) { alert('tap!'); } }

実例：

http://jsfiddle.net/sagens/zNvtL/2/

ジェスチャ処理は複雑であるため、ジェスチャをサポートするjQueryの代替を参照できます

JQueryの代替

代替案を探して、次の要件を提示できます。

DOM操作
ジェスチャー処理
非同期リクエスト
小さいサイズ

フレームワーク

Quo.JS。

フレームワークへのリンク： http : //quojs.tapquo.com/
サポートされるイベント：タップ、シングルタップ、ダブルタブ、ホールド、2xFingersタップ、2xFingersダブルタップ、上にスワイプ、右にスワイプ、下にスワイプ、左にスワイプ、左にスワイプ、ドラッグ、左に回転、右に回転、回転、ピンチアウトピンチ、指
フレームワークサイズ： 18KB最小化。
長所：
1. イベントに加えて、CSSセレクター、属性の操作、jQueryのカウンターパートに非常に類似したDOMおよびAJAXクエリの操作をサポートします
2. 動作するために余分なものは必要ありません
3. フレームワークのサイズが小さい
4. 競合を避けるために$ではなく$$を使用することを除いて、jQueryでの移行は非常に簡単ですが、これは簡単に処理されます
短所：
1. 利用可能なドキュメントはありません

Zepto.JS

フレームワークへのリンク： http : //zeptojs.com
サポートされているイベント：タップ、シングルタップ、ダブルタップ、ロングタップ、スワイプ、スワイプ左、スワイプ右、スワイプアップ、スワイプダウン
フレームワークサイズ： 11KB最小化。
長所：
1. モバイル開発に焦点を当てたフレームワーク。また、jQueryのようなスタイルがあり、コードはjQueryとほぼ互換性があります。
2. 最新のブラウザのみをサポート
短所：
1. ドラッグとマルチタッチをサポートしていません*

図書館

Hammer.js

ライブラリへのリンク： http : //eightmedia.github.io/hammer.js
サポートされるイベント：ホールド、タップ、ダブルタップ、ドラッグ、ドラッグスタート、ドラッグエンド、ドラッグアップ、ドラッグダウン、ドラッグレフト、ドラッグライト、スワイプ、スワイプアップ、スワイプダウン、スワイプレフト、スワイプライト、トランスフォーム、トランスフォームスタート、トランスフォームエンド、回転、ピンチ、ピンチン、ピンチアウト、タッチ、リリース
ライブラリサイズ： 13 KB最小化。
長所：
1. 複雑なジェスチャを追跡するためのタッチとリリースを含む、サポートされている多数のジェスチャ
2. jQueryのプラグインがあります
3. プラグインはZepto.JSと完全に互換性があります
短所：
1. サイズ。 13 KB-ジェスチャーだけでは多すぎる

道化師

ライブラリへのリンク： https : //github.com/plainview/Jester
サポートされているイベント：タップ、ダブルタップ、スワイプ、フリック、ピンチ、ピンチ矢印、ピンチ拡大、ピンチ終了
ライブラリサイズ： 17KB最小化。
長所：
1. スタンドアロンライブラリ
短所：
1. マルチタッチ*とドラッグがない

Thumbs.js

ライブラリへのリンク： http : //mwbrooks.github.io/thumbs.js/
サポートされるイベント： touchstart、touchend、touchmove
ライブラリサイズ： 612B最小化。
長所：
1. スタンドアロンライブラリ
2. 小さいサイズ
短所：
1. 標準イベントtouchstart、touchend、touchmoveのサポートを追加するだけです。ジェスチャーは自分で処理する必要があります。
*注：

標準のAndroidブラウザーは、バージョン3.2までのマルチタッチをサポートしていません。これは、Androidバージョン3.2までのPhoneGapで実行されているアプリケーションではMultitouchが動作しないことを意味します。

オウムを数える

クラスごとにアイテムを選択する場合、次のようになります。

生のクラスの実装方法Robert Nyman http://code.google.com/p/getelementsbyclassname/

その他の結果： http : //jsperf.com/zepto-vs-jquery-selectors/12

合計

リーダーのレビューからわかるように、何もありません。それぞれのケースで、異なるものを使用する必要があります。私のアプリケーションはジェスチャを非常に積極的に使用し、DOMを管理し、クロスドメインリクエストを送信する必要があるため、Zepto.JS + Hammer.JSバンドルに決めました。互換性の問題はありませんでした

モバイルWeb開発：ジェスチャー、フレームワーク、数字