HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Не меньше (если не больше) места занимает код, создающий полосу навигации, со всеми ее списками, вложенными друг в друга, пунктами этих списков и гиперссылками. Код заголовка Web-сайта, сведений об авторских правах и служебный код (создающий сами контейнеры, секции Web-страницы и пр.) хоть и относительно невелик по объему, но тоже там присутствует.

Отсюда следует первый вывод: HTML-код, хранящийся в файле index.htm, определяет все содержимое данной Web-страницы без исключения. Такие Web-страницы на жаргоне Web-дизайнеров называются монолитными. Все Web-страницы, созданные нами на данный момент, — монолитные.

Теперь откроем другую Web-страницу, например, css_index.htm. Здесь почти то же самое: заголовок Web-сайта, полоса навигации и сведения об авторских правах. Только основное содержимое другое.

Если мы начнем поочередно открывать другие Web-страницы, то увидим на них аналогичную картину. Заголовок Web-сайта, полоса навигации и сведения об авторских правах остаются без изменений, отличается только основное содержимое.

Выходит, бóльшая часть содержимого наших монолитных Web-страниц неизменна. Настолько неизменна, что мы можем копировать соответствующий HTML-код из одной Web-страницы в другую без всякой правки или пересохранять Web-страницу под другим именем, чтобы создать новую. (В главе 16, кстати, мы так и поступили.)

Второй вывод: монолитные Web-страницы, принадлежащие одному Web-сайту, отличаются друг от друга только небольшим фрагментом своего содержимого. Остальной код на всех этих Web-страницах один и тот же.

Когда мы открываем монолитную Web-страницу в Web-обозревателе, она загружается по сети целиком, что занимает некоторое время. Если мы щелкнем на гиперссылке, чтобы перейти на другую Web-страницу, она также будет загружена целиком, на что также потребуется время. При этом львиная доля времени потратится на то, чтобы загрузить те же самые заголовок Web-сайта, полосу навигации и сведения об авторских правах — элементы, которые остаются неизменными на всех Web-страницах. Это первый недостаток монолитных Web-страниц.

Второй недостаток затрагивает уже Web-дизайнеров. Если нам потребуется внести изменения в какой-либо из повторяющихся на всех Web-страницах элементов, например, добавить новый пункт в полосу навигации, то придется вносить соответствующие изменения в HTML-код всех Web-страниц данного Web-сайта. Работа долгая, тяжелая, вдобавок, выполняя ее, нетрудно сделать ошибку…

Выход их этого положения — задействовать подгружаемое содержимое. О нем уже упоминалось в главе 1. Вкратце: отдельные части содержимого Web-страниц средствами Web-обозревателя загружаются из других файлов и выводятся в указанное место Web-страницы, а именно в указанный блочный контейнер.

Исходя из этого, набросаем план действий.

— Создаем Web-страницу, содержащую только элементы, остающиеся неизменными на всех Web-страницах нашего Web-сайта, и пустой контейнер, в который будет выводиться основное содержимое. Назовем эту Web-страницу базовой. Базовую Web-страницу сделаем главной Web-страницей Web-сайта.

— Сохраняем основное содержимое всех Web-страниц в отдельных файлах, которые будут хранить только HTML-код, создающий основное содержимое.

— При открытии базовой Web-страницы (мы использовали ее в качестве главной) загружаем основное содержимое, которое должно присутствовать в ней изначально, из файла, где оно хранится, и выводим его в предназначенный для этого контейнер.

— При щелчке на гиперссылке загружаем основное содержимое целевой Web-страницы из соответствующего файла и также выводим его в контейнер.

Достоинств у такого подхода два. Во-первых, файлы с основным содержимым Web-страниц получатся существенно меньше за счет того, что они хранят только основное содержимое и не включают HTML-код, создающий элементы, повторяющиеся от Web-страницы к Web-странице. Во-вторых, если нужно внести исправления в какую-либо Web-страницу, править понадобится всего один файл: либо файл с базовой Web-страницей, либо файл с основным содержимым.

Осталось только сказать, что Web-страницы, "собирающие" свое содержимое из фрагментов, хранящихся в отдельных файлах, неофициально называются блочными.

Но как нам загрузить фрагмент содержимого Web-страницы, хранящийся в отдельном файле? О, современные Web-обозреватели предоставляют все средства для этого. А библиотека Ext Core позволяет задействовать данные средства, написав минимум JavaScript-кода.

