Может быть, вы видели этот твит: « JQuery — это наркотик, являющийся вратами. Это приводит к полноценному использованию JavaScript » . Я утверждаю, что частью этой зависимости является изучение других структур JavaScript. И это то, о чем эта серия из четырех частей о невероятном Dojo Toolkit предназначена для того, чтобы вывести вас на новый уровень вашей JavaScript-зависимости.
Во втором эпизоде мы обсудим загрузку модулей и использование некоторых модулей, улучшающих DOM.
Предпочитаете видео?
Помните, что для премиум -пользователей доступна скринкаст. Помимо всего, что описано в этом руководстве, я также расскажу о AJAX и междоменных методах AJAX в Dojo. Итак, войдите в систему, чтобы получить эти скринкасты и все другие невероятные скриншоты Tuts + Premium, учебные пособия и ресурсы.
Как вы помните, в Dojo гораздо больше, чем в базовом файле Dojo, который мы загрузили из CDN Google в первом эпизоде . Там гораздо больше, на самом деле. Итак, как мы можем использовать это намного больше ?
Что ж, остальная часть Dojo доступна в модулях. Мы можем загрузить модуль, чтобы получить его функциональность. За кулисами каждый модуль представляет собой собственный файл JavaScript. По сути, используемая вами строка, к которой вы обращаетесь к модулю, — это его путь (за исключением «.js»).
Чтобы лучше понять, как это работает, загрузите релиз Dojo Toolkit . После того, как вы распакуете этот довольно здоровенный файл, вы увидите это:
Для загрузки
able/baker/charlie.jsмы используем'able.baker.charlie'. Не может быть проще, верно?
Обратите внимание, есть папка для каждого из трех членов троицы додзё. По умолчанию эта папка (здесь она называется « dojo-release-1.6.1 ») является корнем для всех путей наших модулей.
Загляните в папку « dojo ». Вы увидите файл dojo.js , который является минимизированным базовым файлом Dojo, который мы загружаем из Google. Обратите внимание, что внизу есть файл с именем NodeList-traverse.js . Если бы мы хотели использовать функциональные возможности, которые предоставляет этот файл (и мы это сделаем в этом руководстве), мы получили бы его, используя путь к модулю 'dojo.NodeList-traverse' (да, я знаю, вы не знаете, где мы будем использовать этой строки пока нет, но придерживайся меня). Теперь видите эту папку с именем io ? Если бы мы хотели загрузить script.js файл script.js , мы бы использовали 'dojo.script.io' . Осваивать это? По сути, для загрузки able/baker/charlie.js мы используем 'able.baker.charlie' . Не может быть проще, верно?
Итак, где мы используем эти строки, точно? Мы можем передать эти строки пути модуля в функцию dojo.require . Это загрузит этот файл через XHR-запрос. Как только этот файл загрузится, вы сможете использовать все, что он принес в таблицу.
Я должен отметить, что вы не хотите пытаться использовать загружаемые фрагменты до того, как они будут загружены. Чтобы избежать этого, вы должны использовать dojo.ready , который является псевдонимом для dojo.addOnLoad . Любая функция, которую вы передаете ей, будет запущена после загрузки кода. Это очень похоже на функцию $(document).ready() jQuery. В этом уроке вы можете использовать консоль JavaScript вашего браузера, чтобы опробовать все эти фрагменты, поэтому у нас фактически не dojo.ready вызова dojo.ready здесь.
Итак, давайте начнем смотреть на некоторые модули. Я отмечу здесь, что мы не обязательно будем рассматривать все методы, которые каждый из этих модулей может предложить; мы рассмотрим те из них, которые вы найдете наиболее полезными при изучении додзё.
Ах, еще одна вещь: если вы следуете, вы можете использовать этот 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<html>
<head>
<title> Dig into Dojo, part 2 </title>
<style>
body {
font: 16px/1.5 helvetica;
color: #474747;
}
#test {
border: 1px solid #ccc;
background: #ececec;
width: 250;
padding: 20px;
text-align: center;
}
.active {
background: maroon;
}
</style>
</head>
<body>
<div id=’content’>
<h1> Dig into Dojo Episode 2</h1>
<p id=’test’> Dojo Tutorial </p>
<div> An Unsemantic Div </div>
<ul>
<li> A Child!
<li> A Child!
<li> A Child!
<li> A Child!
</ul>
<p> Another Paragraph </p>
</div>
<script src=’http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js.uncompressed.js’></script>
<script>
</script>
</body>
</html>
|
dojo.require('dojo.NodeList-data');
Давайте начнем с относительно простого: NodeList данных NodeList . Чтобы загрузить их:
|
1
|
dojo.require(‘dojo.NodeList-data’);
|
Чтобы закрепить идею этих путей, найдите файл, который вы только что загрузили. Вы должны найти его в [dojo-download]/dojo/NodeList-data.js . Когда вы немного познакомитесь с Dojo, я бы порекомендовал просмотреть несколько модулей, чтобы увидеть, как они построены.
Примечание . Несмотря на то, что мы загрузили Dojo, мы по-прежнему используем версию CDN Google, а это означает, что все нужные нам файлы загружаются оттуда. Если вы хотите использовать локальную копию, вам придется запустить Apache (или иным образом), потому что файлы загружаются через XHR.
Итак, dojo.NodeList-data добавляет два метода NodeList : data и removeData . Давайте посмотрим, как это работает:
|
1
2
3
4
|
var ps = dojo.query(‘p’);
ps.data(‘key’, ‘value’);
ps.data(‘key’);
|
Установка и получение данных — довольно простой процесс: передайте ключ (всегда строка) и значение (любой тип JavaScript), чтобы установить данные, и просто передайте ключ, чтобы получить их обратно. Вы заметите, что при получении data возвращают массив. Это потому, что NodeList s являются массивами и могут иметь более одного узла. Поэтому мы возвращаем значение для каждого узла. data всегда будут возвращать массив, даже если в NodeList есть только один элемент.
Если вы передаете data без параметров, он вернет массив с объектом для каждого узла в NodeList : каждый объект будет иметь соответствующие ключи и значения. Посмотреть здесь:
|
1
2
3
4
5
6
|
dojo.query(‘#test’).data(‘handle’, function () { /* action! */ });
dojo.query(‘p’).at(0).data(‘name’, ‘Dojo Toolkit’);
dojo.query(‘p’).at(1).data(‘age’, 1.6);
dojo.query(‘p’).data;
|
Теперь о removeData : передайте ему ключ, и он удалит этот ключ и значение из каждого узла. Передайте это без параметров, и это удаляет все:
|
1
2
3
4
5
|
// assuming the above:
var ps = dojo.query(‘p’);
ps.removeData();
ps.data();
|
Конечно, данные не сохраняются при обновлении страницы.
dojo.require('NodeList-fx');
Если вы знакомы с
fadeInjQueryfadeInиfadeOut, вы подумаете, что знаете их … и ошибетесь.
Далее следует коллекция методов анимации. Анимация с использованием функций JavaScript может быть довольно сложной, поэтому мы не будем подробно рассказывать об анимации в этой серии, но здесь мы рассмотрим несколько основных методов.
Следует отметить, что этот модуль в первую очередь предоставляет методы NodeList для многих методов dojo.* dojo.fx модуле dojo.fx Мы не будем обсуждать это конкретно, но многое из этого относится и к этим методам.
Во-первых, есть обязательные fadeIn и fadeOut . Если вы знакомы с fadeIn jQuery fadeIn и fadeOut , вы подумаете, что знаете их … и ошибетесь. Есть некоторые интересные отличия, которые мы должны охватить.
Эти методы — и другие в этом модуле — на самом деле являются методами-обертками для некоторых из невероятно сложных анимационных функций Dojo. Первое отличие состоит в том, что вызов одного из этих методов не запускает анимацию автоматически; он возвращает объект dojo.Animation . Затем, чтобы запустить анимацию, вы вызываете метод dojo.Animation объекта dojo.Animation . Кроме того, вы можете передать auto: true в качестве ключа / значения в объекте параметров, который вы можете передать методу анимации.
Другие параметры, которые вы можете передать методу анимации, включают, среди прочего, delay , duration и easing . Вы также можете включить функции, которые выполняются до или после определенных событий: beforeBegin , onBegin , onEnd , onPlay и onAnimate .
Хороший пример всего этого поведения — fadeOut функцию Dojo fadeOut работать как версия jQuery. Вот что мы сделаем, чтобы наш первый абзац исчезал за 2 секунды с каждой библиотекой:
|
1
2
3
4
5
6
7
|
jQuery(‘#test’).fadeOut(2000);
dojo.query(‘#test’).fadeOut({ auto: true, duration: 2000, onEnd: function (node) { dojo.style(node, ‘display’, ‘none’); } });
// alternately:
dojo.query(‘#test’).fadeOut({ duration: 2000, onEnd: function (node) { dojo.style(node, ‘display’, ‘none’); } }).play();
|
Все это относится и к fadeIn , wipeOut и wipeIn .
Затем есть метод animateProperty . Это действительно удобный способ изменить свойства CSS объекта, анимируя их при этом. Вы передадите объект параметров этому методу. Помимо получения всех свойств, которые fadeOut и друзья ( delay , duration , onEnd и т. Д.), Этот метод принимает свойство properties (как мета!) С вашими значениями CSS. Конечно, это возвращает объект dojo.Animation , поэтому вы в значительной степени вызываете метод play или используете свойство auto: true .
Вот пара примеров:
Эта линия будет затенять цвет фона нашего элемента до красного за 2 секунды:
|
1
|
dojo.query(‘#test’).animateProperty({ duration: 2000, properties: { backgroundColor: ‘red’ } }).play();
|
Эта строка будет ждать 4 секунды, а затем расширит наш элемент до 1200px и сообщит «сделано», когда закончите. Обратите внимание, что сначала мы загружаем модуль dojo.fx.easing . Это просто набор функций замедления, которые вы можете использовать, как показано ниже, везде, где допустимо смягчение.
|
1
2
|
dojo.require(‘dojo.fx.easing’);
dojo.query(‘#test’).animateProperty({ delay: 4000, properties: { width: 1200 }, easing: dojo.fx.easing.bounceOut, onEnd: function () { alert(‘done’); }, auto: true });
|
Еще один. Это показывает более расширенное использование свойств CSS: вместо того, чтобы просто указывать, где оно должно заканчиваться, вы также можете определить, где должно начинаться свойство. Конечно, если это не текущее значение свойства, оно не будет анимировано до начальной точки.
|
1
2
3
4
5
6
7
8
9
|
dojo.query(‘#test’).animateProperty({
properties: {
fontSize: { start: 20, end: 120 },
backgroundColor: { start: ‘red’, end: ‘blue’ },
width: { start: 100, end: 1200 }
},
easing: dojo.fx.easing.quintIn,
duration: 10000
}).play();
|
Конечно, анимация — это гидра, которую мы могли бы потратить на убийство в течение долгого времени, поэтому мы остановимся на этом.
dojo.require('dojo.NodeList-manipulate');
Мы обсудили несколько методов для управления элементами DOM в эпизоде 1 этой серии, но загрузка модуля dojo.NodeList-manipulate дает нам еще несколько методов для работы. Давай проверим их.
Во-первых, это innerHTML и text методы. Они делают очень многое из того, что вы ожидаете: установите HTML или текст внутри элемента на то, что вы передаете.
|
1
2
3
4
5
6
7
|
// <p id=’test’> Dojo Tutorial </p>
dojo.query(‘#test’).innerHTML(‘<strong> Unicorns! </strong>’);
// <p id=’test’><strong> Unicorns!
// <p id=’test’> Dojo Tutorial </p>
dojo.query(‘#test’).text(‘<strong> Unicorns! </strong>’);
// <p id=’test’>&lt;strong> Unicorns!
|
Вы также можете передать фактические DOM-узлы в innerHTML .
Затем, теплые аплодисменты для append и prepend , и их двоюродные братья appendTo и prependTo . Они очень похожи на innerHTML , за исключением того, что они не избавляются от того, что в данный момент находится в рассматриваемом узле (ах).
|
1
2
3
4
5
6
7
|
// <p id=’test’> Dojo Tutorial </p>
dojo.query(‘#test’).append(‘<strong> Unicorns! </strong>’);
// <p id=’test’> Dojo Tutorial <strong> Unicorns!
// <p id=’test’> Dojo Tutorial </p>
dojo.query(‘#test’).prepend(dojo.query(‘p’).at(1));
// <p id=’test’><p>Another Paragraph</p> Dojo Tutorial </p>
|
Когда вы перемещаете узлы DOM, как в последнем примере, может быть проще начать с узла, который вы хотите переместить. Затем вы можете использовать appendTo или prependTo , передавая селектор, чтобы сообщить Dojo, куда поместить узел:
|
1
|
dojo.query(‘h1’).appendTo(‘p’);
|
Это добавит <h1> на странице нашего примера к двум абзацам на странице. Обратите внимание, что &h1> будет удален из исходного местоположения и клонирован для каждого абзаца.
Наш следующий акт — after , before , insertAfter и insertBefore . Вы найдете их очень похожими на методы append , et al ; просто они помещают контент до или после рассматриваемого элемента. Фрагмент кода стоит тысячи слов, здесь:
|
1
2
3
4
5
6
7
|
// <p id=’test’> Dojo Tutorial </p>
dojo.query(‘#test’).after(‘<em> NETTUTS+ </em>’);
// <p id=’test’> Dojo Tutorial </p><em> NETTUTS+ </em>
// <p> Another Paragraph </p>
dojo.query(‘h1’).insertBefore(dojo.query(‘p:last-of-type’));
// <h1> Intro to Dojo Episode 2</h1> <p> Another Paragraph </p>
|
Я думаю, вы начинаете понимать это.
Теперь методы NodeList wrap , wrapAll и wrapInner . Это довольно просто:
wrap NodeList элементы в NodeList строкой HTML, которую вы передаете:
|
1
|
dojo.query(‘p’).wrap(‘<strong>’);
|
wrapAll переместит все узлы в вашем NodeList туда, где находится первый, и обернет их все в HTML-строку, которую вы передаете:
|
1
|
dojo.query(‘p’).wrapApp(‘<div class='active'></div>’);
|
wrapInner все внутри узлов в вашем NodeList , по сути сделав его единственным дочерним узлом каждого узла:
|
1
|
dojo.query(‘body’).wrapInner(‘<div id='main'>’);
|
dojo.require('dojo.NodeList-traverse');
В эпизоде 1 мы видели несколько методов выбора для перемещения, но — дождитесь этого — еще больше, если вы будете dojo.require('dojo.NodeList-traverse') .
Я знаю, что вы рады видеть эти методы, но сначала обратите внимание: все эти методы NodeList каким-то образом меняют NodeList . Чтобы вернуться к исходному NodeList , используйте метод end , как и jQuery .
children : захватывает дочерние узлы узлов в вашем NodeList ; по желанию, берет селектор для фильтрации этих детей:
|
1
|
dojo.query(‘ul’).children();
|
parent : захватывает родительский узел узлов в вашем NodeList . Есть также метод parent (множественное число), который возвращает parent, grandparent и т. Д. Оба принимают фильтрующие селекторы.
|
1
2
|
dojo.query(‘li’).parent();
dojo.query(‘li’).parents();
|
siblings : получает братьев и сестер каждого узла. Может быть отфильтровано.
|
1
|
dojo.query(‘#test’).siblings();
|
next , prev , nextAll и nextAll : эти методы являются, если хотите, под-методами siblings : все они возвращают определенную группу родных братьев и сестер. next возвращает узел-брат после каждого узла в NodeList ; prev возвращает один перед каждым узлом. nextAll и prevAll возвращают всех следующих или предыдущих братьев и сестер каждого узла в NodeList .
|
1
2
3
|
dojo.query(‘#test’).next();
dojo.query(‘p’).prev();
dojo.query(‘li’).prevAll();
|
first / last : очень просто, эти методы возвращают первый и последний методы NodeList :
|
1
2
|
dojo.query(‘li’).first();
dojo.query(‘li’).last();
|
even / odd : получите ваши нечетные или четные узлы из NodeList здесь:
|
1
2
|
dojo.query(‘li’).even();
dojo.query(‘li’).odd();
|
И вот что у вас есть: четыре полезных модуля для работы с DOM. Конечно, есть десятки десятков других доступных модулей, гораздо больше, чем я мог бы описать во вводной серии. Я рекомендую вам покопаться в этом каталоге dojo в загрузке инструментария и посмотреть, что вы можете найти.
Вывод
Теперь, когда вы знакомы с парой модулей Dojo, я рекомендую вам покопаться в самих модулях, чтобы увидеть, как они добавляют свою функциональность. Хотя я не смогу объяснить, как именно создаются модули в этой серии, то, что вы видите, может стать хорошей отправной точкой для некоторых ваших собственных исследований.
Спасибо за то, что остаетесь, и не спускайте глаз с Эпизода 3, где мы рассмотрим Dijit.