Как лучше добавлять большие куски html на чистом JS?

Задача: при нажатии на кнопку "дополнительно" сделать запрос на сторонний API, а затем показать блок с полученными данными. Причем данные нужно понатыкать в блок так, чтобы было красивенько - а это куча разных span, ul и прочего, что будет расставлять данные в блоке по определенно схеме.
Блок заменяет собой кнопку. То есть, если кнопку не нажимали, то и блок не должен появляться на странице. А если нажали, то кнопка исчезает, и вместо нее появляется блок с данными. И все это на чистом JavaScript.
Но я не знаю, какой подход выбрать. В данный момент на странице я создаю только кнопку. Заготовки под информационный блок у меня нет. Он начинает строится с нуля при получении ответа от API. А это очень много кода - почти 200 строк шаблонной строки, куда втыкаются полученные данные. В JS-файле все это выглядит не совсем круто, плюс в шаблонной строке очень неудобно писать HTML.
Как вариант я рассматриваю другой подход. Сделать заготовку блока в html и скрыть его от пользователя. Если кнопка будет нажата, то я удаляю эту кнопку и снимаю hidden с блока. Но и этот подход мне не нравится, так как получится очень много операций по встраиванию данных в уже сформированный html. А это, насколько я знаю, очень неэффективно.
Какие будут советы?
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ответы на вопрос 1
@alexalexes
Причем данные нужно понатыкать в блок так, чтобы было красивенько - а это куча разных span, ul и прочего, что будет расставлять данные в блоке по определенно схеме.

Эта работа для любого JS шаблонизатора, который вы не хотите использовать.
А это очень много кода - почти 200 строк шаблонной строки, куда втыкаются полученные данные.

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

Да-да, без шаблонизатора, единственный способ сшивать строки в JS:
Это использовать плюсы:
var html_str = '<p>'
+ 'какое-то значение'
+ '</p>';

двойными кавычками с обратным слэшем:
var html_str = "<p>\
какое-то значение\
</p>";

или обратными кавычками (не для старых браузеров)
var html_str = `<p>
какое-то значение
</p>`;

Еще нужно заботится об экранировании внутренних кавычек, если такие используются для обрамления всей строки шаблона.
Да, неудобно, но это плата за отсутствие шаблонизатора.
Но и этот подход мне не нравится, так как получится очень много операций по встраиванию данных в уже сформированный html. А это, насколько я знаю, очень неэффективно.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы