Современные библиотеки JavaScript — это просто чудовища — просто взгляните на jQuery. Когда вы создаете мобильное приложение или даже просто ориентируетесь на современные браузеры, библиотека, которая намного более изящна и гибка, становится более вкусным предложением.
Сегодня мы рассмотрим одну из таких библиотек под названием Zepto .
Проблема со смешением настольных библиотек и мобильных устройств
Одной вещью, которая пробежала мимо большинства радаров, было появление мобильных устройств.
Понимаете, за последние годы интернет и технология, которые его используют, стремительно развивались. Мы перешли от статических сайтов к веб-приложениям к динамическим веб-приложениям, а затем к современным приложениям с гиперчувствительностью и современными вещами. Одной вещью, которая пробежала мимо большинства радаров, было появление мобильных устройств.
Подумайте об этом: многие из нас используют смартфоны и используют их для постоянного просмотра. Даже дома, нетривиальная часть моего круга приняла планшетное устройство для случайного серфинга и электронной почты. Хотя этот поток устройств хорош с точки зрения экспозиции, он не лишен своих предостережений.
Вместо того, чтобы думать об этих устройствах как об ограниченном дисплее, как потребители, нам, как разработчикам, нужно думать о них с точки зрения ресурсов и пропускной способности. Не все из них имеют процессор с частотой четырехъядерных процессоров с тактовой частотой в Гаджлионы ГГц и не имеют большого количества памяти. И давайте даже не будем начинать с пропускной способностью. Большая часть просматривающего населения все еще застряла на этих адских оправданиях для мобильного интернет-соединения.
Я думаю, вы видите, куда я иду с этим. Большие монолитные библиотеки, такие как jQuery или Prototype, определенно имеют свое место, но для этой мобильной эры, я думаю, есть место для чего-то более гибкого. И многие разработчики, похоже, со мной согласны.
Добавлен весь код для работы библиотеки между браузерами
Еще одна большая проблема, о которой я не упомянул, это то, что современные библиотеки делают много кроссбраузерной работы. На самом деле, большое преимущество jQuery, поначалу, заключалось в том, что он абстрагировался от множества кросс-браузерных изысков, с которыми приходилось сталкиваться разработчикам интерфейса. Даже сейчас jQuery много делает для того, чтобы ничего не сломалось в разных браузерах.
Но если вы разработчик, который рассчитывает обслуживать только современные устройства, вам действительно нужно все это, смею сказать, хладнокровие? Краткий ответ: нет. Вырезая ненужный код, вы оба:
- повысить производительность, так как браузер анализирует меньше строк кода и
- уменьшите размер вашего файла, что поможет мобильным устройствам с ограниченной пропускной способностью.
Думаете, что эта проблема раздута? Вот случайный фрагмент кода из источника jQuery:
|
1
2
3
4
5
6
7
8
|
isPlainObject: function( obj ) {
// Must be an Object.
// Because of IE, we also have to check the presence of the constructor property.
// Make sure that DOM nodes and window objects don’t pass through, as well
if ( !obj || jQuery.type(obj) !== «object» || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
}
….
|
Или что-то более эзотерическое:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
// Perform a simple check to determine if the browser is capable of
// converting a NodeList to an array using builtin methods.
// Also verifies that the returned array holds DOM nodes
// (which is not the case in the Blackberry browser)
try {
Array.prototype.slice.call( document.documentElement.childNodes, 0 )[0].nodeType;
// Provide a fallback method if it does not work
} catch( e ) {
// The intended fallback
}
….
|
Это может выглядеть довольно тривиально, но имейте в виду, что это имеет тенденцию складываться. Если вы собираетесь использовать только современные браузеры, как на настольных компьютерах, так и на мобильных устройствах, то нет никакой необходимости во всех этих дополнительных проверках и взломах. Сокращая ваши предполагаемые браузеры, вы выигрываете как по пропускной способности, так и по производительности!
Так в чем же дело Цепто?
Я слышал, что вы, ребята, говорите: «Хватит накапливаться! Расскажите нам о проклятой библиотеке!». Итак, давайте вернемся к этому.
Zepto, как его назвали, представляет собой мобильную среду JavaScript, которая устраняет обе проблемы, упомянутые выше. Он имеет очень маленькую кодовую базу и весит около 8 килобайт.
Ему удается быть таким стройным, в основном вырезая кросс-браузерные вещи. Когда он был создан, основной задачей была поддержка только Webkit. Если быть точным, мобильная версия Webkit. Теперь он расширен и для работы с настольными браузерами — но только современными. Не нужно больше ругаться, чтобы все заработало в этом IE6!
API Zepto совместим с jQuery. Если вы используете jQuery, вы уже знаете, как использовать Zepto.
Другая область, в которой Zepto удается быть маленьким, — это то, как ему удается избежать раздувания функций. Базовая библиотека, похоже, не включает никаких посторонних функций. Даже функции AJAX и анимации доступны в виде отдельных модулей, если возникнет такая необходимость. Для пользователей, которые в основном используют библиотеки для обхода и манипулирования DOM, это абсолютная божья посылка.
И, о, я упоминал главную часть вечеринки Zepto? API Zepto совместим с jQuery. Если вы используете jQuery, вы уже знаете, как использовать Zepto.
Являются ли Zepto и jQuery взаимозаменяемыми?
Да и нет. Зависит это более удачный ответ.
Да, потому что ядро API Zepto в значительной степени имитирует jQuery. Чтобы упростить использование и значительно сократить время обучения, Zepto эмулирует API jQuery. Большинство часто используемых методов, таких как манипуляции с DOM, названы практически одинаково и имеют одинаковые параметры в одинаковом порядке. Сигнатуры методов одинаковы для инженеров.
Давайте посмотрим на небольшой пример:
|
1
|
$(‘#element’).html(«Hey! Are you on the GW2 beta?»);
|
Выглядит знакомо? Должно. Это тот же код, который вы использовали бы с jQuery для изменения HTML-элемента. Как я уже говорил, это не ограничивается только этим методом. Большинство операций DOM строятся так же, как и ваши утилиты, например, AJAX.
С другой стороны, API не соответствует 100%. Zepto отказывается от некоторых методов, присутствующих в jQuery, которые могут нарушить ваш код. И что не менее важно, поскольку Zepto является подмножеством jQuery, вы, вероятно, упустите некоторые встроенные функции — Deferred — прекрасный пример. Вы просто не можете поменять jQuery с Zepto и ожидать, что все будет работать.
И для меня самым большим препятствием являются методы, которые были скопированы из jQuery, но имеют другую сигнатуру и набор функций. Это немного расстраивает, когда вы думаете, что используете правильный метод, но это не так. Способность метода clone копировать обработчики событий является хорошим примером. Не глядя на источник, я бы действительно этого не узнал.
Изучение основного API
Если вы работали с jQuery раньше, все, что ниже, должно быть дурацким праздником.
Хватит болтать, давайте сейчас углубимся в некоторый код. Как и во многих современных библиотеках, обход и манипулирование DOM является основной функцией, которую каждый хочет усовершенствовать. Поскольку API и общая функциональность очень похожи на jQuery, я думаю, вы можете смело предполагать, что все на высшем уровне.
Давайте посмотрим на некоторые общие функции, связанные с DOM.
Изменение содержимого HTML контейнера
Это простейшие операции DOM: чтение или изменение HTML-содержимого элемента. С Zepto это так же просто, как вызов метода html для контейнера и передача нового HTML, если это необходимо.
Например, он получает HTML-код элемента и сохраняет его в переменной.
|
1
|
var containerText = $(‘#element’).html();
|
Или, если вы хотите изменить его на что-то другое:
|
1
|
$(‘#element’).html(«Hola there!»);
|
Довольно просто, правда?
Добавить / Добавить элемент в контейнер
Как и в случае с jQuery, Zepto использует методы append и prepend . И вызов остается прежним.
|
1
2
3
4
5
|
$(‘#element’).append(«<p>This is the appended element.</p>»);
// or
$(‘#element’).prepend(«<p>This is the appended element.</p>»);
|
События
События являются основой любого современного приложения, и Zepto предоставляет вам множество простых в использовании методов для выполнения вашей работы. Большая часть работы выполняется методом on .
|
1
2
3
|
$(‘#element’).on(‘click’, function(e){
// Your code here
});
|
Легко читается и легко разбирается. Если вы чувствуете старую школу и хотите использовать методы bind, delegate или live , не делайте этого . Как и в случае с jQuery, они здесь не рекомендуются.
AJAX
Любая современная низкоуровневая библиотека должна предоставлять простую в использовании оболочку для AJAX, и Zepto не подведет вас. Вот пример очень простого AJAX-запроса.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
$.ajax({
type: ‘POST’,
url: ‘/project’,
data: { name: ‘Super Volcano Lair’ },
dataType: ‘json’,
success: function(data){
// Do some nice stuff here
},
error: function(xhr, type){
alert(‘YU NO WORK?’)
}
});
|
Все может выглядеть немного сложнее, но то, что мы делаем, можно свести к следующему:
- Создание объекта AJAX и передача ему параметров.
- В опциях укажите, что мы хотели бы сделать запрос POST. По умолчанию это GET, я думаю.
- Укажите URL для POST.
- Укажите данные, которые необходимо отправить на сервер. Как видите, я безумно смеюсь и пытаюсь создать свое собственное логово супер злодеев.
- Укажите методы, которые будут запускаться при успешном выполнении или сбое запроса. Таким образом, мы можем обновить пользовательский интерфейс, что бы ни случилось.
Как и в случае с jQuery, существует отдельный метод для запроса GET или POST или просто для загрузки некоторого веб-содержимого.
Анимации
К чему придет мир без нескольких анимаций? Zepto раскрывает всемогущий animate метод, который должен удовлетворить большинство ваших потребностей в анимации.
|
1
2
3
|
$(‘#element’).animate({
opacity: 0.50, top: ’30px’, color: ‘#656565’
}, 0.5)
|
Мы в основном выбираем элемент для анимации, вызываем метод animate и указываем свойства для анимации, а также время, необходимое для завершения анимации. Zepto делает все остальное
Или, если вам просто нужно показать и скрыть элемент, переключение должно работать очень хорошо.
Я думаю, вы понимаете, в чем дело — DOM, API анимации и событий Zepto в значительной степени эмулирует JQuery. И, как мы все знаем, jQuery чертовски хорош с этими вещами. Если вы работали с jQuery раньше, вам не придется сталкиваться с большими проблемами здесь.
Взгляд на сенсорные события и другие тонкости
Zepto предоставляет вам несколько специальных событий, которые вы можете использовать в своих приложениях. Это включает:
- swipe — обрабатывает ваше обычное движение пальцем. Есть также отдельные события для разных направлений, например, swipeLeft .
- tap — срабатывает в ответ на общее действие нажатия.
- doubleTap — Очевидно, это обрабатывает двойное нажатие.
- longTap — срабатывает, когда элемент активируется более 750 мс. Там, кажется, не так просто изменить эту задержку.
Вот быстрый пример, восхитительно взятый из документации Zepto.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<ul id=items>
<li>List item 1 <span class=delete>DELETE
<li>List item 2 <span class=delete>DELETE
</ul>
<script>
// show delete buttons on swipe
$(‘#items li’).swipe(function(){
$(‘.delete’).hide()
$(‘.delete’, this).show()
})
// delete row on tapping delete button
$(‘.delete’).tap(function(){
$(this).parent(‘li’).remove()
})
</script>
|
Когда элемент списка перемещается, кнопка удаления любого другого элемента списка скрыта, и отображаются только текущие. Нажатие на кнопку удаления удаляет родительский элемент li этой кнопки, который будет удален из DOM.
Это должно быть довольно похоже на то, как вы обычно обрабатываете события, за исключением того, что вы привязываете свои обработчики к различным событиям, вот и все.
Завершение
Учитывая, что и для кого я развиваю, это идеально подходит для меня; но, как всегда, ваш пробег может варьироваться.
Ну, это почти все, что есть в Zepto. По своей сути, это должна была быть скудная, бесполезная версия jQuery, которую можно было бы использовать на мобильных устройствах. Со временем он превратился в скудную библиотеку, которая устраняет поддержку архаичных браузеров.
Учитывая, что и для кого я развиваю, это идеально подходит для меня; но, как всегда, ваш пробег может варьироваться. Вы можете быть заблокированы с помощью плагинов jQuery, которые требуют нетривиальных модификаций, чтобы он работал под Zepto или просто больше верили в jQuery.
В любом случае, вам действительно нужно дать Zepto попытку понять, как он вписывается в ваш рабочий процесс, прежде чем списывать его со счетов. Я сделал, и я люблю это!
Ну, это все от меня сегодня. Дайте мне знать, что вы думаете в комментариях ниже, и большое спасибо за чтение!