Заглянем на новую и очень мощную библиотеку такая как Dojo. Сначало определение. Dojo — свободная модульная библиотека на JavaScript. Это подобие движка jQuery, только теперь работающий на много быстрей. На данный момент разработчики выпустили новую версию — 1.8.0
Вся справка и исходники находятся на официальном сайте разработчика, доступен только на английском языке, но хорошему программисту это не преграда! Документацию можно прочитать на сайте.
Начинаем эксперименты
Давайте на примере рассмотрим наш движок. Скачиваем .zip архив в разделе Downloads, Source. Создаём на рабочем столе папку, назовём её «dojotest». Из архива переносим «dojo» и «util» в нашу папку. Создаём файл «index.php» в блокноте:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true"></script>
<script type="text/javascript">
// здесь будем писать что-нибудь
</script>
</head>
<body>
<!-- Здесь пишем, всё что сказано ниже в этом уроке -->
</body>
</html>
Функцией djConfig=”parseOnLoad:true, isDebug:true” который находится в документе мы передаём параметры скрипту dojo.js и заставляем его включать парсер после полной загрузки документа, включая Debug, но можно это сделать и устаревшим способом:
<script type="text/javascript">
var djConfig = {
isDebug:true, parseOnLoad:true
};
</script>
<script type="text/javascript" src="js/dojo/dojo.js">
</script>
Ядро Dojo само по себе довольно функциональное (не считая Dijit, Dojox):
- Определение имени и версии браузера
- Кодирование/декодирование JSON
- Загрузка пакетов
- Мощная поддержка AJAX
- Механизм событий
- Поддержка анимации
- Поддержка асинхронного программирования
- Движок высокопроизводительного языка запросов CSS3
- Языковые параметры
- Возможность работы с CSS
- Поддержка ООП
- Защита от утечки памяти
- Интеграция в FireBug
Главный плюс движка — это механизм отладки, связанный с FireBug. Если Firebug выключен, Dojo создаст консольное окно в браузере и будет выводить отладочные сообщения, которые мы будем посылать, или которые будут генерироваться самим Dojo. Если же FireBug включен, Dojo не будет создавать консольное окно, а будет выводить все отладочные сообщения прям в FireBug. Удобно, неправда, ли?
Теперь выведем в консоль два сообщения:
<script type="text/javascript">
var init = function(){
console.log("Hello, World!");
};
dojo.addOnLoad(init);
dojo.addOnLoad(function(){
console.log("THIS IS DOJO!");
});
</script>
Идём в том же духе…
Тут мы использовали dojo.addOnLoad(), чтобы добавить обработчик готовности документа. Так мы можем добавлять столько обработчиков, сколько захотим.
Теперь попробуем изменить текст внутри div:
<body>
<div id="my_text"></div>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.byId('my_text').innerHTML = "Hello from Dojo!";
});
</script>
</body>
Тут мы использовали byId, чтобы достать нужный элемент с определенным id. Затем изменили его контент. Менять контент при загрузке – это конечно хорошо, но мало кому нужно. Изменим его при нажатии на кнопку:
<body>
Hello, <span id="my_text">world!</span>
<br /><br />
<input type="button" id="my_button" value="Do it!" />
<script type="text/javascript">
dojo.addOnLoad(function() {
var node = dojo.byId("my_button");
dojo.connect(node, "onclick", function() {
dojo.byId("my_text").innerHTML = "Dojo!";
});
});
</script>
</body>
Сделаем так, чтобы кнопка плавно исчезла через 500 мс после ее нажатия. Также используем одну возможность поиска элемента — через CSS3-селектор. И воспроизведём анимацию:
<script type="text/javascript">
dojo.require("dojo.NodeList-fx");
dojo.addOnLoad(function() {
var node = dojo.byId("my_button");
dojo.connect(node, "onclick", function() {
dojo.byId("my_text").innerHTML = "Dojo!";
// прячем элемент с id=my_button
dojo.query("#my_button").fadeOut({ delay:500 }).play();
});
});
</script>
С помощью dojo.query мы можем выбрать все элементы с определенным классом: dojo.query(“.my_class”)
Замечу, пока в скрипте не выполнятся вызовы, dojo.require, dojo.addOnLoad не будут задействованы. Это бережет нас от преждевременного выполнения кода, зависимости для которого еще не загрузились.
Теперь попробуем перемещать нашу кнопоку туда-сюда с помощью Dojo до нажатия кнопки «Stop»:
<body>
<input type="button" id="my_button" value="Do it!" />
<br /><br />
<input type="button" id="stop_button" value="Stop" />
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.addOnLoad(function() {
var node = dojo.byId("my_button");
var stop_node = dojo.byId("stop_button");
// Запоминаем начальные координаты кнопки
var coords = dojo.coords(node);
// Включаем и зацикливаем анимацию до нажатия кнопки "Stop"
var anim = dojo.fx.slideTo({node: node, left: coords.x + 400, top: coords.y, unit: "px", delay: 500, duration: 200});
var anim2 = dojo.fx.slideTo({node: node, left: coords.x, top: coords.y, unit: "px", delay: 400, duration: 200});
dojo.connect(anim, "onEnd", function() {
dojo.connect(anim2, "onEnd", function() {
anim.play();
});
anim2.play();
});
anim.play();
// Обработчик остановки (остановит кнопку только во время ее движения)
dojo.connect(stop_node, "onclick", function() {
anim.stop();
anim2.stop();
});
});
</script>
</body>
К концу
Пример нам предоставил сайт i-Novice. С помощью этой библиотеки теперь мы можем создавать подобные «приколы»! Документация на официальном сайте Dojo. Так и не поняли? Удачи!
Автор: PHPaper
