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 и продемонстрировать удобство работы с ним.

Удачи! icon smile DoJo: еще один JavaScript нового поколения



Теги: , ,


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



4 Ответов на “DoJo: еще один JavaScript нового поколения”

  1. Андрей
    Октябрь 22nd, 2008

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

  2. Василий
    Декабрь 8th, 2008

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

  3. novice
    Декабрь 8th, 2008

    Здесь: http://i-novice.net/ajax-v-dojo/

  4. Карина
    Январь 17th, 2009

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

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


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