Где правильно хранить данные в data- или json для калькулятора расчета услуг?

Question

[HelpSophie]

Как правильнее делать калькулятор расчета стоимости услуг?
2 вопроса в одном:
1. data- атрибуты или json?
2. Правильно ли делать инпуты? С точки зрения семантики вроде разумно.

Скрытый инпут с data- атрибутами + label

<input class="visually-hidden" type="radio" id="id1" name="service-type"  
data-size="88" data-price-econom="150" data-price-business="200" data-installation="100">
<label> <img> услуга 1го типа</label>

Или сотворить json прямо в файле js (услуг не много, у каждой по 6 характеристик), отдельный файл, наверное, не имеет смысла.

Comments

[Александр]

А в js массиве не проще?

Answer 1

[WapSter]

1. Без разницы, для небольшого скрипта. А так json лучше, так-как меньше совершаем преобразование типов, все хранится в одном месте, меньше гоняем DOM.
2. input для таких целей использовать желательно на самом деле, сможете без проблем отправить данные в backend

Comments

[HelpSophie]

Спасибо

сможете без проблем отправить данные в backend

В данном случае мне это не нужно, но мысль понятна.

Answer 2

[Владимир Проскурин]

Формат JSON отлично подходит, т.к. он хранится файликом на сервере, и при необходимости, его можно редактировать, а в последующем, прицепить редактор параметров и генерировать JSON.
JSON нужно получать с сервера через ajax, и в конечном итоге, у вас будет объект с параметрами и ценами.
Если параметров мало, лучше вместо атрибутов, прям в JS файле определить константу-объект с параметрами. Таким образом, когда потребуется больше полей, будет легко отделить параметры в отдельный json файл, практически не меняя код.

Comments

[HelpSophie]

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

Правильно?

[Владимир Проскурин]

HelpSophie,

Data- я так понимаю плохи тем, что нужно каждый раз лазать в DOM, чтобы узнать параметры.

Да, а это не очень производительно, обращение к значению с объекта, во много раз быстрее, чем к значению из DOM элемента. Вот замерил https://jsfiddle.net/Vlad_IT/vf7wrtbm/
Возможно кто-то скажет, что экономия на спичках, но я обычно если имею два по сложности и красивости одинаковых решения, использую то, что работает быстрее.

[HelpSophie]

Владимир Проскурин, логично
Спасибо!