Библиотеки 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. Помни, что время выполнения во многом зависит от оборудования и возможностей процессора. Эти тесты просто дают тебе информацию о возможном количестве времени, которое понадобится для инициализации той или иной библиотеки.

Табл. 9.5. Таблица среднего времени загрузки/выполнения различных JavaScript библиотек в секундах
Браузер/ Платформа 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.

Табл. 9.6. Основные методы XUI
Метод Описание
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 для создания запросов с опциями.

Куда дальше

Показать комментарии