- PVSM.RU - https://www.pvsm.ru -
Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.
Первая проблема jQuery – это тачи. Обработка тачей по средством эвента 'click’ не является лучшей идеей. Благодаря тому, что мобильным браузерам приходиться поддерживать эвент click у нас это получится, но дорогой ценой. На мобильных устройствах click эвент не вызывается пока не пройдет 300мс после того как пользователь коснулся экрана, для определения скроллинг ли это или двойной тап или что-то другое и сработает обработка эвента click, и это может показаться незначительным, но реакция на другое действие через другие 300мс вызовет ощутимую задержку.
Чтобы избежать этого можно использовать тап-эвенты, которые поддерживаются спутником jQuery – jQuery Mobile. Но jQuery Mobile также не лучшее решение. Во первых, он очень большой по размеру, как и jQuery и даже сервисы, которые позволяют вырезать части jQuery не помогают уменьшить его размер в достаточной степени. Второй серьезный недостаток – отсутствие поддержки жестов.
Мобильная версия WebKit (iOS, Android) поддерживает следующие эвенты:
Итак, чтобы затрекать свайп нам понадобиться следующий код:
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/ [1]
Из-за сложности обработки жестов можно обратиться к альтернативам jQuery, которые поддерживают
В поисках альтернатив можно выдвинуть следующие требования:
Стандартный браузер Android не поддерживает Multitouch до версии 3.2. Это значит, что Multitouch не будет работать на любом приложении запущенном в PhoneGap на версии Android до 3.2.
При выборке элементов по классу дела обстоят так:
Как raw class взята имплементация Robert Nyman http://code.google.com/p/getelementsbyclassname/ [7]
Больше результатов: http://jsperf.com/zepto-vs-jquery-selectors/12 [8]
Как видно по обзору лидеров нет и для каждого случая нужно использовать что-то свое. Так как мое приложение очень активно использует жесты и мне необходимо было управлять DOM и отправлять кросс-доменные запросы, я остановился на связке Zepto.JS + Hammer.JS. Проблем совместимости не было
Автор: sagens
Источник [9]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/33510
Ссылки в тексте:
[1] http://jsfiddle.net/sagens/zNvtL/2/: http://jsfiddle.net/sagens/zNvtL/2/
[2] http://quojs.tapquo.com/: http://quojs.tapquo.com/
[3] http://zeptojs.com: http://zeptojs.com
[4] http://eightmedia.github.io/hammer.js: http://eightmedia.github.io/hammer.js
[5] https://github.com/plainview/Jester: https://github.com/plainview/Jester
[6] http://mwbrooks.github.io/thumbs.js/: http://mwbrooks.github.io/thumbs.js/
[7] http://code.google.com/p/getelementsbyclassname/: http://code.google.com/p/getelementsbyclassname/
[8] http://jsperf.com/zepto-vs-jquery-selectors/12: http://jsperf.com/zepto-vs-jquery-selectors/12
[9] Источник: http://habrahabr.ru/post/178611/
Нажмите здесь для печати.