Где лучше хранить html для динамического использования в js?

Question

[S-a-n-d-r-0]

Пишу свой модуль для битрикс. Модуль должен автоматически добавлять виджет на все страницы сайта. В виджете будет динамический контент, да и html самого виджета тоже нужно где-то хранить. При этом добавить виджет на страницу можно только при помощи js.
Вопрос, какой подход лучше выбрать.
Можно:
1) Добавлять в шапку тег script с аттрибутом type= text/html, и брать шаблон оттуда
2) Добавлять в тело документа теги template или code с display=none и брать шаблон оттуда
3) Запихать шаблон в отдельный файл и грузить аяксом оттуда
4) Шаблонный строки `строка текста ${выражение} строка текста` - не вариант, т.к. не поддерживаются IE.
5) Весь html будет внутри обычной строки js.
Именно последний подход сейчас я и использую. Выглядит примерно так:

const TEMPLATE = '<div class="' + wrapClasses.join(' ') + '">'
        // кнопка вызова формы
        + '<div class="' + buttonClass + '">'
            + 'кнопка'
        + '</div>'

        // шапка виджета
        + '<div class="' + headerClass + '">'
            + '<div class="' + goAdminClass + '"> открыть в админке </div>'
            + '<div class="' + hideClass + '">_</div>'
        + '</div>'
// и т.д.

Но в итоге такой шаблон получился довольно большим и постоянно перерабатывается, и я задался вопросом, может, есть подход получше? Какой способ организовать это самый распространенный и будет понятен любому нормальному разработчику (после меня этот проект унаследуют другие разработчики, не хотелось бы оставлять дерьмо будущим поколениям))
P.S. Библиотеки вроде react и т.п. тут не вариант.

Answer 1

[Надим]

Можно в локальном хранилище сохранить, а затем оттуда тянуть при необходимости. Будет экономия трафика, да и скорость загрузку будет выше.

Comments

[wisgest]

Это не ответ. Сохранить из чего? Варианты в вопросе.

[Надим]

wisgest, разумеется хранить на сервере отдельным файлом, это правильно с точки зрения удобства правок.

Answer 2

[Александр Маргинал]

1. Литеральные строки использовать можно везде, потому что js обрабатывается Babel во время сборки
2. Template использовать нужно
3. Используйте polymer

Answer 3

[Pavel O]

Использую 2-ой указанный вами вариант. Очень удобно, что сначала можно данный шаблон обработать и вывести через php и далее с ним работать в js. Помимо этого, даже если шаблон не используется на странице, то можно снять display:none; и накатить стили оформления.

Answer 4

[Антон Неверов]

Почему React не вариант? Он всегда вариант :)
Попроще - mustache.js

Comments

[S-a-n-d-r-0]

Потому что я не знаю реакт (но это поправимо, давно хотел его выучить))
А вот существенное препятствие - 2) те, кто будут дорабатывать все это после меня с вероятностью 0.99 тоже не будут знать реакт и подобных ему библиотек, потому что моя контора с ними не работает. Поэтому, к сожалению, не вариант