Школа Веб - JavaScript
Выпуск 17 от 2001-08-12

Школа Веб ∙ Ведущий рассылки Eris

Представьте себе ситуацию, когда вам нужно выполнить несколько одинаковых действий в разных файлах. Например, вывести дату последней модификации странички для каждого из пары сотен файлов на вашем сайте. В лоб эта задача решается просто - пишем скрипт в несколько строк и вставляем его нужное место нашей странички. А если это скрипт больше полсотни строк и работать он должен несколько раз? Писать его каждый раз, когда понадобится его работа? Можно выйти из положения и написать функцию, а в нужном месте ее вызывать. Это уже значительно проще, но все же придется писать эту функцию в каждом файле.

Представим себе другую ситуацию - вам нужно на каждой страничке размещать одну и ту же информацию, но раз в несколько дней вам ее нужно изменить. Типичный пример - меню, которое должно быть на каждой страничке, но которое должно время от времени меняться. При обычном подходе вам нужно пробежаться по всем вашим страничкам и внести сообветствующие изменения. Пройдет совсем немного времени, и для внесения самых маленьких изменений вам придется выполнять громадный кусок работы. Собственно с таким эффектом я и столкнулся при создании Школы. Вначале я не планироал создавать большой сайт, поэтому просто смонтировал несколько страниц, навел ссылки, настроил сервер. Но количество страничек начало расти, отслеживать их стало все труднее, и даже при небольшом объеме начали появляться ошибки. Имея некоторый опыт, я начал подозревать, что еще несколько месяцев - и я перестану работать над развитием сайта, а посвящу остаток карьеры выискиванию ошибок в нем. Тогда пришлось остановиться, и, пока сайт еще не большой, полностью изменить его структуру. Каждый, кто развивает свой сайт рано или поздно упирается в эту проблему. И лучше сделать это чуток раньше, пока материала еще не много.

Сразу скажу, что реализация моего сайта несколько отличается от того, что я буду описывать ниже. Отличается только языком - я использовал PHP а не JavaScript, но суть метода абсолютно одинакова. Метод называется структурирование и блочная организация сайта. Суть его заключается в том, что некоторые часто повторяющиеся блоки выносятся в отдельные файлы, а регулярно использующиеся функции объединяются в библиотеки. А затем эти файлы подключаются к вашим страничкам. Например, вы создали файл, который содержит меню. С помощью одной строки кода вы включаете его в каждую страничку, в котором оно должно быть. Теперь, если вам нужно добавить или удалить пункт меню, или просто исправить ошибку, вам не нужно редактировать все страницы - достаточно поправить один единственный библиотечный файл - и все странички обновятся автоматически. Или другой вариант - у вас есть много статей, которые должны быть оформлены однотипно - как, например, уроки на Школе. Решение проблемы в лоб - написать шаблон, отформатировать его, а потом делать новые копии этого шаблона, только менять внутри текст. А если мне захочится добавить на эти странички ссылку на zip-архив уроков, например? Мне придется вставлять все это вручную на ВСЕХ страничках урока, и я скорее всего просто откажусь от этой мысли. Но можно сделать шаблон, в котором установлена программа, принимающая номер раздела и урока, и определяющая имя текстового файла с нужной информацией. Таким образом шаблон один, и изменения в нем производить значительно легче. Есть и другая выгода от такого подхода. Вы создаете макет сайта, оформление и наполнение которого можно легко настроить на любую тему. Таким образом вы сможете очень быстро создавать новые сайты, используя уже существующие у вас шаблоны.

Каким же образом создаются библиотеки? Прежде всего, выделите отдельную директорию внутри корневой для вашего сайта, куда вы будете складывать все полезности. Назовите ее, к примеру, _staf_ или _inc_. Это стоит сделать по нескольким причинам. Первая - у вас все в одном месте, не надо искать долго. Вторая - для создания нового сайта по шаблону вам достаточно скопировать эту директорию в другое место. Выберите для себя один стиль структуры каталогов в сайте, и придерживайтесь его, это сэкономит вам время на этапе настройки. Создайте в этой директории файл main_menu.js Расширение .js указывает, что это этот файл содержит код, написанный на JavaScript. В этот файл нужно поместить следующие строки

document.write('<a href= "http:goto.yours.link1">Link1</a><br>');
document.write('<a href= "http:goto.yours.link2">Link2</a><br>');
document.write('<a href= "http:goto.yours.link3">Link3</a><br>');
document.write('<a href= "http:goto.yours.link4">Link4</a><br>');  

