- → Программирование
- → JavaScript
- → Статьи
Dojo JS: скачать, примеры использования dojo в DOM
Сегодня мы узнаем о прекрасном javascript фреймворке – Dojo. Здесь вы всегда сможете скачать библиотеку dojo. Также можете почитать руководство и увидеть примеры использования библиотеки dojo. Главной особенностью dojo toolkit является простота использования и многофункциональность. С помощью данной библиотеки можно работать с DOM структурой html документа, а именно: находить элементы, добавлять, модифицировать. Мы уже не говорим о таких вещах как создание графиков, галерей, подсветки кода и еще множество прикольных штучек. Безусловно, Dojo JS – это удобный инструмент при создании сайта.
Навигация
Примеры использования библиотеки
Перед тем, как мы начнем
Перед тем, как начать обзор работы библиотеки, нужно понимать основы программирования на JavaScript. Если вы использовали другую JS библиотеку перед этим, вам будет проще понимать. Потому что, мы будем сравнивать Dojo с jQuery. Но, если вы не знаете, как работать с jQuery, это не страшно, оно вам и не нужно.
Dojo – официально называется Dojo Toolkit. Эта библиотека содержит все необходимые функции для манипуляции с DOM, хелперы событий и анимации, также AJAX функции, подобно как в jQuery. И эта библиотека развивается далее и далее.
Dojo состоит с трех основных частей:
DojoCore: Это базовое ядро библиотеки. Большинство вещей находящихся в этой части схожи с jquery.
Dijit: это UI библиотека. Это официальный субпроект, управляемый другими людьми. Он также схож с jQuery UI. Здесь находятся следующие виджеты: Calendar pickers, combo boxes, и buttons. Если вы хотите улучшить юзабилити html форм на сайте, вы можете найти много полезных вещей в Dijit.
DojoX: сокращенно от Dojo extensions. Это коллекция индивидуальных проектов, которые расширяют Dojo.
Скачать Dojo
Теперь начнем. Для начала нам нужно скачать Dojo. Вы можете скачать библиотеку Dojo из этой страницы:
Скачать библиотеку Dojo (89 kb, сжатый до 35 kb)
Также, подобно jQuery, мы можем подключить библиотеку через Google API, и всегда иметь последнюю версию библиотеки, без скачивания. Делается это с помощью следующей строки:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
Примеры использования Dojo
Для проведения опытов и наглядности примеров, мы создадим файл index.html:
<html>
<head>
<title> Intro to Dojo, part 1 </title>
<style>
.highlight {
background: yellow;
font-weight: bold;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1> A Heading </h1>
<ul id="nav">
<li> <a href="/">Home</a> </li>
<li class="highlight"> <a href="/portfolio"> Portfolio </a> </li>
<li> <a href="/about">Abou</a> </li>
<li> <a href="/contact">Contact</a> </li>
</ul>
<p> This is a paragraph (albeit a very <em>short</em> paragraph). Also, <a href="http://google.com">here's a link</a>. </p>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
</body>
</html>
В этом файле включены множество html элементов, над которыми мы будем проводить опыты и видеть на примере, как функционирует dojo.
Еще несколько слов перед началом, проведения экспериментов. Обязательно создайте этот файл и проведите все что будет описано дальше, протестируйте функциональность в разных браузерах. Чтобы при разработке реального предложения не «натыкаться на, те же грабли».
Поиск элементов
Сейчас мы будем изучать работу Dojo с Dom элементами. Dom – это структура html элементов страницы (тегов). Работа с Dom элементами, это фундамент каждого js приложения. Поэтому это будет отличным стартом в изучении этой библиотеки.
Dojo имеет множество функций для работы с DOM. Одна из них, это dojo.query, которая очень похожа с jquery $, методом. Просто необходимо правильно заполнить селектор и будут найдены все элементы соответственно селектору.
dojo.query("a");
Если вы запустите JS консоль в браузере, то увидите, что найдено 5 элементов. Это теги анкоров, которые вы указали как селектор. Также можно указывать второй параметр, который будет определять контекстный элемент (родительский). Давайте посмотрим на примере:
dojo.query("a", "nav"); // возвратит 4 <a> тега
Родительский параметр может быть DOM элементом, или ID элемента.
При использовании метода query, можно использовать метод query (как второй уровень), для поиска дочерних элементов:
dojo.query("a"); // возвращает 5 <a> тегов
dojo.query("p").query("a"); // возвращает 1 <a> тег
Но это не всегда практично, для поиска конкретного элемента, поэтому был придуман метод dojo.byId, который очень удобен в использовании:
dojo.byId("nav");
Возьмите на заметку, что в этом случае вы не будете получать объект, но текстовый DOM элемент. Это важно помнить при разработке.
Создание DOM элементов
Мы начнем создавать элементы методом dojo.create. Для начала мы просто создадим простой элемент, как показано на примере:
var h = dojo.create("h2"); // <h2></h2>
Это просто. Но, как правило, нужно больше. Вы можете указывать атрибуты и параметры при создании элементов:
var h = dojo.create("section", { role: "banner", innerHTML: "Learning Dojo"});
// <section role="banner">Learning Dojo</section>
Также dojo.create, может добавлять элементы в готовую DOM структуру, с помощью 3 и 4 параметров:
dojo.create("p", { innerHTML: "Hi there!"}, dojo.body(), "first");
dojo.create("h1", { innerHTML: "Heading"}, dojo.query("h1")[0], "before");
Третий параметр – это опорный узел, наш новый элемент будет добавлен внутрь этого узла.
Внутрь опорного узла, но куда?
Эту проблему решает четвертый параметр – позиция. По умолчанию, если не указывать, то элемент буден добавлен в конец узла. Но можно задавать свои параметры:
first – создает новый узел в опорном узле.
before и after – добавляет новый элемент до, или после опорного узла.
replace – заменяет опорный узел на новый элемент.
only – заменяет все дочерние элементы опорного узла на новый элемент.
Изменение элементов
Вы еще не знаете этого, но будете рады изучить как это работает – dojo.attr. Давайте рассмотрим подробнее.
Этот метод используется для получения, а также изменения DOM элементов. Вторым атрибутом будут события и атрибуты, которые мы будем добавлять или изменять. Первым, естественно, будет сам элемент, с которым мы работаем:
var navUl = dojo.query("p")[0];
dojo.attr(navUl, {
onclick : function () {
alert("Learning Dojo!");
},
role: "banner",
style : {
backgroundColor: "red",
fontSize: "2em"
}
});
Если вы хотите изменить простой атрибут, просто укажите имя как второй параметр, значение – третий параметр. Например:
dojo.attr("nav", "className", "module"); // первый параметр это id
Также можно получать атрибут необходимого элемента:
dojo.attr(dojo.byId("nav"), "id"); // "nav"
Также вы можете использовать эту функцию для объектной модели DOM элементов:
var items = dojo.query("li");
items.attr("innerHTML"); // [" <a href="/">Home</a>", " <a href="/portfolio">Portfolio</a>", " <a href="/about">About</a>", " <a href="/contact">Contact</a>"]
items.attr({ className: "btn" });
Еще одна немаловажная возможность, это удаление атрибутов с помощью dojo.removeAttr.
dojo.removeAttr("nav", "id");
dojo.query("#nav").removeAttr("id");
dojo.removeAttr("nav", "id");
Существуют и другие способы изменения атрибутов. Например, с помощью функций dojo.addClass, и dojo.removeClass, или dojo.toggleClass. Вы можете использовать эти методы, для добавления, удаления или перенесения классов из массива на простые элементы.
var nav = dojo.byId("nav");
dojo.addClass(nav, "selected");
Также можно добавлять массив классов на объектную модель элементов:
dojo.query("li").removeClass(["selected", "highlighted"]);
О да, также не забудьте о dojo.replaceClass методе, который заменяет класс элемента:
dojo.query("p").replaceClass("newClass", "oldClass");
Удаление элементов
Как избавиться от лишних элементов? Просто, используя dojo.destroy, смотрим пример:
var navList = dojo.byId("nav");
dojo.destroy(navList);
// или просто:
dojo.destroy("nav");
Важно знать, что в случае объектной модели элементов, нельзя использовать данный метод. Для решения этой проблемы, существует отдельная функция orphan, она применяется только для объекта:
dojo.query("li").orphan();
На нашей тестовой страничке, удалятся все четыре элемента li.
Для фильтрации удаляемых элементов, можно использовать селектор, но он будет применим только для элементов первого уровня объекта. То есть для дочерних li элементов, которые находятся внутри родительских li элементов, этот селектор не приемлем.
dojo.query("li").orphan("li:first-of-type"); // удалит первый элемент
Если же вам необходимо удалить все элементы узлов, вы можете использовать нехитрый синтаксис: node.innerHTML = "".
Перемещение и дупликация элементов
Для перемещения элементов используется аналог методу dojo.create - dojo.place. Он принимает три параметра: элемент, узел, позиция. Синтаксис очень похож на создание элемента, только происходит его перемещение в другой узел:
var nav = dojo.byId("nav"),
p = dojo.query("p")[0];
dojo.place(nav, p, "after"); // перемещает `nav` справа от `p` в DOM структуре
Также можно работать с несколькими элементами сразу (объектной моделью):
dojo.query("p").place(dojo.body(), "first");
Также можно клонировать некоторые узлы DOM структуры с помощью функции dojo.clone. Давайте посмотрим как можно дублировать элементы и тут же изменять свойства и место локализации элемента:
var u2 = dojo.clone( dojo.byId("nav") );
dojo.attr(u2, "id", "nav2");
dojo.place(u2, dojo.body(), "first");
Также можно использовать dojo.clone, для других JavaScriptобъектов:
var o1 = { one: "one"},
o2 = dojo.clone(o1);
o1 === o2; // false
Перебор элементов (узлов)
Так как объектные модели элементов схожи с массивами, вы можете использовать цикл for для перебора и модификации элементов:
dojo.query("li").forEach(function (element, index, arr) {
// ваши действия
});
Как вы видите, функция принимает три параметра: element, index, array. Для использования функции для перебора массива используют следующий синтаксис:
dojo.forEach([1,2,3], function (item) {
// act here
});
Для перебора измененного массива мы используем функцию map.
dojo.map([1,2,3], function (item) {
return item * item;
}); // [1, 4, 9]
Также для отбора определенных элементов, можно использовать фильтрацию (filter). Этот метод вставляют в query запрос. Смотрите пример:
dojo.query("li").filter(".highlight"); // объектсодним li class=selected
Также можно фильтровать не по атрибутам элемента а по содержимому innerHTML, что гораздо интереснее:
dojo.query("li").filter(function (el) {
return dojo.query("a", el)[0].innerHTML === "About";
}); // returns a NodeList that holds only the list item with the text "About"
Работаем с событиями
Теперь мы поговорим о событиях в Dojo. И мы начнем с DOM событий, так как это первое, что вы будете использовать в своих приложениях. Например, что мы можем сделать, когда нажимают на тег h1. Есть несколько путей реализации события клика по h1 тегу:
Первый вариант, это найти h1 теги и вызвать событие onclick:
dojo.query("h1").onclick(function () {
alert("Learning Dojo");
});
Есть и другой способ. Можно подключить событие с помощью функции connect.
dojo.query("h1").connect("onclick", function (e) {
alert("learning Dojo");
});
Разница этого варианта с первым, в том, что здесь мы передаем необходимое действие на отдельно вынесенную функцию.
Также эту задачу можно реализовать следующим путем:
var h = dojo.query("h1")[0]; // or dojo.byId("some_element"), for example
dojo.connect(h, "onclick", function () {
alert("learning Dojo");
});
Для профилактики багов при программировании используют функцию disconnect, которая разрывает связь с обработчиком, после выполнения задачи. Синтаксис следующий:
var h = dojo.query("h1")[0],
handle = dojo.connect(h, "onclick", function () {
alert("learning Dojo");
dojo.disconnect(handle);
});
Вы можете создавать собственные события (или используя терминологию Dojo – собственные топики). Для этого используют функции publish и subscribe. Для описания «топика», просто задайте имя топика и функцию:
dojo.subscribe("myTopic", function (data, moreData) {
alert(data);
console.log(moreData);
});
После описания, можно опубликовать «топик»:
dojo.publish("myTopic", ["some data", "some more data"]);
Помните, что все данные передаются в функцию в виде массива, вторым параметром!
Заключение
Сегодня мы рассмотрели приблизительно 90% возможностей Dojo в плане работы с DOM. Надеюсь, пример работы с Dojo вам понравился.
Если у вас возникли вопросы или недопонимания по работе с Dojo, вы можете смело писать в комментарии.Дальше: Где купить контент, покупка контента от А до Я
Development — Taras Moroz