Клиентские шаблоны в тегах скрипта. Преимущества недостатки?

Question

Любопытно, какова тенденция использования клиентских шаблонов для одностраничных приложений Java в тегах сценариев в вашем HTML-файле. Похоже, интересный подход, но считается ли это лучшей практикой (или, по крайней мере, лучшей практикой)? Я пытался придумать список преимуществ и недостатков, но список плохих, кажется, перевешивает хорошие. Таким образом, я вижу это так:

Преимущества:

1. Только один запрос на получение всех шаблонов против отдельного асинхронного запроса для каждого файла шаблона.

Недостатки:

1. Создает файл потенциальной проблемы слияния / узкого места, если все шаблоны находятся в одном месте
2. Немного громоздко редактировать шаблоны в одном файле
3. Немного обременительно, чтобы найти шаблон, который вам нужен, вместо использования сочетания клавиш для открытия файла.
4. Нужно подождать, пока DOM не будет готов, прежде чем делать что-либо с шаблоном.

Также кажется, что, имея их в тегах скрипта, вы можете предварительно скомпилировать и кэшировать ваши шаблоны, так что вы запрашиваете DOM только один раз, чтобы получить каждый шаблон. Однако, вы не можете достичь того же эффекта, используя AMD / Require и require/text! или додзё / текст!? В последнем случае вы будете лениво загружать каждый шаблон только один раз. После этого вы можете кешировать его и предварительно скомпилировать.

Я просто пытаюсь увидеть множество преимуществ шаблонов в тегах сценариев. Я что-то пропустил?

Answer 1

ИМХО, это действительно сводится к тому, сколько шаблонов у вас есть. Когда ваш сайт только начинается, и у вас не так много шаблонов, держите их все в script теги на одной HTML-странице имеют большой смысл.

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

Лично кодовая база моей компании началась с script теги в файле HTML, но, как мы с тех пор выросли (и начали использовать require) и теперь у нас есть десятки, если не сотни .handlebars (или чаще .hbs) файлы для всех наших шаблонов. Мы добавляем их в наш Javascript, используя плагин HBS Алекса Секстона ( https://github.com/SlexAxton/require-handlebars-plugin) для require, и это прекрасно работает, потому что:

1. мы используем наш стандарт require система для наших шаблонов
2. шаблоны скомпилированы в один сжатый файл JS, когда мы используем оптимизатор require
3. мы можем настроить наши IDE для лечения .handlebars файлы в виде HTML, давая нам соответствующую синтаксическую раскраску и такие, когда мы редактируем их

Я не уверен, какую систему шаблонов вы используете, но если вы используете Handlebars и уже используете Require, то плагин HBS - отличный способ. Если вы используете другую систему шаблонов, вы, вероятно, сможете найти аналогичный плагин для Require (если эта система достаточно популярна) или даже написать свой собственный, используя HBS в качестве основы.

Для тех, кто имеет приличное количество шаблонов, я думаю, что такая система (особенно для тех, кто уже использует Require) имеет гораздо больший смысл, чем script теги.

Answer 2

Если я вас правильно понимаю, у вас есть несколько шаблонов на стороне клиента, которые вы хотите использовать, но вы хотели бы разделить их на отдельные файлы на стороне сервера. Когда таких шаблонов много, у такого подхода есть некоторые очевидные технические преимущества.

Вы можете рассмотреть возможность использования JSONP. Имея полуприличный обработчик на стороне сервера, вы получаете следующие преимущества:

1. Отдельный файл для каждого шаблона
2. Простое включение в ваши HTML-страницы.
3. Возможность назначать каждый шаблон переменной или отправлять его через функцию компиляции, как только он будет получен клиентом.
4. Кэшируйте шаблоны на стороне клиента, чтобы их не приходилось перезагружать для каждой страницы.
5. Совместимость с кеширующими прокси

Единственная нетривиальная часть реализации JSONP - это свойства кэширования. Вы должны убедиться, что ваш серверный контроллер, который получает запрос, понимает условные GET, как отправлять 304 ответа и правильно устанавливает заголовки кэширования.

Если вы не знакомы с этой техникой, вы можете взглянуть на статью в Википедии JSONP.