Здесь мы использовали уже знакомую функцию document.write(), которая, как вы помните, немедленно выдает пользователю то, что заключено у нее между скобками. В данном случае мы выводим html-строку, содержащую ссылку. Вы можете сразу же включить сюда и теги изменения шрифта, цвета и так далее, но я бы советовал делать это прямо в страничке с помощью задания стиля ссылок. Небольшое замечание по поводу кавычек. Для указания того, что внутри скобок стоит строка, которую просто нужно вывести, вы можете использовать либо двойные либо одинарные кавычки. Если всю строку вы заключаете в двойные, то внутри нее вы их использовать не можете, поскольку броузер воспримет первую же внутреннюю кавычку как окончание строки и выведет броузеру только часть того, что вы хотели. Поэтому соблюдайте правило: если вы используете один вид кавычек для обозначения всей строки, то внутри используйте другой. Если мне внутри тега ссылок понадобились двойные кавычки - я использовал для обозначения строки одинарные.

Еще одно замечание. Функция document.write() должна быть записана в одну строку - без перехода на другую. Иногда получаются очень длинные строки, но с этим придется мириться. Вообще строки подобного типа я рекомендую делать так. откройте новый документ, где создайте все необходимые вам строки меню. Проверьте правильность работы ссылок. Затем скопируйте получившиеся строки (если вы работаете Dreamweaver-ом, то копируйте не из чтой части окна, где визуальное отображение, а из той где код), и вставьте их между скобок в document.write(). Просто выдерживайте правило - одна строка html-кода должна быть выведена одной функцией document.write(). Сохраните получившийся файл с меню.

Теперь откройте страничку, где наше меню должно появиться. В том месте, где оно должно располагаться, вставьте строку

<script language="JavaScript" src="/_inc_/main_menu.js"></script>

В этом месте броузер откроет ваш файл с меню, путь к которому вы указали в параметре src и выполнит прописанные там команды. Таким образом у вас на месте приведенной выше строки появится меню. Если вам нужно вывести это меню дважды, например сверху и снизу, дважды вставьте эту строку. Нормальной практикой для странички можно считать использование по крайней мере трех таких элементов - для меню, для заголовка и для нижнего колонтитула - если эти элементы появляются у вас часто. Вы можете предусмотреть отдельный файл для вставки баннеров - и тогда изменив один-единственный файл, вы тем самым измените баннер на всех страничках, где он показывался.

Если вы используете Dreamweaver, то вставить нужный библиотечный файл можно с его помощью. Выберите Insert-Invisible Tags-Script В появившемся окне в поле Language выберите JavaScript, в поле Content пока ничего не пишите. Нажмите ОК. После этого щелкните на появившемся значке скрипта и на панели свойств объекта в поле Src укажите путь к файлу, или воспользуйтесь диалогом выбора файла источника, что бы не запоминать и не вводить путь вручную.

Теперь давайте уделим немного времени функциям. Положим, что нам на страничке в двух местах, вверху и внизу, нужно указать дату модификации странички, а внизу еще и текущую дату.

Для этого создадим новый библиотечный файл func.js и в нем напишем две функции

function timeLastModified()
{
        document.write(document.lastModified);
}

function timeCurrent()
{
        document.write(Date());
}

Для того, чтобы воспользоваться нашей библиотекой, ее нужно вначале подключить Для этого где-нибудь между тегами <head> и </head> в страничку, где эти функции должны использоваться вставим строку

<script language="JavaScript" src="func.js"></script>

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

<script language="JavaScript">
       <!--
            timeLastModified();
       // -->
</script>

Метод использования библиотек позволит вам создавать коллекции скриптов и части страничек, а затем быстро подключать их к нужным страничкам. Работа по планированию сайта в этом случае происходит в несколько этапов. На первом вы продумываете структуру вашего сайта - разделы, структуру директорий, что в каком файле лежит. Ошибка на этом этапе дорого вам обойдется. Мне иногда приходилось переделывать структуру сайта, который я недостаточно четко продумал. В целом эта работа сродни написанию сайта с нуля. На втором вы продумываете интерфейс - навигация, где какое меню должно находиться, фреймовую структуру, если она нужна. Выделяете повторяющиеся блоки. Ошибка на этом этапе затруднит переделывание интерфейса, если это понадобится, или вы начнете путаться в ссылках, если страничек достаточно много, а сайт непрерывно расширяется. Третий этап - выбираете язык программирования, и создаете дерево каталогов и ключевые файлы. Затем программируете включаемые элементы - меню, заголовки, колонтитулы - на самом первом этапе можно просто текстовые строки, позже оформите как надо; переделывать нужно будет всего лишь один файл, а в процессе разработки наверняка придется что-то уточнять. После этого разрабатываете шаблоны страничек, используя повторяющиеся блоки. И, затем создаете графику, наполнение, попутно уточняя меню и шаблоны.

Рекомендую для шаблонов использовать ссылки не относительно документа, а относительно корневой директории, это позволит вам переносить шаблон в любое место сайта с минимальными изменениями.