Подгрузка содержимого Web-страниц

Для подгрузки фрагмента содержимого Web-страницы из стороннего файла и вывода его в указанный элемент Web-страницы библиотека Ext Core предлагает метод load объекта Element:

<экземпляр объекта Element>.load(<интернет-адрес>|<конфигуратор>)

Единственный параметр метода load задает либо интернет-адрес файла, в котором хранится предназначенный для загрузки фрагмент содержимого Web-страницы, либо конфигуратор, задающий параметры для загрузки данного файла.

Вот свойства этого конфигуратора и соответствующие им параметры:

— url — интернет-адрес загружаемого файла в виде строки. Это единственный обязательный параметр.

— success — функция, которая будет вызвана, если загрузка файла завершится успешно.

— failure — функция, которая будет вызвана, если при загрузке файла возникнет ошибка.

— callback — функция, которая будет вызвана после окончания загрузки файла, независимо от того, успешно загрузится файл или нет.

— timeout — промежуток времени (тайм-аут), в течение которого Web-обозреватель будет ожидать окончания загрузки файла. Если файл за этот промежуток времени не загрузится, библиотека Ext Core будет считать, что возникла ошибка загрузки. Тайм-аут задается в виде числа в миллисекундах; значение по умолчанию — 30 000 мс (30 с).

Функции, указанные в параметрах success и failure, не принимают параметров. Функция, указанная в параметре callback, должна принимать два параметра: конфигуратор, переданный методу load в качестве параметра, и логическое значение, равное true в случае удачной загрузки файла и false при возникновении ошибки.

Метод load полностью заменяет все содержимое элемента Web-страницы, у которого он был вызван. Добавить загруженное содержимое к уже имеющемуся с его помощью мы не сможем.

А теперь важный момент! Метод load при вызове отправляет Web-серверу запрос на получение указанного файла и сразу же завершает свою работу (начинает выполняться код, следующий за вызовом этого метода). Он не ждет, когда файл будет загружен и выведен на экран. Программисты называют подобные методы асинхронными.

Но что делать, если нам понадобится выполнять какие-либо манипуляции с содержимым загруженного файла? Посмотрим на список свойств конфигуратора, передаваемый методу load в качестве параметра. Там присутствует свойство success, которому присваивается функция, вызываемая после успешной загрузки файла. Мы можем поместить код, манипулирующий загруженным содержимым, в тело этой функции. (Еще можно использовать функцию, присваиваемую свойству callback конфигуратора, только в этом случае придется проверять, успешно ли завершилась загрузка.)

ВНИМАНИЕ!

Средства Web-обозревателя для подгрузки содержимого из стороннего файла, которые задействует библиотека Ext Core, работают только в том случае, если все эти файлы, а также файл базовой Web-страницы загружаются с Web-сервера. При загрузке файлов без участия Web-сервера, прямо с файловой системы локального компьютера, они не работают — это ограничения самого Web-обозревателя.

Еще в главе 1 мы установили и опробовали в работе Web-сервер Microsoft Internet Information Services. Долгое время мы им не пользовались, но теперь настал момент, когда его "услуги" нам потребуются. Так что проверим его еще раз — потом будет не до того.

Реализация подгрузки содержимого

Теоретическая часть главы вышла очень короткой. Значит, больше времени останется на практику!

Давайте создадим новый Web-сайт, в котором и реализуем подгрузку содержимого. Его Web-страницы мы изготовим на основе соответствующих Web-страниц старого Web-сайта.

ВНИМАНИЕ!

Далее будем называть фрагменты содержимого Web-страниц, хранящиеся в отдельных файлах, также Web-страницами. Ведь это Web-страницы и есть! Если же потребуется отметить различие между "полноразмерной" Web-страницей и фрагментом, мы это особо отметим.

Прежде всего, создадим папку, которая станет корневой для нового Web-сайта. Назовем ее Site 2. Скопируем туда из корневой папки старого Web-сайта (Site 1) файлы main.css, main.js и ext-core.js. И сразу же создадим в ней папки chapters (для Web-страниц разделов), tags (для Web-страниц с описаниями тегов HTML), attrs (для Web-страниц, описывающих атрибуты стиля CSS) и samples (для Web-страниц с примерами).