• Спонсоры

  • Рубрики

  • Архивы

  • Популярное



DoJo: еще один JavaScript нового поколения

Сегодня мы рассмотрим новую и очень мощную библиотеку Dojo, написанную на JS. Это подобие движка jQuery, но работает быстрее.

Ее документация и исходники находятся на официальном сайте: [ссылка]. Правда документация там, по-моему, в нескачиваемом виде (а может просто плохо искал).

На момент написания статьи версия библиотеки была 1.1.1.

После того, как мы ее скачаем (я скачивал полный gz-архив — около 4 Мб), мы должны извлечь из архива две папки: dojo и util (нужна для dojo). Положим их, к примеру, в папку js, которая лежит наравне с нашим index.php. Все. Мы готовы изучать ядро Dojo (другие возможности в этой статье затрагивать не будем).

Ядро Dojo само по себе довольно функциональное (не считая дополнительных библиотек и прочих Dijit, Dojox):

  • Определение имени и версии браузера
  • Кодирование/декодирование JSON
  • Загрузка пакетов
  • Мощная поддержка AJAX
  • Механизм событий
  • Поддержка анимации
  • Поддержка асинхронного программирования
  • Движок высокопроизводительного языка запросов CSS3
  • Языковые параметры
  • Возможность работы с CSS
  • Поддержка ООП
  • Защита от утечки памяти
  • Интеграция в FireBug

Напишем для начала каркас html-документа, в котором будем кодить:

<!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>

Обратите внимание, что мы передали скрипту dojo.js параметры следующим образом:

djConfig=»parseOnLoad:true, isDebug:true»

Но Dojo можно было подключить еще и так:

<script type="text/javascript">
var djConfig = {
isDebug:true, parseOnLoad:true
};
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>

Этим мы сказали Dojo, что мы хотим, чтобы его парсер запускался только после полной загрузки документа, а еще мы хотим включить отладку.

То, что мне понравилось в Dojo в первого взгляда, — это механизм отладки, связанный с FireBug (я пользуюсь браузером FireFox). Если Firebug выключен, Dojo создаст как бы консольное окно в браузере под всем контентом и будет выводить туда построчно отладочные сообщения, которые мы будем посылать, или которые будут генерироваться самим Dojo. Если же FireBug включен, Dojo не будет создавать консольное окно, а будет выводить все отладочные сообщения прям в FireBug. Очень удобно.

Вот попробуем вывести в консоль два сообщения: «Hello, World!» и «Dojo is super!».

<script type="text/javascript">
var init = function(){
console.log("Hello, World!");
};
dojo.addOnLoad(init);

dojo.addOnLoad(function(){
console.log("Dojo is super!");
});
</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">
// подключаем модуль NodeList-fx
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>

Вы можете посмотреть демо этой странички вот здесь.

Это я все к тому, что мы можем сотворить практически любую анимацию с помощью этой мощной библиотеки. Документация по Dojo API находится здесь: [ссылка]. В этом справочнике Вы найдете все функции ядра Dojo, и не только. Там есть еще справочник по dijit и dojox, которых мы не коснулись в этой, но обязательно коснемся в одной из будущих статей.

Еще советую посетить вот эту страничку, на которой Вы совершите быстрый старт в эту либу: http://sitepen.com/labs/guides/?guide=DojoQuickStart.

А в одной из следующих статей я хочу поговорить об Ajax в Dojo и продемонстрировать удобство работы с ним.

Удачи! 🙂



Теги: , ,


Читайте также:



5 комментариев на “DoJo: еще один JavaScript нового поколения”

  1. Андрей

    Супер. Побольше бы таких статей 🙂

  2. Василий

    клас, спасибо, а где статья про аякс?

  3. novice
  4. Карина

    Подскажите, пожайлуста, как в Adobe Dremweaver вставлять теги, относящиеся к Java Script.

  5. Авакян Овсеп

    console.log и другие операции с объектом console доступны в любом современном браузере «из коробки».

Оставить комментарий


© 2008 - 2017 i-novice.net | Все права защищены.