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" 

                      "https://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, которых мы не коснулись в этой, но обязательно коснемся в одной из будущих статей.

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

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

Удачи!

Теги: ajax, dojo, javascript

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

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

Андрей

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

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

Здесь: https://i-novice.net/ajax-v-dojo/
Карина

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

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

От новичка до профессионала

Рубрики

Популярное

Последние записи

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

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