0

В этом вопросе рассматривается процесс создания веб-приложений (не важно, на нативном JS или с фреймворками), где в каждом состоянии видны не все элементы или в зависимости от состояния отображение элемента отличается. Например, создание виджета "календарь" (date picker): сам этот виджет появляется только когда его вызывают кликом по полю ввода, да ещё он сам имеет несколько абсолютно спозиционированных страниц, наложенных друг на друга (с днями, месяцами, годами и так далее).

Вопрос такой: как организовать процесс вёрстки подобных элементов? Проблема в том, что для того, чтобы посмотреть, как изменилась, например, страница выбора месяца, нужно после редактирования кода каждый раз вызывать сам календарь, и ещё открывать страницу месяцев (и всё - даже при наличии Live reload).

Я сам использую такой подход:

  1. Создаю HTML-страницу без JavaScript-кода только для вёрстки и, собственно, верстаю там все элементы.
  2. Создаю HTML-страницу уже с подключением JavaScript-кода и из ранее свёрстанных элементов "собираю" виджет.

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

1
  • 1
    Вроде расписано все хорошо, но все равно не понятно в чем суть .... напишите "дев-модификатор" класса, при котором календарь будет открыт всегда, все абсолютно спозиционированные элементы будут статично стоять в ряд или столбец (короче что бы все было видно) .... от правок кода в процессе не избежать, даже если хорошо спроектировать, добавление "фич" неизбежно. 29 апр 2018 в 3:24

1 ответ 1

1

Ваше описание очень размыто.

  1. Верстайте с учетом переносимости, у виджета не должно быть зависимостей от внешней верстки, либо они должны быть минимальны, относитесь к таким вещам как к законченным компонентам.

2.Пишите методы для показа/скрытия виджета, выставление месяца/года тд, т.е. все манипуляции с виджетом только через методы, соответственно оформляйте виджет в виде объект.

3.Верстайте с учетом БЭМ или псевдо-БЭМ.

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

P.S: возможно стоит почитать книги по проектированию ПО, даже те которые не относятся к сайтостроению, думаю они смогут вам ответить на подобные вопросы.

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.