Пойдем сегодня с практическим подходом. Мы собираемся написать небольшой фрагмент кода в jQuery, а затем перенести его на несколько разных библиотек. Помимо этого, мы рассмотрим, как реализовать некоторые базовые необходимые функции в каждой из этих библиотек. Звучит смешно? Давайте погрузимся в!
Слово от автора
Фреймворки JavaScript — это благо, когда у вас есть много идей для превращения в функциональный, чистый код. И в условиях стремительного роста числа веб-приложений, использующих технологию AJAX, необходимы такие среды, как jQuery, чтобы сократить время, затрачиваемое на реализацию необходимых функций. И, оглядываясь вокруг, вы видите jQuery this и jQuery, которые практически не упоминают другие фреймворки. На самом деле существует множество других фреймворков, которые так же элегантны, как и jQuery. Сегодня мы рассмотрим две платформы, которые обещают упростить написание кода. Обратите внимание, что я использую слова библиотеки, рамки и инструментарий взаимозаменяемо. Я не собираюсь вдаваться в семантику, и вы не должны. Каждая из этих библиотек пытается выполнить разные вещи. Мы будем только смотреть на части, где их предполагаемые функциональные возможности перекрываются.
Основная функциональность
Помимо эзотерических и / или специализированных приложений, код JavaScript большинства людей можно разбить на куски, которые выполняют следующие функции:
ДОМ готов
Разработчик JavaScript рано или поздно сталкивается с этой проблемой: его первоначальный код просто не запускается. Он снова и снова отлаживал код, но безрезультатно. Проблема в том, что код просто находится в верхней части страницы. Когда скрипт выполняется, элементы, на которые он ссылается в своем коде, даже не существуют в DOM, что приводит к этим ошибкам.
Помните, что вызовы сценариев являются синхронными. Это означает, что когда браузер видит тег скрипта, он перестает загружать все остальное, пока скрипты не загружаются. Это резко контрастирует с его общим механизмом загрузки, где другие объекты часто загружаются асинхронно.
Вы всегда можете обойти это, просто разместив код внизу страницы, но вы никогда не узнаете. Имея это в виду, большинство библиотек предоставляют функцию готовности DOM, чтобы гарантировать выполнение кода только после того, как DOM готов заблокировать загрузку, но до полной загрузки изображений.
С сырым JavaScript, вы бы смотрели на что-то вроде этого.
|
1
|
window.onload = someFunction;
|
Доступ к элементам
Вы, очевидно, хотите получить доступ к определенным элементам и как-то ими манипулировать. К сожалению, IE довольно привередлив и может испортить ваш код. Чтобы позволить разработчикам писать лучший код, каждая библиотека предоставляет метод кросс-браузер, который позволяет вам получить доступ к определенному элементу. Большинство библиотек используют селекторы стилей CSS, чтобы сосредоточиться на своих целевых элементах, чтобы сделать кривую обучения короче и, что еще важнее, сделать код более чистым.
Без фреймворка вам придется сделать это:
|
1
2
|
var elem = document.getElementById(‘header’);
var io = document.getElementsByTagName(‘input’);
|
Манипулирующие элементы
Конечно, как только вы получите элемент, вы захотите выполнить некоторую операцию. Это включает добавление или удаление класса, переключение его видимости, изменение его размеров, редактирование его содержимого и так далее. Как всегда, писать все это в сыром JavaScript может быть больно. Каждая из этих библиотек предоставляет функции-оболочки для выполнения всей вышеупомянутой работы и многого другого.
С сырым JavaScript ваш код будет выглядеть так:
|
1
|
document.getElementById(«title»).innerHTML=»Title»;
|
Управление DOM
Часто вы хотите напрямую изменить узлы в DOM. Возможно, вы захотите создать новый объект-обертку, в который хотите добавить свой недавний статус Twitter, или вы можете удалить элемент div для приложения электронной почты, которое вы пишете. В каждом из этих случаев вы хотели бы эффективно управлять DOM, и все эти библиотеки предоставляют методы для этого чистым способом.
Добавление элемента заняло бы столько кода с необработанным JS.
|
1
2
|
var myElement = document.createElement(«<div>Sometext</div>»);
document.all.myBody.appendChild(myElement);
|
Подсоединение событий
События являются строительными блоками любого приложения и одной из самых противных частей межбраузерного скриптинга. Дело в том, что W3C определяет один путь, а IE делает свое дело. Чтобы преодолеть это, все эти библиотеки предоставляют способы присоединять или отсоединять даже обработчики к определенным событиям элемента.
Подключение событий в сыром JavaScript.
|
1
|
element.addEventListener(‘click’,doSomething,false)
|
Запрос AJAX
Собственный JavaScript, использующий объект XHR, утомителен при написании и отладке. Чтобы разработчикам было проще писать код, каждая из этих платформ абстрагирует утомительные детали реализации запроса AJAX за простым вызовом функции с методами, вызываемыми при успешном выполнении или сбое запроса.
Я даже не собираюсь публиковать некоторый код для выполнения AJAX-запроса с необработанным JS. Вместо этого вы должны смотреть на превосходную заставку Джеффри. Вскоре мы увидим, как фреймворк существенно сокращает ваш код.
Функциональность, которую мы ищем в коде
Ничего особенного на самом деле; мы создадим простую демонстрацию. Разметка выглядит так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Net Tuts</title>
</head>
<body>
<p id=»text»>This is some sample <span id=»maintrigger»>random
to modify the DOM by creating a new element and appending it to the current content.
</p>
</body>
</html>
|
У нас есть текст внутри элемента ap. У нас есть слово random, заключенное в элемент span с идентификатором maintrigger. При каждом щелчке по элементу с идентификатором maintrigger необходимо добавить новый элемент div к элементу абзаца, содержащему текст «clicked». Эта простая демонстрация затрагивает все основные функциональные требования, включая доступ к элементам, подключение событий и добавление элементов, кроме абстракции AJAX, и позволит нам почувствовать каждую библиотеку.
Прежде чем мы рассмотрим другие библиотеки, лучше всего посмотреть, как jQuery позволяет нам делать каждую из них.
JQuery
Ах, все пронизывающие JQuery. Это были разговоры о городе среди веб-разработчиков, которые давно знают, и это правильно. JQuery не пытается делать слишком много вещей. Вы не найдете дюжину и более виджетов в комплекте с базовой сборкой или способами поддержки классов или объектов на основе классов. jQuery фокусируется в основном на DOM, и я думаю, что они проделали отличную работу.
Если ваша работа в основном связана с DOM, jQuery — это то, что вам нужно. Синтаксис является одним из самых простых и во многих случаях он напоминает чтение псевдокода, чем реальный рабочий код. Сообщество большое и дружелюбное, и есть множество плагинов, которые вы можете просто добавить для дополнительной функциональности. Плюс есть библиотека пользовательского интерфейса, если вы хотите добавить некоторые общие виджеты на ваш сайт.
База пользователей jQuery включает в себя:
- IBM
- Microsoft
- Амазонка
- Dell
- щебет
- ESPN
- Digg
- Netflix
- Mozilla
- WordPress
Очень впечатляет, если вы спросите меня.
Теперь мы посмотрим, как jQuery позволяет нам сократить время, затрачиваемое на кодирование, прежде чем мы рассмотрим другие фреймворки.
ДОМ готов
|
1
2
3
|
$(document).ready(function () {
// Your stuff here
});
|
При написании вашего кода jQuery обязательно, чтобы вы поместили свой код в этом разделе. Здесь мы просим выполнить код, когда DOM готов к манипулированию. Вы можете либо передать имя функции, либо просто написать весь свой код внутри анонимной функции, как в примере выше.
Доступ к элементам
|
1
2
3
|
var container = $(«#main»);
var posts = $(«.post»);
var headings = $(«h1»);
|
Все просто. Сначала мы создаем переменную для хранения ссылки на узел DOM, поскольку мы не хотим искать ее снова и снова. $ является псевдонимом пространства имен jQuery . Мы просто передаем идентификатор, класс или тег элемента, как если бы вы писали объявление CSS. Передача в селекторах CSS работает так же, как и следовало ожидать. Примеры как ниже работают тоже.
|
1
2
3
|
$(«span:has(a)»).doSomething();
$(«ul li:nth-child(3)»).doSomething();
$(«p:hidden»).doSomething();
|
Манипулирующие элементы
|
1
2
3
|
$(«div»).attr(«class», «clicked»);
$(«div»).html(«<span>Hello
$(«span»).addClass(«current»);
|
Изменение атрибутов элементов, их содержимого или классов, которые у него есть, довольно тривиально. Мы просто получаем доступ к требуемому элементу и вызываем необходимую функцию. Метод attr позволяет нам изменять определенный атрибут элемента, метод html позволяет нам определять содержимое HTML, а метод addClass не нуждается в объяснении.
Управление DOM
|
1
2
3
|
$(«#post»).after(«<div>Comments</div>»);
$(«p»).wrap(«<div></div>»);
$(«.comment»).append(«<span>Posted by
|
Добавление элементов после указанного элемента, добавление содержимого внутри элемента или упаковка переданного элемента другим также просто. Мы получаем элемент и затем вызываем функцию, которая лучше всего соответствует нашим потребностям.
Подсоединение событий
|
1
2
3
4
5
6
7
|
// Using anonymous functions
$(«#submit»).bind(«click», function(e){
// Your code here
});
// Passing in a functions name
$(«#submit»).bind(«click», evHandler);
|
Подключать события также легко. Мы получаем элемент и затем вызываем функцию связывания. Первый аргумент — это тип события, а второй — код, который нужно выполнить при запуске события. Вы можете либо передать имя функции, либо просто создать анонимную функцию и поместить в нее весь свой код.
Запрос AJAX
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
$.ajax({
type: «GET»,
url: «test.html»,
success: function(xhr){
//Some code here
},
error: function(xhr){
//Some code here
}
$.ajax({
type: «POST»,
url: «test.php»,
success: function(xhr){
//Some code here
},
error: function(xhr){
//Some code here
}
});
|
Вам нужно всего лишь 3 линии, чтобы сделать AJAX-вызов barebone. Укажите тип запроса, URL и все готово. Можно определить функции успеха и ошибок, чтобы указать, что произойдет, если произойдут их тезки.
Эквивалентный код
Для достижения желаемой функциональности, упомянутой выше, ваш код jQuery будет выглядеть примерно так:
|
1
2
3
|
$(«#maintrigger»).click(function () {
$(«p»).after(«<div>Clicked</div>»);
});
|
3 строки это все, что нужно. Мы выбираем необходимые элементы, вызываем функцию click, создаем анонимную функцию и добавляем элемент div. Это звучит намного сложнее, чем на самом деле.
Теперь, когда мы рассмотрели код jQuery, мы можем исследовать другие библиотеки.
Опытный образец
Prototype — великий папа фреймворков JavaScript. Он предоставляет все тонкости, которые вы ожидаете от зрелой платформы, а затем добавляет немного больше. Он также предоставляет ряд библиотечных функций, которые помогут вам написать красиво абстрагированный объектно-ориентированный код.
Пользовательская база прототипа включает в себя:
- яблоко
- НАСА
- 37 сигналов
- Гвинея
- Рельсы
- Рюкзак
- Gucci
- ласт фм
- Проводная
- Prada
- Dreamhost
Там много известных, топовых имен. Как я уже говорил, Prototype раньше был фреймворком, прежде чем появился jQuery.
Теперь, когда введение закончено, давайте посмотрим, как Prototype может помочь вам лучше написать JavaScript.
ДОМ готов
|
1
2
3
|
document.observe(«dom:loaded», function() {
// Your code here
});
|
Выше готовая версия DOM Prototype. Поначалу это выглядит странно, если вы пришли из jQuery, но это так же просто. Функция наблюдения прослушивает пропущенное событие в течение всего времени существования документа. Мы просто передаем необходимое событие и обертываем весь наш код в анонимную функцию, как в jQuery.
Доступ к элементам
|
1
2
3
4
5
|
//Access an element with an id of post
$(‘post’);
//Use the CSS selector engine
$$(‘.comment’);
|
$ предоставляет псевдоним для метода document.getElementById . Позволяет найти элементы с переданным значением идентификатора.
$$ позволяет вам использовать CSS-селекторы. Он принимает в качестве аргументов любое количество селекторов CSS и возвращает конкретный элемент или их массив. Как и в случае с механизмом выбора jQuery, вы можете использовать все виды гнусных селекторов CSS3, включая дочерние селекторы, селекторы атрибутов и даже псевдоклассы.
Манипулирующие элементы
|
1
2
3
|
$(‘post’).addClassName(‘author’);
$(‘container’).getWidth();
$(‘post’).hide();
|
Прототип предоставляет ряд мощных методов для работы с возвращаемым элементом. Помните, что вам нужно получить доступ к этому через объект $. Это означает, что вам сначала нужно сохранить ссылку, прежде чем вы сможете манипулировать элементом так, как считаете нужным.
Управлять элементом так же просто, как получить ссылку на элемент и вызвать необходимую функцию. Вы можете сделать много вещей от установки атрибутов до сокрытия элемента.
Управление DOM
|
1
2
3
|
$(‘post’).wrap(‘div’, { ‘id’: ‘container’ });
$(‘post’).update(‘<p>Some random text</p>’);
$(‘post’).insert(‘div’, ‘<p>Some random text</p>’);
|
Первый метод оборачивает переданный элемент описанным элементом, настраивая его различные свойства в процессе. Функции обновления заменяют содержимое переданного элемента тем, которое нам нужно. Вставить — вставляет обычный текст или фрагменты HTML сверху, снизу, до или после элемента. Вместо использования отдельных методов, таких как append и after, как в jQuery, нам просто нужно указать позицию, и все готово.
Подсоединение событий
|
1
2
3
4
5
6
7
|
// Using anonymous functions
$(btn).observe(‘click’, function(event){
//Your code here
});
// Passing in a function’s name
$(btn).observe(‘click’, doSomething);
|
Как я уже упоминал ранее, функция наблюдения позволяет вам подключать события к их обработчикам. Сначала мы получаем ссылку на элемент, а затем вызываем метод наблюдений, передавая имя и функцию события в качестве параметров. Если вы не хотите создавать отдельную функцию только для этого, вы всегда можете создать анонимную функцию и поместить туда весь свой код.
Запрос AJAX
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
new Ajax.Request(«test.html», {
method: ‘get’,
onSuccess: function(transport) {
// Some code here
},
onFailure: function(transport) {
// Some code here
}
});
new Ajax.Request(«test.php», {
method: ‘post’,
onSuccess: function(transport) {
// Some code here
},
onFailure: function(transport) {
// Some code here
}
});
|
Prototype предоставляет расширенные функции-оболочки для выполнения запроса AJAX. Я показал нижний уровень AJAX POST и GET запросов здесь. Существует множество других специализированных методов для запросов AJAX, включая автообновление.
Эквивалентный код
Для достижения желаемой функциональности, упомянутой выше, ваш код будет выглядеть примерно так:
|
1
2
3
|
$(«maintrigger»).observe(‘click’, function(event){
$(«text»).insert(‘<div>Clicked</div>’);
});
|
Еще 3-х лайнер. То, что мы делаем, похоже на код jQuery, синтаксис просто другой. Мы используем функцию наблюдения, чтобы прикрепить событие click к коду, который мы создали в анонимной функции. Мы просто вставляем текст, чтобы обозначить, что процесс прошел успешно.
Вы увидите, что в целом мы делаем то же самое, что и jQuery, только с другим синтаксисом и несколькими отличиями. Когда ваша работа не ориентирована на DOM и вам нужны подходящие объекты для правильного использования ваших идей, Prototype — это подходящая среда для выбора.
Mootools
Mootools не претендует на легкость в освоении. Посмотрим правде в глаза, его веб-страница говорит, что это платформа веб-приложений для средних и продвинутых веб-разработчиков. Не позволяй им обмануть тебя. Это чрезвычайно элегантный фреймворк, который позволяет создавать чрезвычайно стильный JavaScript. Основное внимание уделяется JavaScript в целом, а не только DOM. Имея это в виду, он предоставляет ряд функций для ускорения вашего рабочего процесса, а также расширяет DOM, где это возможно. И, как и Prototype, он содержит систему создания и наследования классов, которая должна сделать тех, кто приходит из C # или Java, более удобным с JavaScript.
Компании, которые используют MooTools, включают в себя:
- Ferrari
- Vimeo
- Пальма
- Nintendo
- Формула 1
- GameSpot
- CNet
- Joomla
- PhpMyAdmin
- Джип
- Bing
Еще один фреймворк с очень впечатляющей пользовательской базой.
Давайте теперь посмотрим, как MooTools облегчает вашу жизнь как разработчика JavaScript.
ДОМ готов
|
1
2
3
|
window.addEvent(‘domready’, function() {
// Your code here
});
|
Это может выглядеть сложно, но не волнуйтесь. Это просто выглядит по-другому. Мы прикрепляем событие domready окон к анонимной функции. AddEvent позволяет нам прикреплять события к их обработчикам. MooTools определяет событие domready, которое мы используем здесь. Как обычно, мы оборачиваем весь наш код в анонимную функцию и помещаем его внутрь. Там! Это было не так сложно, правда?
Доступ к элементам
|
1
2
3
4
5
6
7
|
// Use the $ function
$(‘someElement’);
// Use CSS selectors
$$(«#main»);
$$(«.post»);
$$(«h1»);
|
Как и в случае с Prototype, вы можете использовать функцию $ в качестве псевдонима для прямого поиска или использовать функцию $$, чтобы использовать гораздо более интуитивно понятные селекторы CSS.
Каждый из этих методов возвращает либо элемент DOM, либо массив в зависимости от того, что вы используете.
Манипулирующие элементы
|
1
2
3
4
5
6
7
|
$(‘someElement).hasClass(‘clicked’);
// Returns true if the element indeed has that class
$(«someElement»).setProperty(‘class’, ‘clicked’);
$(«someElement»).empty();
// Empties the element of all its children
|
MooTools предоставляет ряд методов для управления конкретным элементом, включая установку его атрибутов, изменение его содержимого и так далее. Если вы заинтересованы, обратитесь к документации MooTools здесь
Управление DOM
|
1
2
3
4
5
6
7
8
9
|
var someElement = new Element(‘div’, {id: ‘mySecondElement’});
someElement.inject(someOtherElement);
// Injects the contents of someElement within someOtherElement
$(«someElement»).destroy();
// Removes element and all its children from the DOM
$(‘someElement’).clone().
// Makes a copy of the element
|
Как и большинство библиотек, MooTools предоставляет множество функций, позволяющих нам модифицировать DOM. Все, от добавления контента до полного удаления узла из DOM, включено.
Подсоединение событий
|
1
2
3
4
5
6
7
|
// Using anonymous functions
$(‘myElement’).addEvent(‘click’, function(){
// Some code
});
// Passing in the functions name
$(‘myElement’).addEvent(‘click’, doSomething);
|
Как я отмечал выше, мы используем метод addEvent, чтобы прикрепить событие к его обработчику. Мы передаем имя события в функцию и, как обычно, мы можем выбирать между созданием отдельной или анонимной функции для добавления нашего кода.
Запрос AJAX
|
1
2
3
4
5
6
7
|
// A GET request
var myRequest = new Request({method: ‘get’, url: ‘test.html’});
myRequest.send();
// A POST request
var myRequest = new Request({url: ‘test.html’});
myRequest.send(someData);
|
Настройка запроса AJAX также проста. MooTools предоставляет надежный класс Request, который позволяет использовать запросы POST или GET AJAX. По умолчанию используется метод POST, поэтому нет необходимости указывать, выполняете ли вы запрос.
Как и другие платформы, класс запроса поддерживает обратные вызовы для успеха, ошибки и завершения.
Эквивалентный код
Для достижения желаемой функциональности, упомянутой выше, ваш код будет выглядеть примерно так:
|
1
2
3
4
5
|
$$(«#maintrigger»).addEvent(‘click’, function(){
var elem = $(«text»);
var someElement = new Element(‘div’);
someElement.appendText(«Clicked!»).inject(elem, «after»);
});
|
Чуть более многословно, чем в двух других реализациях, но здесь мы фактически создаем узел div с нуля, а затем добавляем его. Также мы храним ссылку на сам элемент абзаца. После этого мы просто добавляем необходимый текст во вновь созданный элемент и затем добавляем его в DOM.
Более многословно? Да. Труднее? Определенно нет. Это просто другой стиль кодирования.
Сравнение кода
JQuery
|
1
2
3
|
$(«#maintrigger»).click(function () {
$(«p»).after(«<div>Clicked</div>»);
});
|
Опытный образец
|
1
2
3
|
$(«maintrigger»).observe(‘click’, function(event){
$(«text»).insert(‘<div>Clicked</div>’);
});
|
MooTools
|
1
2
3
4
5
|
$$(«#maintrigger»).addEvent(‘click’, function(){
var elem = $(«text»);
var someElement = new Element(‘div’);
someElement.appendText(«Clicked!»).inject(elem, «after»);
});
|
Все эти фрагменты кода по сути делают одно и то же. Просто в разных стилях и с разным количеством контроля.
эксперимент
Эта статья никоим образом не предназначена для сравнения этих рамок. Вместо этого я хотел обратить внимание читателя на другие жизнеспособные решения, доступные вне jQuery. Дело не в том, что jQuery плохой. Я люблю jQuery, это замечательная структура, но она в основном ориентирована только на DOM и DOM. Если вы хотите написать веб-приложение, рендерер или какую-нибудь другую интересную вещь, создание поддерживаемого, расширяемого и чистого кода является приоритетом. Именно для таких сценариев имеет смысл прибегнуть к другой структуре.
Я мог выбрать только две рамки в этой статье из-за нехватки места. Существует ряд других, столь же мощных, фреймворков, как Dojo, YUI, Rico и GWT, которые также заслуживают вашего внимания.
Надеюсь, я сегодня заинтересовал вас альтернативными JavaScript-фреймворками и очень надеюсь, что вы собираетесь экспериментировать с другими фреймворками. Дайте нам знать, как экспериментирование идет в комментариях. Удачного кодирования!
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для ежедневных новостей и статей о веб-разработке.