Библиотеки JavaScript
Дата публикации: 09.09.2011
Жизнь JavaScript-программистов круто изменилась в 2006 году вместе с появлением Ajax и сотен библиотек, которые помогают нам работать с этим языком. Многие из этих библиотек вносят изменяют или добавляют к языку абсолютно новые варианты поведения, создавая новые языки внутри (или даже не внутри, а на базе) JavaScript.
Если библиотеки строятся на основе JavaScript, а мобильные браузеры поддерживают этот язык, спрашивается, о чем нам тут беспокоится? Проблема в том, что многие библиотеки строятся на «не-совсем-стандартных» вещах и если в популярных декстопных браузерах (Internet Explorer, Firefox, Safari, Chrome, Opera) они уже успешно опробованы и протестированы, то с мобильными дела обстоят хуже. Например, как мы уже видели, некоторые функции DOM отсутствуют во многих мобильных браузерах.
Это первая причина, почему нужно с осторожностью подходить к использованию больших JavaScript-библиотек. Вторая (не менее важная) причина — влияние на время загрузки и выполнения. Как уже упоминалось ранее, эти библиотеки изменяют язык и поведение объектов и даже если мы вообще не будем применять код библиотеки (или будем использовать небольшой фрагмент), библиотека все равно должна будет полностью загрузится и на это потребуется время. Как следствие, в некоторых браузерах могут возникнуть проблемы с производительностью. Мы протестируем, сколько нужно различным библиотекам времени для инициализации в мобильных браузерах.
Полный размер некоторых библиотек превышает 600 KB. Нам нужно осторожно применять код, так как он существенно влияет на производительность, увеличивает сетевой трафик, требует больше памяти и время выполнения. По возможности, старайся не использовать большие библиотеки или бери из них только нужный фрагмент кода.
В таблице 9.5 приведены результаты для библиотек jQuery, Prototype, Yahoo! UI и Dojo. Помни, что время выполнения во многом зависит от оборудования и возможностей процессора. Эти тесты просто дают тебе информацию о возможном количестве времени, которое понадобится для инициализации той или иной библиотеки.
| Браузер/ Платформа | jQuery | Prototype | Yahoo! UI | Dojo |
|---|---|---|---|---|
| Safari | 1,8 | 0,2 | 0 | 0,1 |
| браузер Android | 4 | 2,5 | 0,4 | 4,6 |
| Symbian/S60 | 1,7 | 0,9 | 0,2 | 0,7 |
| Nokia Series 40 | Невозможно вычислить | |||
| webOS | 0,2 | 0,5 | 0,1 | 0,4 |
| BlackBerry | 6,2 | 5 | 0,8 | 7 |
| NetFront | 8 | 13,6 | 3,7 | 11,1 |
| Internet Explorer | 2 | 3 | 0,4 | 2 |
| Motorola Internet Browser | Нет поддержки | |||
| Opera Mobile | 1,4 | 0,3 | 0,1 | 0,4 |
| Opera Mini | Невозможно вычислить, выполняются на сервере | |||
Вывод: по возможности не используй эти библиотеки. Если же без них не обойтись — применяй их только для смартфонов, но помни, что некоторые функции и плагины могут работать некорректно.
Мобильные библиотеки
Хорошие новости: многие разработчики выпустили альтернативные (более легкие) варианты библиотек специально для мобильных устройств. Есть также полноценные фреймворки (в основном для iPhone) для разработки мобильных веб-приложений, такие как jQTouch, iUI, iWebKit и Webapp.Net (рассмотрим их позже). Эти фреймворки применяются для обеспечения визуализации, событий и взаимодействия на наших веб-сайтах.
Есть также и другие библиотеки, которые могут заменить jQuery и т.п. на мобильных устройствах. Они очень легкие и предлагают в основном базовые DOM, события и поддержку Ajax.
baseJS
baseJS — легкая библиотека (8 KB), совместима с Safari и другими WebKit-браузерами, доступна по ссылке http://paularmstrongdesigns.com/projects/basejs. Была полностью протестирована на Safari, начиная с версии iOS 1.0 до 3.0. В baseJS есть похожий на jQuery селектор, $(selector) и еще некоторые похожие методы: each, addClass, hasClass, removeClass, toggleClass, getXY, fire и несколько методов Ajax.
XUI
XUI — простой JavaScript-фреймворк для создания мобильных веб-сайтов, в сжатом виде весит всего 6.7 KB. Бесплатно доступен на сайте http://xuijs.com, проверен в браузерах WebKit и Opera Mobile. Разработчики работают над поддержкой IE Mobile и BlackBerry.
XUI также похож на jQuery, но более мощный, чем библиотека baseJS. В качестве основного объекта селектора XUI использует x$ и включает в себя методы, перечисленные в таблице 9.6.
| Метод | Описание |
|---|---|
| html(code) или html(location, code) | Определяет внутренний HTML (или другой location, используя вторую опцию) элемента. location это строка, которая может иметь следующее значение: inner, outer, top, bottom, before, after, или remove. |
| on(event, function) | Регистрирует список событий. Вместо имени события также можно использовать имя метода (т.е., click либо on(‘click’)). Поддерживаются события: click, load, touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend, и orientationchange. |
| setStyle(property, value) | Определяет CSS стили. |
| getStyle(property, optional_callback) | Считывает значение свойства. Если этот селектор описывает несколько элементов, будет выполняться функция обратного вызова. |
| addClass(class_name) | Присваивает класс элементу. |
| removeClass(class_name) | Удаляет класс у элемента. |
| css(object) | Определяет CSS стили используя объект JSON-style содержащий свойства со значениями. |
| tween(object) | Анимирует одно или более CSS свойств из одного значения к другому описанному в object. |
Пример. При помощи следующего кода, мы можем перехватить onclick для кнопок с классом button:
x$('input.button').on('click', function(e){ alert('Ouch!') });
или используя такой код, с цепочкой методов а-ля jQuery:
x$('input.button').click(function(e){ alert('Ouch!') }).html('Press Me! ').css({color: 'blue'});
Для Ajax XUI предлагает глобальные функции xhr и xhrjson для создания запросов с опциями.
Куда дальше
- следующая — CSS расширения для WebKit
- предыдущая — Поддержка Ajax
- содержание