В данной статье я опишу тот же самый объект "живые ссылки" на сайте, который был рассмотрен в предыдущем примере и почти тот же самый код, плюс кнопка быстрой смены кадра. Но этот код написан более сложным образом с использованием универсальной функции с инкапсулированным кодом. Это так называемый объектный подход. Функция описывает не конкретный объект, а целый класс объектов и для установки на сайте нового объекта достаточно просто еще раз вызвать функцию. В языке Javascript объектная структура представлена более сложным образом и даже несколькими способами. В простых ООП языках разрабатывается класс с описанием объектов и каждый новый объект вызывается через слово new и конструктор класса. В Javascript можно написать нечто вроде псевдо класса и тоже использовать new. А можно по другому, используя то обстоятельство, что функция сама является объектом и у нее есть метод call, а внутри функции можно использовать переменную this. Важно, что в инкапсулированном коде нельзя использовать ничего, что может привести к конфликтам с другим кодом сайта. А значит нельзя создавать теги с помощью HTML, нельзя присваивать им атрибут id, нельзя использовать CSS. Все нужно делать только с помощью javascript. И это возможно, так как в javascript есть такие механизмы.
Как обычно, я даю полный код сайта примера и объясню как он использует универсальную функцию. Сама универсальная функция записана в другом файле, который пользователь может даже не смотреть, если не интересно. Его имеет смысл смотреть в том случае, если захочется модифицировать объект и придать ему другие свойства. Для того, чтобы код работал нужно скопировать оба текста в файлы с расширением htm и superlink.js в одной и той же папке и запустить на исполнение htm файл, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S. Итак, сначала htm файл
Посмотрим что здесь написано. Область div с атрибутом id="em" -- это фактически внешняя область сайта, в которую помещается объект, она может быть самой различной у разных пользователей. Внутри нее находятся две пустые области div с атрибутами id="mw1" и id="mw2". Вот эти области и предназначены для того, чтобы javascript код записал в них полный объект. Далее идет ссылка на стандартную функцию superlink() и после этого javascript код задания входных данных для двух объектов и два вызова стандартной функции с разными наборами входных данных. При вызове функции записываются два аргумента: js-объект, содержащий входные данные, и значение id атрибута области, в которую записывается HTML-объект. Объекты помещаются в стандартном режиме относительного позиционирования. То есть второй объект идет за первым.
Сразу замечу, что в javascript есть большая путаница со смыслом слова объект. В HTML объектами обычно называются части сайта, описываемые тегами, а в javascript объектами называются хэш-таблицы, в которых каждый кусок кода получает метку. Так вот первым аргументом при вызове функции является js-объект (хэш-таблица). Для простоты будем понимать js-объект как массив, заключенный не в квадратные, а в фигурные скобки. Каждым элементом такого массива является пара "ключ:значение", разделенная знаком двоеточия, а разные пары разделяются запятой. При этом значением может быть любой js-код, в нашем случае это массивы. В нашем объекте две такие пары. Первая имеет ключ iht, а значение в виде массива строк, описывающих кадры анимации. Каждый кадр описывается 3-мя строками. Первая -- это URL адрес картинки, вторая -- это URL адрес ссылки на сайт, на который идет переход по клику, третья -- это подпись под картинкой. Таким образом всего строк должно быть 3*n, где n -- число кадров анимации. Как и раньше, все строки разделяются запятыми, а весь массив заключен в квадратные скобки.
Вторая пара имеет ключ par и значение в виде массива чисел и текста. Всего чисел 5 и от их значений зависит функциональность кода. Числа условно можно обозначить как w,h,pau,pa,nm , где w и h -- это ширина и высота картинок. Все картинки должны быть одинакового размера и их ширина и высота в пикселях должны соответствовать эти числам. Или наоборот, числа показывают ширину и высоту картинок, pau -- это длительность показа одного кадра после перехода в секундах, можно задавать и дробное число, но нет смысла мелочиться, pa -- это тоже длительность, но она относится к показу одного кадра при переходе и измеряется в миллисекундах, nm -- это число кадров перехода. При каждом новом кадре перехода диафрагма открывается все шире и за полное число кадров она отрывается полностью. Таким образом можно менять размер картинок, менять время на один кадр, и менять скорость перехода. Кроме того, текстом задается цвет подписи под картинками. Его нельзя фиксировать, так как объект может находиться на любом фоне. Все остальное менять нельзя. В частности можно конечно убрать подписи, задавая строку с пробелом или цвет, равный цвету фона, но место для подписи убрать нельзя, оно все равно будет.Впрочем на это место можно сверху положить что-нибудь еще.
Как видим, все очень просто и удобно. Такой шаблон можно использовать даже не зная javascript. А для тех, кто хочет узнать я покажу код самой функции. Его надо скопировать в файл superlink.js.
Код относительно большой, но в нем просто много однотипых кусков, так что описать его несложно. Самое первое -- это то, что у функции всего один аргумент, а при вызове было два. Фокус в том, что мы вызывали не саму функцию, а ее метод call, а для этого метода уже надо два аргумента. Первый аргумент передает объект, который в самом коде используется в виде слова this. Это слово является js-объектом, методы которого вызываются по ключам, а исполняется тот код, который этому ключу соответсвует. Таким образом, аргументом функции является только атрибут id той области, которая принимает данный HTML-объект, то есть в который будут вписаны все HTML теги и CSS формат, и все это будет крутиться вертеться нужным образом.
Итак, в начале нужно описать все переменные, используемые в коде, чтобы ограничить область их видимости только функцией. Затем, через объект this конкретные данные об анимации передаются во внутренние переменные нашей функции. Полное число кадров ima+1 определяется автоматически по размеру массива строк, ima -- это последний индекс, считая от нуля. Последующий код прописывает все HTML теги, которые раньше мы определяли вручную, то есть с помощью HTML кода. Это удобно тем, что так мы сразу получаем метку этих тегов, не используя атрибут id, который может конфликтовать с другими частями сайта. С помощью id мы берем только внешний тег в указатель elem. Далее с помощью функции document.createElement() мы создаем новые теги и сразу получаем указатели на них. Затем с помошью метода appendChild() вкладываем одни теги в другие так как было у нас в предыдущем примере. Затем, получив указатели на атрибут style некоторых элементов прописываем их CSS форматирование. Ну а функции link и move практически такие же как раньше. Дополнительно еще добавлена кнопка [N], которая позволяет сразу перейти к новому кадру не дожидаясь, пока кончится время его показа. Соответственно добавлена функция next и переменная nex.
Вот и все. В принципе код такого типа позволяет инкапсулировать любую, сколь угодно сложную, анимацию, имеющую много кнопок с возможностью масштабировать картинки и так далее. В частности можно так переписать код "фото-шоу по образцу vk2309", описанному в главе о слайд-шоу. Но инкапсуляция хороша только при комбинировании объекта на сайте с другими объектами. Если же фото-шоу является единственным объектом на сайте, то использование глобальных переменных вполне оправдано, так как делает код более прозрачным и его легче модифицировать. Вопрос о том как писать код: с инкапсуляцией или без нее нужно решать в каждом случае конкретно. Удобство инкапсуляции в том, что можно составить библиотеку конкретных объектов, которой можно пользоваться даже не зная что там написано. Но с таким же успехом можно делать библиотеку шаблонов сайтов. В любом случае разумно каждую функцию или шаблон писать в отдельный файл.
Последнее замечание. Иногда очень трудно понять все тонкости работы браузеров с таким кодами. Если честно, то я все проверил только в Хроме и в Экплорере, надеясь на то, что остальные тоже будут работать адекватно. А в процессе разработки кода я использовал только Хром. И вот интересное наблюдение. Если задавать style через полную строку как в CSS, то код работает, но совсем неправильно, даже трудно описать словами как. Что при этом неправильно я не могу понять. Все приходится проверять эмпирическим путем, перебирая варианты.
Показанный выше код htm файла существует в интернете и может быть запущен по ссылке superlinke.htm. Он в свою очередь ссылается на javascript код, записанный в файл superlink.js, который и был показан во втором окне с кодом. Данный код, как легко убедиться, кликнув на ссылке, реализует переход в виде раскрывающейся диафрагмы. Однако можно написать аналогичный код и с другим переходом, например, переходом по прозрачности. Это все делается относительно просто и я не буду описывать детали. Я приготовил такой код тоже. Пример можно запустить по ссылке superlinke2.htm. Он в свою очередь ссылается на javascript код, записанный в файл superlink2.js. Получить код htm файла можно через меню браузера, а javascript код показывается непосредственно.
Автор: Виктор Кон, перейти На главную