HTML в JS. Как правильно хранить таких соседей?

Question

[Daniel Newman]

В JS-коде нашего продукта очень много ужасного HTML. Особенности этой части приложения, что без шаблонов, собираемых на лету - никак.

Проблему, решенную заменой ерунды вида:

out = '<div class="vibor1">';
out += '<div class="add-avia-citys"><span class="city-input"><span class="city-code cFrom">' + fromCityCode + '</span><input class="in1 cityAutocomplete bbb ' + rGreenDep + '" type="text" placeholder="Откуда" name="from[0]" id="from0" data-cid="0" value="' + fromCity + '"></span>'
    + '<span id="tl0" class="trip-loop"></span><span class="city-input"><span class="city-code cTo">' + toCityCode + '</span><input class="in1 cityAutocomplete bbb ' + rGreenArr + '" type="text" placeholder="Куда" name="to[0]" id="to0" data-cid="1" value="' + toCity + '"></span></div></span>'
    + '<div class="add-avia-date"><input class="in2 datepicker bbb ' + dateDepGreen + '" type="text" placeholder="Дата вылета" name="date[0]" id="date0" value="' + dateDep + '">';
out += '<div class="avia-slider-time"><div class="slider-min-block"><span class="slider-min" id="fs_0_min">0</span>:00</div><div id="fslider0"></div>'
    + '<div class="slider-max-block"><span class="slider-max" id="fs_0_max">23</span>:59</span></div></div>';
out += '</div>'
    + '<div class="search-block">'
    + '<div class="add-avia-class green-radio">'
    + '<input class="radio-green" type="radio" id="radio-econom" name="class" value="y" checked>'
    + '<label for="radio-econom">Эконом</label>'
    + '<input class="radio-green" type="radio" id="radio-comfort" name="class" value="s">'
    + '<label for="radio-comfort">Комфорт</label>'
    + '<input class="radio-green" type="radio" id="radio-bisnes" name="class" value="c">'
    + '<label for="radio-bisnes">Бизнес</label>'
    + '</div>';

На читаемую ерунду:

innerOut = ''
+   '<div class="bgr-add">'
+       '<div class="add-avia-citys">'
+           '<span class="city-input">'
+               '<span class="city-code cFrom">' + fromCityCode + '</span>'
+               '<input class="in1 in3 margi cityAutocomplete bbb" type="text" placeholder="Откуда" '
+               'name="from[' + globalCounter + ']" id="from' + globalCounter + '" data-cid="' + cid + '">'
+           '</span>'
+           '<span id="tl' + globalCounter + '" class="trip-loop"></span>'
+           '<span class="city-input">'
+               '<span class="city-code cTo">' + toCityCode + '</span>'
+               '<input class="in1 in3 cityAutocomplete bbb" type="text" placeholder="Куда" '
+                       'name="to[' + globalCounter + ']" id="to' + globalCounter + '" '
+                       'data-cid="' + (cid + 1) + '">'
+           '</span>'
+       '</div>'

Язык не повернется назвать это "хорошо". Отсюда вопрос: что делают хорошие и культурные разработчики в таких случаях, когда шаблоны хочется держать на отдельной полке или делать это более культурно и хорошо для нормальной поддержи?

Comments

[Dmitriy Uvarov]

А что вам религия не позволяет их хранить отдельно в файлах и подключать сборщиком?

Answer 1

[Кирилл]

А что мешает использовать шаблонные строки?
https://developer.mozilla.org/ru/docs/Web/JavaScri...
frontender.info/es6-in-depth-template-strings

Comments

[Daniel Newman]

${} если только это. Но и оно не тянет на next big thing. А так - те же, только сбоку.

Answer 2

[semki096]

Что то мне эти шаблонизаторы непонятны. Какая разница в <?=$string?> или {string} То же самое с циклами, например в php есть альтернативный синтаксис для циклов, чтобы вставлят хтмл код без всяких кавычек. И читается такой код проще чем под шаблонизаторами. Имхо - шаблонизаторы это шлак ( извиняюсь если кого обидел, но у меня такое мнение пока сложилось)

Comments

[Михаил]

Ваше мнение можно частично считать правильным в случае с php, потому как шаблонизатор шаблонизатора это такое себе. Но человек выше пишет про js.