Прошлой зимой Антон Кудин, ниндзя дизайна, попросил меня написать код для его портфолио. У него был готов дизайн и масса идей для фич, которые мне предстояло реализовать. Первая загвоздка: его хостинг, MobileMe от Apple Inc., не предоставляет никакой серверной платформы, кроме, ну, веб-сервера. То есть ни PHP, Python, Java – ничего.

Никто больше не делает сайты без CMS, и это сделало задачу интересной. Так как на самом деле выкинуть такой фокус? Совершенно очевидно.

AJAX

Движок сайта (если его можно так назвать) состоит из одного HTML-файла с сеткой, построенной на 960.gs, служащего шаблоном, одного XML-файла, который описывает весь контент и JS-файла со всеми моими скриптами. XML-файлу не требуется XSL-схема, если вы не планируете редактировать его в модном редакторе типа XMLSpy. Мы – нет, мы олдскульные парни с TextMate наперевес. XML выглядит так:

<?xml version="1.0" encoding="utf-8"?>
	<root>
		<featured>
			<project id="barcamp" />
		</featured>
		<projects>
			<project name="BarCampKrasnodar" id="barcamp" tags="id print 3d illustration">
				<images>
					<img src="assets/barcamp-1.jpg" />
					...
					<img src="assets/barcamp-5.jpg" />
				</images>
				<description>
				BarCampKrasnodar is a nonprofit event of seminars for IT developers and creatives
				</description>
			</project>
...

Простой и читаемый файл, правда? Каждый нод и атрибут служит своей цели внутри нашего jQuery-приложения. Что дальше?
Дальше, этот XML надо загрузить:

var xml;

$.ajax({
	async: false,
	type: "GET",
	url: "content.xml",
	dataType: "xml",
	success: function(data) {
		// сохранить данные в глобализированной переменной
		xml = data;
	}
});

Правда, просто? Заметьте async: false: чтобы обработать полученные XML-данные, вертеть ими как вздумается, их абсолютно обязательно надо сначала загрузить – до того, как выполнение скрипта пойдет дальше. Ну а после этого все сводится к созданию элементов DOM на основе XML-данных и вставке их в шаблон.

Оно движется

Второй большой задачей в этом проекте было создать галерею – Apple-style, как на iPhone и iPad, чтобы можно было листать картинки мышью. Что у нас получилось – можно заценить. Все точно так же сделано в jQuery. Никаких фокусов, чистая математика (надеюсь, вы хорошо учились в школе) – скрипт вычисляет дельту между горизонтальными координатами точек, в которых сработали события mousedown и mouseup, сравнивает дельту с разницей по времени между двумя событиями и – ура – у нас есть скорость для анимации листания. “Пружинистый” эффект сделан с помощью jQuery-плагина Easing.

Чего не может библиотека jQuery?

Она не читает мысли. Кодер абсолютно бесполезен, если не способен создавать эффективные оптимизированные алгоритмы. Кроме этого, вам ничего не нужно, если у вас есть jQuery. Она сэкономит кучу времени, которую иначе пришлось бы потратить на написание огромных Javascript-приложений вручную – в ней все есть. Вгрызайтесь, если еще не.