Заглянем на новую и очень мощную библиотеку такая как Dojo. Сначало определение. Dojo — свободная модульная библиотека на JavaScript. Это подобие движка jQuery, только теперь работающий на много быстрей. На данный момент разработчики выпустили новую версию — 1.8.0
Вся справка и исходники находятся на официальном сайте разработчика, доступен только на английском языке, но хорошему программисту это не преграда! Документацию можно прочитать на сайте.
Начинаем эксперименты
Давайте на примере рассмотрим наш движок. Скачиваем .zip архив в разделе Source. Создаём на рабочем столе папку, назовём её «dojotest». Из архива переносим «dojo» и «util» в нашу папку. Создаём файл «index.php» в блокноте:
Функцией djConfig=”parseOnLoad:true, isDebug:true” который находится в документе мы передаём параметры скрипту dojo.js и заставляем его включать парсер после полной загрузки документа, включая Debug, но можно это сделать и устаревшим способом:
(Извините, выложил картинкой потому, что Хабрахабр перемешивает текст в одно сплошное, прошу меня извинить может это у меня ошибка)
Ядро Dojo само по себе довольно функциональное (не считая Dijit, Dojox):
- Определение имени и версии браузера
- Кодирование/декодирование JSON
- Загрузка пакетов
- Мощная поддержка AJAX
- Механизм событий
- Поддержка анимации
- Поддержка асинхронного программирования
- Движок высокопроизводительного языка запросов CSS3
- Языковые параметры
- Возможность работы с CSS
- Поддержка ООП
- Защита от утечки памяти
- Интеграция в FireBug
Главный плюс движка — это механизм отладки, связанный с FireBug. Если Firebug выключен, Dojo создаст консольное окно в браузере и будет выводить отладочные сообщения, которые мы будем посылать, или которые будут генерироваться самим Dojo. Если же FireBug включен, Dojo не будет создавать консольное окно, а будет выводить все отладочные сообщения прям в FireBug. Удобно, неправда, ли?
Теперь выведем в консоль два сообщения:
Идём в том же духе…
Тут мы использовали dojo.addOnLoad(), чтобы добавить обработчик готовности документа. Так мы можем добавлять столько обработчиков, сколько захотим.
Теперь попробуем изменить текст внутри div:
Тут мы использовали byId, чтобы достать нужный элемент с определенным id. Затем изменили его контент. Менять контент при загрузке – это конечно хорошо, но мало кому нужно. Изменим его при нажатии на кнопку:
Сделаем так, чтобы кнопка плавно исчезла через 500 мс после ее нажатия. Также используем одну возможность поиска элемента — через CSS3-селектор. И воспроизведём анимацию:
С помощью dojo.query мы можем выбрать все элементы с определенным классом: dojo.query(“.my_class”)
Замечу, пока в скрипте не выполнятся вызовы, dojo.require, dojo.addOnLoad не будут задействованы. Это бережет нас от преждевременного выполнения кода, зависимости для которого еще не загрузились.
Теперь попробуем перемещать нашу кнопоку туда-сюда с помощью Dojo до нажатия кнопки «Stop»:
К концу
Пример нам предоставил сайт i-Novice. С помощью этой библиотеки теперь мы можем создавать подобные «приколы»! Документация на официальном сайте Dojo. Так и не поняли? Удачи!