Если вы, как и многие разработчики Flash, планируете использовать HTML5 для своих веб-приложений, вы почти наверняка встретите jQuery. Это очень популярная библиотека JavaScript, используемая большим процентом самых посещаемых веб-сайтов — но о чем весь этот шум, и стоит ли вам его использовать?
Фон
Если вы знаете AS3, вы уже знаете много JavaScript; два языка очень похожи. Так что заманчиво просто прыгнуть прямо и кодировать — но есть несколько важных концепций, которые вы должны понять в первую очередь. Одной из них является идея DOM.
Когда вы загружаете веб-страницу, ваш браузер превращает плоский HTML в древовидную структуру объектов JavaScript, которая называется DOM (Document Object Model). Таким образом, DOM JavaScript очень похож на список отображения ActionScript; и если вы разработчик Flex, вы сможете увидеть сходство между MXML и HTML.
Во Flash мы можем получить доступ к определенным stage.getChildAt(3).getChildAt(0) , stage.getChildAt(3).getChildAt(0) к ним через список отображения, например, stage.getChildAt(3).getChildAt(0) , но это довольно нелепо. Вместо этого мы с большей вероятностью дадим имена экземпляров экранных объектов (через Flash IDE) или сохраним ссылки на них в переменных, массивах или свойствах объекта, например dialogBox.okButton = new SimpleButton() .
В JavaScript мы могли бы полностью сконструировать нашу DOM через JS, а затем сказать браузеру визуализировать ее, но это необычный подход; у нас гораздо больше шансов определить DOM через HTML, возможно, с небольшим дополнением JS. Итак, JavaScript имеет различные методы доступа к элементам DOM.
Простейшим из них является document.getElementById() . Если у нас есть HTML-документ, определенный следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<div>
<span id=»example»>
<p>Here’s some example text.</p>
</div>
</body>
</html>
|
… затем document.getElementById("example") получит нам выделенный объект span из DOM. Затем мы могли бы добавить второй тег p следующим образом:
|
1
2
3
4
|
var newPara = document.createElement(«p»);
var newTextNode = document.createTextNode(«More example text that we created on the fly.»);
newPara.appendChild(newTextNode);
document.getElementById(«example»).appendChild(newPara);
|
Это обновит DOM, сделав его эквивалентным тому, что было бы создано, если бы исходный HTML был следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<div>
<span id=»example»>
<p>Here’s some example text.</p>
<p>More example text that we created on the fly.</p>
</div>
</body>
</html>
|
Что если вы хотите получить доступ к двум элементам p ? Мы не можем получить к ним прямой доступ с помощью document.getElementById() , поскольку у них нет идентификатора, но мы можем использовать document.getElementsByTagName("p") чтобы получить массив, содержащий их обоих.
И если бы у нас был другой span , как это:
|
01
02
03
04
05
06
07
08
09
10
|
<div>
<span id=»example1″>
<p>Here’s some example text.</p>
<p>More example text that we created on the fly.</p>
<span id=»example2″>
<p>A second span.</p>
<p>We don’t care about these paragraphs.</p>
</div>
|
… и мы хотели получить только первые два тега p , мы могли бы вызвать document.getElementById("example1").getElementsByTagName("p") просто для извлечения этих двух — все эти функции DOM работают на любом уровне дерева структура, так же, как у каждого Flash DisplayObjectContainer есть методы, такие как getChildAt() .
Это достаточно просто понять, но есть проблемы. Первое, что вы можете не удивиться, касается Internet Explorer.
Кросс-браузерная совместимость
Impressive Webs имеет отличную схему проблемы getElementById() в Internet Explorer. По сути, если у вас есть такой HTML-элемент:
|
1
|
<span name=»exampleName»>
|
… тогда в большинстве браузеров document.getElementById("exampleName") не даст вам рассматриваемый span , но в IE7 это даст . (Другие браузеры могут использовать document.getElementsByName("exampleName")[0] чтобы вернуть этот конкретный span .)
Это означает, что для обеспечения согласованности между браузерами (и при условии, что мы не можем изменить HTML), нам нужно написать код, подобный следующему:
|
01
02
03
04
05
06
07
08
09
10
11
|
var theSpan;
if (usingIE) { //I won’t explain how to detect the browser here
var temp = document.getElementById(«exampleId»);
//this might have returned an element with a name of «exampleId», so we must check:
if (temp.getAttribute(«id») == «exampleId») {
theSpan = temp;
}
}
else {
theSpan = document.getElementById(«exampleId»);
}
|
В более общем смысле, мы можем заключить это в функцию многократного использования:
|
01
02
03
04
05
06
07
08
09
10
11
|
function getElById(id) {
if (usingIE) {
var temp = document.getElementById(id);
if (temp.getAttribute(«id») == id) {
return temp;
}
}
else {
theSpan = document.getElementById(id);
}
}
|
Большой! Но, к сожалению, таких раздражающих маленьких различий так много; это, вероятно, удивит вас, если вы работаете на простом Flash-фоне, где «проблема совместимости» обычно означает, что Flash Player на некоторых платформах работает немного медленно.
JQuery решает это. Он обрабатывает трещины между различными браузерами с помощью своего собственного набора функций, поэтому, если браузер пользователя является таким же новым, как IE6, ваш код может иметь согласованный интерфейс.
Это не единственный способ, с помощью которого jQuery делает JavaScript проще …
Простой синтаксис
Давайте вернемся к этому фрагменту HTML и предположим, что мы хотим получить выделенные элементы p из DOM:
|
01
02
03
04
05
06
07
08
09
10
|
<div>
<span id=»example1″>
<p>Here’s some example text.</p>
<p>More example text that we created on the fly.</p>
<span id=»example2″>
<p>A second span.</p>
<p>We don’t care about these paragraphs.</p>
</div>
|
С помощью jQuery мы можем просто написать:
|
1
|
jQuery(«#example1 p»)
|
Это все, что нам нужно! #example1 говорит «получить элемент с идентификатором example1 », а p говорит «получить все элементы p которые являются потомками этого элемента». Он возвращает «объект jQuery», который является объектом JavaScript и содержит два элемента p из JS DOM, а также несколько дополнительных свойств и методов, специфичных для jQuery.
Мы можем сделать его еще короче, заменив jQuery на $ — здесь нет никаких загадок; $ это просто короткое имя переменной. Сравните это с собственным кодом JavaScript:
|
1
2
3
4
5
|
//regular JS, without cross-browser compatibility:
document.getElementById(«example1»).getElementsByTagName(«p»)
//jQuery, with cross-browser compatibility built in:
$(«#example1 p»)
|
Он не просто короче, он согласуется с CSS, что облегчает его выбор. Мы можем использовать тот же селектор, что и в нашем вызове jQuery() чтобы стилизовать эти конкретные абзацы в таблице стилей CSS:
|
1
|
#example1 p { color: red }
|
Это просто очень простой пример; Я не буду вдаваться в подробности, но я уверен, что вы видите выгоду от возможности использовать одни и те же селекторы как в CSS, так и в jQuery.
Больше, чем просто выбор
Я упоминал, что объекты jQuery, возвращаемые вызовом $() имеют дополнительные методы и свойства. Это дает вам простой синтаксис для написания других общих частей кода.
Например, мы могли бы добавить слушатель события щелчка мыши и функцию-обработчик к обоим из этих элементов p следующим образом:
|
1
2
3
|
$(«#example1 p»).click(function() {
alert(«You clicked a paragraph!»);
});
|
Или вы можете сделать их всех невидимыми:
|
1
|
$(«#example1 p»).hide();
|
Или вы можете запустить более общий JavaScript для них:
|
1
2
3
4
|
var allText = «»;
$(«#example1 p»).each(function() {
allText += $(this).text();
});
|
В каждом случае jQuery предоставляет простой, короткий и последовательный способ написания. Это означает, что быстрее получить код из головы в браузер — и не только потому, что для этого требуется меньше символов.
Подростки и переходы
Поскольку Flash имеет свои корни в анимации, мы привыкли к тому, что в нем есть множество встроенных возможностей анимации — как в Flash IDE, так и в классе Tween , не говоря уже о различных доступных библиотеках анимации.
JavaScript отличается; анимация не является неотъемлемой частью платформы. Но маленькие подростки и переходы являются ожидаемыми частями взаимодействия пользователя с современным веб-приложением: если я добавлю новый комментарий в ветку, он встанет на свои места; если я удаляю товар из моей корзины, он мигает красным и исчезает. Без них приложения выглядят неполированными.
jQuery добавляет эти маленькие переходы.
Например, допустим, мы хотим, чтобы любой из вышеупомянутых абзацев исчезал при нажатии. Легко:
|
1
2
3
|
$(«#example1 p»).click(function() {
$(this).fadeOut();
});
|
Ничего подобного! И вы можете передать duration и callback в callback fadeOut() , если вам не нравятся значения по умолчанию.
Для чего-то более мощного мы можем использовать метод animate() . Это по сути эквивалент подростка; передайте ему набор свойств и значений CSS для анимации, длительности, типа замедления и обратного вызова, и он позаботится обо всем за вас.
Это не совсем Greensock, но это гораздо удобнее, чем писать эти эффекты с нуля, и идеально подходит для интерфейсов веб-приложений.
Говоря о которых…
UI Widgets
Конечно, в HTML есть несколько встроенных компонентов пользовательского интерфейса: кнопки, текстовые поля и так далее. HTML5 определяет несколько новых, таких как всплывающий календарь и цветной пикет (хотя в настоящее время они поддерживаются только в Opera).
Но одного этого недостаточно, чтобы создать полноценный современный интерфейс веб-приложения. Там нет ничего, чтобы обрабатывать вкладки на странице, или индикатор выполнения, или даже простое диалоговое окно (за пределами alert() и prompt() ).
jQuery UI, дополнительная библиотека, созданная поверх jQuery, добавляет эти дополнительные виджеты с методами и событиями, которые соответствуют обычному синтаксису jQuery. Думайте об этом как о JavaScript, эквивалентном AS3 MinimalComps Кейта Питерса. Демонстрационная страница показывает это лучше, чем я могу объяснить.
Каждый виджет может поддерживать пользовательские темы, поэтому вы можете создать одну обложку, подходящую для вашего сайта, и применить ее к каждому компоненту, что позволит сразу изменить их внешний вид. Снова: последовательность! Кроме того, вы можете применять эффекты, связанные с пользовательским интерфейсом, к другим элементам; предоставить пользователю возможность перетаскивать или изменять размер элемента DOM или щелкать и перетаскивать рамку вокруг группы элементов, чтобы выбрать их для отправки.
Другие причины jQuery так популярен
Кросс-браузерная совместимость, простой синтаксис, возможности анимации и элементы пользовательского интерфейса — вот основные преимущества jQuery перед простым JS в моих глазах. Есть и другие причины, чтобы любить это, хотя:
- Он широко используется и существует уже шесть лет: это не какая-то «новая горячность», которая до сих пор не доказана и может просто исчезнуть через несколько месяцев. Вы можете верить, что это будет какое-то время.
- Вокруг него большое сообщество: это означает, что есть много учебников, книг, форумов и людей, из которых можно поучиться; ты не собираешься возиться в темноте.
- Документация отличная: серьезно, посмотрите ; это очень чисто и полно примеров и демонстраций
- Есть даже альтернативные наборы документов с различными интерфейсами , если это то, что вам нужно (еще один пример великого сообщества)
- Это открытый источник: сообщество может добавить к нему, и вы можете взломать его и извлечь уроки из него
Так почему бы вам не использовать jQuery? Как и в случае большинства технологических решений, вопрос заключается в том, чтобы убедиться, что вы используете правильный инструмент для своей работы. Если у вас простая структура DOM, или вам не требуются причудливые анимации и переходы, или вы в основном используете canvas для визуализации интерфейса, а не виджетов, jQuery, вероятно, не нужен.
Если вы уже используете одну или несколько библиотек JavaScript — Dojo, MooTools, YUI и т. Д. — вы можете обнаружить, что вам не нужна функциональность jQuery в дополнение к тому, что они предлагают. Но моя цель в этой статье — не пытаться продать вам какую-то конкретную библиотеку выше любой другой.
Я надеюсь, что эта статья помогла объяснить, что же такого важного в jQuery, особенно если вы работаете в мире AS3 и Flash. Если вы хотите изучить его, проверьте тег jQuery на Nettuts + — jQuery для абсолютных новичков — хорошее место для начала.
Дайте мне знать, если у вас есть какие-либо вопросы!