Главная страница   /   5.1. Настройки jQuery (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

5.1. Настройки jQuery

Первая вещь, которую нам нужно сделать с jQuery, – это добавить его в документ, с которым мы хотим работать. В листинге 5-1 показан наш пример документа того цветочного магазина, который вы уже видели в главе 2.

Листинг 5-1: Пример документа цветочного магазина
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
	<h1>
		Jacqui"s Flower Shop</h1>
	<form method="post">
	<div id="oblock">
		<div class="dtable">
			<div id="row1" class="drow">
				<div class="dcell">
					<img src="astor.png" /><label for="astor">Astor:</label>
					<input name="astor" value="0" required>
				</div>
				<div class="dcell">
					<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
					<input name="daffodil" value="0" required>
				</div>
				<div class="dcell">
					<img src="rose.png" /><label for="rose">Rose:</label>
					<input name="rose" value="0" required>
				</div>
			</div>
			<div id="row2" class="drow">
				<div class="dcell">
					<img src="peony.png" /><label for="peony">Peony:</label>
					<input name="peony" value="0" required>
				</div>
				<div class="dcell">
					<img src="primula.png" /><label for="primula">Primula:</label>
					<input name="primula" value="0" required>
				</div>
				<div class="dcell">
					<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
					<input name="snowdrop" value="0" required>
				</div>
			</div>
		</div>
	</div>
	<div id="buttonDiv">
		<button type="submit">
			Place Order</button></div>
	</form>
</body>
</html>

Чтобы сфокусироваться на содержании, я переместил стили CSS в отдельную таблицу стилей styles.css, как показано в главе 3. Вы можете увидеть, как я добавил библиотеку jQuery в документ вот тут:

<script src="jquery-1.7.js" type="text/javascript"></script>

Для скачивания доступны два файла на сайте jquery.com. Первый jQuery-1.7.js, это версия, которая, как правило, используется при разработке веб сайтов или приложений. Это файл "весит" порядка 230 кб и содержит несжатый код JavaScript. Вы можете просто открыть и прочитать файл, чтобы понять, как jQuery реализует свои функции, или "покопаться" там, если у вас есть проблемы с кодом.

Совет

Когда я писал эту книгу, последней версией jQuery была версия 1.7. jQuery очень активно разрабатывается, поэтому к тому времени, когда вы будете читать эту книгу, скорее всего выйдет новая версия. Однако те возможности, которые я описываю в книге, будут все равно представлены.

Второй файл – это jquery.1.7.min.js и он используется тогда, когда вы разворачиваете ваш сайт или веб приложение для пользователей. Он содержит тот же, но ужатый, JavaScript код. Это обозначает, что для экономии места в нем удалены все пробелы и полные имена переменных заменены на односимвольные имена. Ужатый скрипт практически невозможно читать в целях отладки, однако он гораздо меньше. Ужатый файл "весит" всего 31 кб. Если у вас много страниц, которые связаны с jQuery, тогда эта разница может сэкономить вам значительный объем трафика (а значит и денег).

Использование CDN для jQuery

Альтернативой к хранению библиотеки jQuery на собственном веб сервере является использование одной из публичных сетей дистрибуции контента (CDNs), которая содержит jQuery. CDN – это дистрибуционная сеть серверов, которые доставляют файлы пользователю, используя ближайший сервер. Есть несколько преимуществ использования CDN. Во-первых, это более быстрая передача данных пользователю, потому что файлы библиотеки jQuery подгружаются с сервера, ближайшего к нему, а не с ваших серверов. Зачастую файл вообще не требуется. jQuery настолько популярен, что браузеры пользователей могут кэшировать библиотеку из других приложений, которые используют jQuery. Второе преимущество заключается в том, что ваш драгоценный и дорогой трафик не тратится на передачу jQuery пользователю. Для сайтов с большим трафиком это может быть реальной экономией средств.

При использовании CDN стоит выбирать заслуживающего доверия CDN оператора. Ведь вы хотите быть уверенными в том, что пользователь получит необходимые файлы и сервис всегда будет доступным. Оба, и Google, и Microsoft бесплатно предоставляют услуги CDN для jQuery (и для других популярных библиотек JavaScript). Обе компании предоставляют надежный и скоростной доступ к сервисам и поэтому навряд ли будут умышленно искажать библиотеку jQuery. Получить информацию об услугах Microsoft можно на www.asp.net/ajaxlibrary/cdn.ashx и об услугах Google на http://code.google.com/apis/libraries/devguide.html.

Использование CDN не подходит для приложений, которые передаются пользователю через intranet, потому что тогда браузеры "выходят" в интернет, чтобы подгрузить библиотеку jQuery, а не используют локальный сервер, который обычно ближе, быстрее и с меньшими расходами на трафик.