Возможно, вы видели этот твит: « JQuery — это наркотик, являющийся шлюзом. Это приводит к полноценному использованию JavaScript » . Я утверждаю, что частью этой зависимости является изучение других структур JavaScript. И это то, о чем эта серия из четырех частей о невероятном Dojo Toolkit предназначена для того, чтобы вывести вас на новый уровень вашей JavaScript-зависимости.
Прежде чем мы начнем
Прежде чем мы начнем, я должен упомянуть, что единственной предпосылкой для этой серии является то, что у вас есть хотя бы базовые знания JavaScript. Если вы уже использовали другую библиотеку JS, вам будет еще лучше. Но, хотя я сравниваю Dojo с jQuery пару раз, вам не нужно знать jQuery, чтобы чувствовать себя комфортно в этом классе.
Предпочитаете визуальное обучение?
И еще одна вещь: я буду выпускать скринкаст для каждого из этих руководств, охватывая все в письменных руководствах и, возможно, немного больше. Эти ролики являются частью подписки Net Premium , поэтому, если вы не являетесь участником, подпишитесь на их получение и получите метрическую тонну другого невероятного премиум-контента.
Встреча с Додзё
Dojo официально называется Dojo Toolkit . Это на самом деле очень уместно. Большинство других коллекций доступных строк JavaScript выставляют себя за рамки или библиотеки . На мой взгляд, фреймворк — это более или менее комплексное решение для создания хороших веб-приложений, а библиотека — это набор инструментов, которые помогут вам с несколькими конкретными (обычно связанными) задачами. Додзе вписывается в обе категории, а затем и в некоторые В нем есть все манипуляции с DOM, помощники по событиям и анимации, а также функции AJAX, которые можно получить с помощью библиотеки, такой как jQuery. Но это еще не все.
В ваши первые несколько встреч с Додзё вы не поймете, насколько это важно. Итак, позвольте мне представить вам три основные части Додзё:
- Dojo Core : Dojo Core — это основная, базовая функциональность. Большинство из них — это то, что вы получите с помощью jQuery. Тем не менее, он также содержит десятки языковых утилит общего назначения, а также сантехнику для других частей Додзё.
- Dijit : Dijit — это библиотека интерфейса пользователя Dojo; это официальный подпроект, управляемый отдельными людьми. Таким образом, это похоже на jQuery UI. Многие функциональные возможности аналогичны тем, что вы найдете в библиотеке виджетов jQuery UI: средства выбора календаря, поля со списком и кнопки. Если вы хотите улучшить свою веб-форму, вы найдете почти все, что вам нужно, в Dijit. Dijit также содержит несколько интересных инструментов верстки.
- DojoX : DojoX (расширения Dojo) — это набор отдельных проектов, которые, как вы уже догадались, расширяют Dojo. Вряд ли будет преувеличением сказать, что «для этого есть расширение Dojo». Невероятные утилиты построения графиков? Проверьте. Все типы хранилищ данных, которые вам когда-либо понадобятся, а потом еще какие? Вы ставите. Еще больше помощников по форме, чтобы увеличить тех, которые доступны в Dijit? Это здесь. Это все здесь.
Начало Додзё
Разумеется, мы начнем с того, что разместим Dojo на странице. Я хочу сказать вам, что Dojo не похож на jQuery, потому что есть десятки файлов, которые составляют Dojo, Dijit и Dojox. Причина, по которой я не решаюсь сказать, заключается в том, что вы скажете, что jQuery — это не просто один файл: для него созданы все плагины и расширения. Разница с Dojo заключается в том, что все эти дополнительные части официально являются частью Dojo и могут быть вызваны на вашу веб-страницу в любое время.
Однако сейчас нам нужна только база Додзё. Это подмножество Dojo Core, доступное в одном файле. Таким образом, хотя вы можете загрузить все Dojo (и Digit и Dojox), или создавать собственные сборки из тех частей, которые вам нужны, мы собираемся пойти по простому маршруту и получить базу из Google CDN.
|
1
|
<script src=»http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js»></script>
|
Итак, создайте файл index.html и начните с этого небольшого шаблона:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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).
<script src=»http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js»></script>
</body>
</html>
|
Я включил кучу элементов в эту маленькую демонстрационную страницу. Мы будем использовать их при изучении Додзё.
Прежде чем мы начнем, я упомяну еще одну вещь: когда вы изучаете такую библиотеку, как Dojo, вам, вероятно, будет полезно просмотреть нашу страницу тестирования в выбранном вами браузере и открыть соответствующую консоль JavaScript. Возьмите любую строку кода в этом руководстве и вставьте ее в консоль, и вы увидите, что происходит.
Поиск элементов
В этом уроке мы будем изучать Dojo, в первую очередь, в качестве замены jQuery или любой библиотеки, ориентированной на DOM, которую вы используете. Конечно, это вряд ли половая доска в этом Титанике, но это хорошее место для начала. Как только вы освоите его вместо обычной библиотеки, мы можем перейти к тому, что делает Dojo уникальным.
Обычный МО с этими вещами — получить его, использовать его ; Итак, начнем с поиска элементов DOM.
У Dojo есть несколько методов для охоты через DOM. Первый, который мы рассмотрим, это dojo.query , который очень похож на метод jQuery (или $ ). Просто передайте ему строку селектора CSS, и он найдет все элементы в вашем документе, которые соответствуют селектору.
|
1
|
dojo.query(«a»);
|
Запустив это в консоли, вы получите NodeList с 5 элементами. Он содержит пять тегов привязки, которые вы ожидаете. Что вы ожидаете получить при попытке dojo.query("p > a") ? dojo.query также может получить корень или элемент контекста в качестве второго параметра. Как и следовало ожидать, это ограничивает область запроса элементами внутри этого корневого элемента. Так:
|
1
|
dojo.query(«a», «nav»);
|
Корневым параметром может быть либо элемент DOM, либо строка, которая является идентификатором элемента.
NodeList также имеют метод query , который находит узлы, которые соответствуют селектору, NodeList исходного NodeList . Например:
|
1
2
3
|
dojo.query(«a»);
dojo.query(«p»).query(«a»);
|
Но подождите, это еще не все, как говорится. Есть два других метода Dojo для получения элементов. Если dojo.byId элемент имеет атрибут id , вы можете использовать метод dojo.byId .
|
1
|
dojo.byId(«nav»);
|
Если вы попробуете это, вы заметите, что вы не получаете объект NodeList обратно: это просто старый элемент DOM. Это будет важно запомнить.
Еще один, и это еще более конкретно: dojo.body() . Возвращает элемент, как и ожидалось.
Теперь, если есть одна «главная вещь», для которой большинство разработчиков используют свои библиотеки JS, это работа с элементами DOM. Конечно, у Додзё есть все возможности для этого, так что давайте возьмем тур.
Создание элементов
Мы начнем с создания элементов с dojo.create . Во-первых, вы можете просто получить новый элемент DOM, например:
|
1
|
var h = dojo.create(«h2»);
|
Просто. Но, как правило, вы хотите сделать больше. Ну, вы можете передать объект атрибутов в качестве второго параметра:
|
1
2
|
var h = dojo.create(«section», { role: «banner», innerHTML: «Learning Dojo»});
// <section> role=»banner»>Learning Dojo</section>
|
Метод dojo.create также может добавлять элементы непосредственно в DOM. Для этого мы можем добавить параметры 3 и 4:
|
1
2
3
|
dojo.create(«p», { innerHTML: «Hi there!»}, dojo.body(), «first»);
dojo.create(«h1», { innerHTML: «Heading»}, dojo.query(«h1»)[0], «before»);
|
Третий параметр называется опорным узлом; наш новый узел будет помещен в DOM относительно этого элемента.
Но где, по ссылке?
Вот тут и вступают четвертые параметры, позиция. По умолчанию (т. Е. Если вы ее опускаете), это «последний», который добавляет новый элемент в ссылочный узел (как его последний дочерний элемент). Ваши другие варианты таковы:
- « First » добавляет новый узел к эталонному узлу.
- «До» и «после» поставить новый узел до или после опорного узла.
- «Заменить» заменяет ссылочный узел новым узлом.
- «Only» заменяет все дочерние элементы ссылочного узла новым узлом.
Модификация узлов
Вы еще этого не знаете, но вы в значительной степени изучили метод dojo.attr . Давайте формализовать это введение.
dojo.attr используется для получения и установки атрибутов на узлах DOM. Помните тот объект атрибутов, который мы передали в качестве второго параметра dojo.create ? Вы можете передать это как второй параметр dojo.attr . Конечно, первый параметр — это узел, для которого изменяются его атрибуты (или строка id):
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var navUl = dojo.query(«p»)[0];
dojo.attr(navUl, {
onclick : function () {
alert(«Learning Dojo!»);
},
role: «banner»,
style : {
backgroundColor: «red»,
fontSize: «2em»
}
});
|
Если вы просто хотите установить один атрибут, просто передайте имя в качестве второго параметра и значение в качестве третьего:
|
1
|
dojo.attr(«nav», «className», «module»);
|
Для получения атрибута требуются только два параметра:
|
1
|
dojo.attr(dojo.byId(«nav»), «id»);
|
Вы можете использовать метод attr NodeList таким же образом:
|
1
2
3
4
5
|
var items = dojo.query(«li»);
items.attr(«innerHTML»);
items.attr({ className: «btn» });
|
Еще одна вещь: чтобы удалить атрибуты, вы можете использовать dojo.removeAttr и аналог NodeList для полного удаления атрибутов из элементов:
|
1
2
3
|
dojo.removeAttr(«nav», «id»);
dojo.query(«#nav»).removeAttr(«id»);
|
Однако есть и другие способы изменить эти узлы. Как насчет dojo.addClass , dojo.removeClass или dojo.toggleClass ? Вы можете использовать их для добавления, удаления или переключения класса или массива классов на отдельных узлах:
|
1
2
3
|
var nav = dojo.byId(«nav»);
dojo.addClass(nav, «selected»);
|
Есть также аналоги NodeList для этих методов:
|
1
|
dojo.query(«li»).removeClass([«selected», «highlighted»]);
|
О, и не забудьте о dojo.replaceClass и версии NodeList :
|
1
|
dojo.query(«p»).replaceClass(«newClass», «oldClass»);
|
Удаление узлов
Хотите избавиться от узла? Легко: передайте dojo.destroy либо узел DOM, либо строку id:
|
1
2
3
4
5
6
|
var navList = dojo.byId(«nav»);
dojo.destroy(navList);
// or, easier:
dojo.destroy(«nav»);
|
Я должен отметить, что нет способа уничтожить NodeList ; dojo.destroy принимает только отдельные узлы и не имеет NodeList аналога NodeList .
Но допустим, вы просто хотите удалить узлы из DOM, но не уничтожить их. В конце концов, вы можете подключить их где-то еще, или когда что-то еще происходит. Вот где появляется метод- orphan . Этот метод является только методом NodeList :
|
1
|
dojo.query(«li»).orphan();
|
На нашем примере страницы это удаляет четыре
NodeList из них. Если вы хотите NodeList некоторые узлы только из оригинального NodeList , pass является селектором фильтрации. Обратите внимание, что этот фильтр сопоставляет только узлы в исходном NodeList , а не их дочерние NodeList :
|
1
|
dojo.query(«li»).orphan(«li:first-of-type»);
|
Пока он не удаляет элемент, я добавлю это сюда: dojo.empty() возьмет один узел или идентификатор и удалит все внутри него. За кулисами Dojo фактически просто делает node.innerHTML = "" . Существует также версия этого метода NodeList которая, очевидно, не требует никаких параметров.
Перемещение / Дублирование Узлов
Есть несколько методов, связанных с перемещением или дублированием узлов DOM.
Вы обнаружите, что уже частично знакомы с dojo.place из dojo.create . Он принимает три параметра: узел, опорный узел и положение. Как и следовало ожидать, эти параметры играют те же роли, что и в dojo.create :
|
1
2
3
4
|
var nav = dojo.byId(«nav»),
p = dojo.query(«p»)[0];
dojo.place(nav, p, «after»);
|
Следуя тенденции многих методов Dojo DOM, есть NodeList метода NodeList :
|
1
|
dojo.query(«p»).place(dojo.body(), «first»);
|
Тогда есть dojo.clone . Хотя он будет клонировать больше, чем просто структуры узлов DOM, именно для этого мы и будем использовать его прямо сейчас: если вы передадите этому методу ссылку на узел DOM, он будет клонировать или скопировать этот узел и все его дочерние элементы. Это дублирует наш пример навигации ul и поместит копию вверху документа:
|
1
2
3
4
5
|
var u2 = dojo.clone( dojo.byId(«nav») );
dojo.attr(u2, «id», «nav2»);
dojo.place(u2, dojo.body(), «first»);
|
Вы можете использовать dojo.clone для клонирования других объектов JavaScript.
|
1
2
3
4
|
var o1 = { one: «one»},
o2 = dojo.clone(o1);
o1 === o2;
|
Затем есть метод NodeList . Я должен признать, что, хотя это интересный метод, я все еще не совсем уверен, где бы я его использовал. Вот что он делает: он принимает два параметра: строку селектора или узлы DOM и необязательное значение позиции, которое имеет те же параметры, что и dojo.place («last» по умолчанию и т. Д.). Затем метод accept примет элемент (ы), который вы передали в качестве первого параметра (или элементы в DOM, соответствующие селектору), и разместит их относительно первого элемента в NodeList . Затем он возвращает принятые элементы как новый NodeList . Итак, на нашей странице примера это заменит все дочерние элементы первого <li> абзацем:
|
1
|
dojo.query(«li»).adopt(«p», «only»);
|
Итак, это так.
Перебор узлов
Так как NodeList похожи на массивы, вы можете использовать обычный цикл for для их итерации. Однако в NodeList есть метод forEach :
|
1
2
3
|
dojo.query(«li»).forEach(function (element, index, arr) {
// do your thing
});
|
Как видите, функция обратного вызова принимает три параметра: элемент, индекс и сам массив. Если вы хотите зациклить другие массивы, вы можете использовать dojo.forEach таким же образом, просто передав этот массив в качестве первого параметра:
|
1
2
3
|
dojo.forEach([1,2,3], function (item) {
// act here
});
|
forEach возвращает NodeList или массив, с которого вы начали. Если вы хотите вернуть измененный массив, вы можете использовать метод map . Все, что вы возвращаете из функции обратного вызова, будет в массиве (или NodeList ), возвращаемом в конце.
|
1
2
3
|
dojo.map([1,2,3], function (item) {
return item * item;
});
|
Отчасти это связано с фильтрацией узлов из NodeList с помощью filter Вы можете просто передать этому методу селектор CSS, и будут сохранены только те элементы, которые соответствуют ему.
|
1
|
dojo.query(«li»).filter(«.highlight»);
|
Однако filter также может принимать функцию обратного вызова, которая получает три параметра: текущий элемент, его индекс и массив. Если функция возвращает true , элемент сохраняется; в противном случае это не учитывается. Новый NodeList сохраненных элементов возвращается.
|
1
2
3
|
dojo.query(«li»).filter(function (el) {
return dojo.query(«a», el)[0].innerHTML === «About»;
});
|
Удобно, что есть также версия dojo.filter которая принимает массив в качестве первого параметра и обратный вызов в качестве второго.
|
1
2
3
|
dojo.filter([«Nettuts», «Psdtuts», «Phototuts»], function (el, idx, arr) {
return el.slice(0,1) === «P»
});
|
Работа с событиями
Давайте теперь поговорим о событиях с Dojo. И мы начнем с событий DOM, поскольку обычно это то, что вы используете. скажем, мы хотим что-то сделать, когда на наш <h1> нажата кнопка. Есть несколько способов сделать это, и мы обсудим их все здесь.
Во-первых, давайте предположим, что мы обрабатываем событие, которое происходит с элементом или элементами, которые мы получили с помощью dojo.query . Мы могли бы использовать метод onclick который есть у NodeList :
|
1
2
3
|
dojo.query(«h1»).onclick(function () {
alert(«Learning Dojo»);
});
|
Тем не менее, это действительно просто «синтаксический сахар». За кулисами Dojo использует метод connect NodeList:
|
1
2
3
|
dojo.query(«h1»).connect(«onclick», function (e) {
alert(«learning Dojo»);
});
|
Этот метод фактически передает работу другому методу, dojo.connect ; вы, вероятно, будете использовать этот метод напрямую, когда у вас есть единственный узел DOM, для которого вы хотите обработать событие:
|
1
2
3
4
5
|
var h = dojo.query(«h1»)[0];
dojo.connect(h, «onclick», function () {
alert(«learning Dojo»);
});
|
Обратите внимание, что каждый раз, когда мы «продвигаемся вверх по слою», мы добавляем другой параметр в начало вызова метода.
Давайте кратко поговорим об отключении событий. При использовании методов, представленных в экземпляре NodeList , в настоящее время нет простого способа отключить события . Это потому, что dojo.connect возвращает дескриптор, который используется при отключении событий. Чтобы отключить событие, передайте его дескриптор dojo.disconnect :
|
1
2
3
4
5
6
|
var h = dojo.query(«h1»)[0],
handle = dojo.connect(h, «onclick», function () {
alert(«learning Dojo»);
dojo.disconnect(handle);
});
|
Если вы поместите это в консоль и нажмете <h1> , вы получите предупреждение. Тогда обработчик будет отключен, поэтому последующие клики ничего не сделают.
Если вы хотите создавать свои собственные события (или, используя терминологию Dojo, свои собственные темы), вы можете использовать методы publish и subscribe Dojo. Если вы знакомы с тем, как работают другие пабы / подсистемы , у вас не возникнет проблем с этим.
Чтобы подписаться на тему, просто передайте название темы и функцию, которая должна запускаться при публикации темы:
|
1
2
3
4
|
dojo.subscribe(«myTopic», function (data, moreData) {
alert(data);
console.log(moreData);
});
|
Затем вы можете опубликовать тему почти так же легко:
|
1
|
dojo.publish(«myTopic», [«some data», «some more data»]);
|
Обратите внимание, что любые данные, которые вы хотите передать функциям, которые подписываются на вашу тему, помещаются в массив и передаются как второй параметр.
Вывод
В этом уроке мы рассмотрели, вероятно, 90% функциональности DOM, встроенной в базовый файл Dojo, который мы получаем из CDN Google. Тем не менее, есть больше возможностей для обсуждения. Однако, прежде чем мы доберемся до этого, нам нужно научиться использовать дополнительные функциональные возможности Dojo. Мы обсудим это и многое другое в следующем эпизоде этой серии.
Есть какие-нибудь запросы о том, что вы хотели бы научиться делать в Додзе? Я всегда читаю комментарии, чтобы вы знали, что делать!