Как написать шаблоны для веб-разработки на JavaScript
JavaScript используется повсеместно, так что минимальные знания пригодятся почти любому разработчику. Сегодня я приведу рядовые шаблоны, которые вам обязательно пригодятся.
Александр Ватолин
Геймдизайнер и преподаватель в Школе программистов МШП
Мы разберем, как создавать рядовые части ваших сайтов:
- Разделы, работающие без каких либо фреймворков. Постараемся обойтись без каких либо фреймворков, чтобы решения были универсальными. Вкладки используются почти во всех сайтах, поскольку они сильно экономят место на странице, упрощая интерфейс для пользователя.
- Таймеры. Да- да. Они частенько пригодятся при разработке, но шаблонов вечно не хватает под рукой. Так что, можете считать это полезным семплом.
- Выпадающие меню. Их заготовок достаточно во фреймворках, но иногда вы бываете ограничены в ресурсах и приходится собирать что-то вручную.
- Различные динамические детали для выведения статистики.
Ну, и под конец разберем, какие есть популярные и полезные фреймворки для отрисовки интерфейсов.
Что ж, пора начинать. В конце статьи вас ждут исходники.
Начнем с таймера. Сразу заспойлерю вам полученный результат. Выглядеть это будет примерно так.
Начнем с разметки, а потом более подробно разберем и скрипт. На разметке не будем долго останавливаться, она достаточно простая, а стили подробнее можно рассмотреть в исходниках. Итак, вот так выглядит разметка:
Перейдем к скрипту. По факту он достаточно простой: вызывается каждую секунду и обновляет значение. Основывается он на куче селекторов, которые используются для подстановки всех счетчиков ( а их у нас много). Выглядит это примерно так:
Хотя этот пример и был достаточно очевидным, но он способен сэкономить вам время, если подобный скрипт будет под рукой.
Далее на очереди выпадающие окна. Этот скрипт лично мне помогал не раз, когда было нужно построить подобную логику.
Чего вам стоит ожидать от этого решения ? На самом деле самых обычных кнопок с выпадающем меню. Без каких либо фейерверков, 3D-эффектов и прочего. В целом, подобные меню и бывают нужнее всего при разработке, поскольку выглядят строго и просто. При желании никто не запретит их поменять.
Теперь пойдемте к разметке данной страницы. Тут аналогично с прошлым. Стили можно изучить в исходниках, а вот разметку покажу здесь.
Все минималистично и просто, чисто одно меню:
Теперь предстоит разобраться со скриптом. Логика работы достаточно простая. По факту, мы создаем селекторы на объекты меню, а далее по клику переводим все объекты из неактивного состояния в активное. Работает это при помощи подобных строк в CSS. Ну а дальше немного магии скриптов.
Ну и сам скрипт, собственно.
Думаю, теперь стало куда меньше вопросов, как сделать интерактивными подобные меню.
К слову, табы, о которых пойдет речь далее, работают почти так же, хотя скрипт для них будет куда больше. Но общая суть аналогична с данным скриптом, можете сравнить.
Начнем с результатов вкладок. Вот, как они могут выглядеть:
Суть работы такова, что в разметке вы делаете сразу три вкладки и скриптом поочередно их отключаете. Начнем с разметки, чтобы понять, как это выглядит изнутри.
Хорошо, у нас есть три вкладки, которые нужно научиться переключать. В этом нам поможет подобный скрипт, решающий любые вопросы.
Как не сложно заметить, тут используются повторные функции на кнопки и на сами вкладки. Если вы захотите использовать подобное меню без кнопок, просто удалите их из скрипта и разметки. А так, сама логика работы аналогична с прошлым скриптом.
Также бонусом для самообучения докину вам два подобных элемента, которые могут пригодится при повседневном создании сайтов.
Подобные билдеры помогут при создании прикольных анимаций на сайте или для отображения статистики на сайте. Все, что вам понадобится — настроить скрипт и управлять объектом не при помощи ручного меню, а при помощи скрипта.
Однако, случается, что писать все вручную тоже не вариант, и нужна библиотека или фреймворк, которые построят единый стиль сайта без особых проблем. Поделюсь несколькими такими решениями, возможно, один из них станет основой вашей работы:
Sencha js. Отличный инструмент для быстрой разработки с огромным количеством предустановленных элементов интерфейса. Все было бы идеально, если бы не ценник за полную версию.
Semantic UI. В моем понимании это отличный и доступный инструмент для построения интерфейсов на сайте. Этот инструмент рассматривает классы и слова как взаимозаменяемые понятия и использует простые фразы. Если еще не пользовались им, советую попробовать и упростить свою разработку в разы.
Anime js. Если нужны анимации на сайте, вам сюда. Здесь буквально можно сделать что угодно. Хоть у данного инструмента высокий входной порог, его возможности бесконечны.
Уверен, часть вещей вас могла зацепить. Наверняка, что-то захотелось изучить подробнее. Поэтому прикладываю все исходники, использованные в этой статье. Пользуйтесь с удовольствием.
До встречи в будущих статьях!
Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.
Подробнее
Реклама на tproger.ru
Загрузка
|
Шаблоны и сценарии — West Wind Web Connection
Web Connection поддерживает два очень похожих механизма «скриптинга». Один использует шаблоны, а другой использует скрипты. Разница между ними относительно тонкая, но ключевые моменты:
Шаблоны
Используется с: Response.ExpandTemplate()
- Оцениваются
- Можно обновлять как текстовые файлы и сразу отражать изменения
- Может оценивать только выражения FoxPro или CodeBlocks
- Нельзя использовать код вложенного блока, отличный от
<% if %>
<% endif %>
блоков - Быстро выполняются, особенно если вы используете только выражения
Скрипты
Используется с: Response. ExpandScript()
- (автоматически) скомпилированы как код FoxPro
- Превращаются в настоящие файлы PRG, которые можно отлаживать и выполнять пошагово.
- Поддержка сложной логики, включая выражения, кодовые блоки и вложенные блоки потока управления
- Сложнее обновлять приложения с несколькими экземплярами из-за блокировки FXP
- Скрипты лучше поддерживают макет и неполные страницы и разделы
Таким образом, шаблоны отлично подходят для выражений. Вы можете использовать шаблоны с автономными кодовыми блоками, которые выполняются как единый блок (что-то вроде функции), но это не работает для операторов структурированного кода, таких как цикл <% SCAN %>
<% ENDSCAN %>
. с HTML между ними.
Скрипты также работают с выражениями, и путь выполнения для них одинаков, но сила скриптов в том, что они, по сути, скомпилированы в файл FoxPro PRG, что означает, что вы можете выразить что-либо внутри скобок <% %>
в код. Весь остальной документ обрабатывается как текстовые строки. У вас больше контроля над сценариями, а сценарии буквально выполняются в виде скомпилированного файла FXP. Вы можете выполнять пошаговые действия и отлаживать файлы сценариев, просто введя <% SET STEP ON %> 9.0020 в скрипт. Хотя сценарии запускают полностью скомпилированный код FoxPro, существуют некоторые накладные расходы, связанные с проверкой во время выполнения, чтобы убедиться, что скомпилированные файлы существуют и могут выполняться, и выгружать PRG после каждого выполнения, чтобы обеспечить горячую замену кода с обновлениями.
Если вы создаете полноценное приложение, скорее всего, вы захотите использовать сценарии для обработки множества необходимых вам сценариев, поэтому я бы рекомендовал использовать их по умолчанию. Шаблоны могут быть немного быстрее, и если они подходят для вашего варианта использования простых встроенных выражений, их можно комбинировать со сценариями. Вы можете легко смешивать и сочетать. Просто убедитесь, что вы используете правильный ExpandScript()
или ExpandTemplate()
для соответствующего типа сценария или шаблона.
Сценарии 101
Сценарии — это настоящие программные файлы FoxPro, преобразованные из HTML-шаблона сценария в исполняемый файл PRG
. Это работает следующим образом: весь статический текст преобразуется в строки FoxPro, которые объединяются в одну большую строку, возвращаемую в результате. Любые блоки кода <% %>
напрямую встраиваются в файл PRG как исполняемый код, а не строки и <%= %>
и <%: %>
выражений объединяются в выходную строку как EVAL()
выражений, которые возвращают строки. В основном вся страница представлена в виде строк , за исключением для блоков кода и выражений, которые встроены в PRG как и, таким образом, выполняются.
Вот простой пример страницы сценария:
<тело>Отображение таблицы клиентов
<час> <% SELECT * FROM TT_CUST INTO Курсор TQuery lnReccount = ПЕРЕСЧЁТ() %> Таблица Customer содержит записи <%= Reccount() %>.<граница таблицы=1> <% СКАНИРОВАНИЕ %>
<% КОНЕЦ СКАНИРОВАНИЯ %> таблица> тело> <%: TQuery.Company %> <%: TQuery.Address %>
Чтобы запустить эту страницу, сохраните ее в расширении .wcs
(сценарий веб-подключения) (или расширении вашей карты сценариев) и вызовите ее через веб-URL:
http://localhost/wconnect/CustomerTable.wcs
Обратите внимание, что вы используете <% %>
для блоков кода сценария, которые выполняются как программа, и <%= %>
или <%: %>
(HtmlEncoded) для вывода выражений, возвращающих значение. <%: %>
следует использовать только с одним выражением, а <% %>
может содержать несколько команд (в переводе на термины TEXTMERGE <%= %>
являются выражениями TextMerge, а <% %>
считается чистым кодом. Все остальное (статический HTML) находится между TEXT...ENDTEXT
директив).
Если у вас есть ошибка в вашем коде, страница вернет ошибку. Например, если я неправильно напишу Reccount()
выше как Recount()
, вы получите страницу ошибки сценария, которая говорит:
Ошибка: файл «recount.prg» не существует. Код: Пересчет() Номер ошибки: 1 Строка №: 9
Если вы находитесь в режиме отладки ( DEBUGMODE .T.
в wconnect.h
), Web Connection также попытается найти строку кода, вызвавшую ошибку, и поместит на нее курсор. Это не всегда возможно из-за характера ошибки, но в большинстве случаев, особенно если произошла простая опечатка, вы можете отредактировать сохранение изменений и немедленно повторно запустить запрос.
Исправление примера
Давайте немного изменим пример, чтобы сделать его более гибким. Давайте исправим отображение, добавив таблицу стилей application.css
, очистим отображение таблицы и добавим еще одно поле (телефон) и, наконец, поддержку запроса пользователя, какие записи он хочет видеть:
<голова>Демонстрация сценария таблицы клиентов <ССЫЛКА rel="stylesheet" type="text/css" href="application. css"> голова> <тело>Отображение таблицы клиентов
<час> <% lcCompany = ПРОПИСН(Запрос.Форма("txtCompany")) ЛКГде = "" ЕСЛИ !ПУСТОЙ(lcCompany) lcWhere = "ГДЕ ВЕРХНИЙ (компания) = lcCompany" КОНЕЦ ВЫБЕРИТЕ * ИЗ TT_CUST &lcWhere ; INTO Курсор TQuery ; ЗАКАЗАТЬ Компания lnReccount = ПЕРЕСЧЁТ() %>