Поместить клиентские шаблоны JavaScript в HTML или JavaScript?

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

<p class="foo"><%= bar %></p>

разместить в отдельном файле HTML или в отдельном файле JavaScript? Я знаю, что это может работать в обе стороны.

Например, файл JavaScript может просто содержать список строковых переменных, например:

var cute = '<p class="the"><%= unicorn %></p>';
var fb   = '<p class="new-design"><%= sucks %></p>';

Но я также видел следующее:

<script type="text/template" id="omg-template">
  <span id="swag-name"><%= name %></span>
</script>

Только с точки зрения разделения интересов, где находится хранилище шаблонов?


javascript separation-of-concerns underscore.js client-side-templating
person Qcom    schedule 24.09.2011    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Обычно я использую систему управления активами, которая объединяет и минимизирует javascripts и css, а также переводит файлы шаблонов на стороне клиента в строки JS, свисающие с глобального var. Такого рода вещи зависят от вашей платформы, но в мире рельсов вы хотите посмотреть на jammit или sprockets (который теперь является частью рельсов)

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

person Matt Briggs    schedule 24.09.2011

arrow_upward
4
arrow_downward

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

Пример:

<!-- Template -->
<div id="template">
  <span class="greeting"></span>
  <span class="name"></span>
</div>


// Data
var hello = {
  greeting: 'Hello',
  name:     'world!'
};

<!-- Result -->
<div id="template">
  <span class="greeting">Hello</span>
  <span class="name">world!</span>
</div>

Для шаблонов, которые будут использоваться в виджетах, скрытый контейнер <div> отлично подходит.

Помещать HTML-код в кодовые блоки Javascript и строки Javascript некрасиво, и его следует по возможности избегать. Это не подсвечиваемый синтаксис, и вы легко пропускаете ошибки.

person Mikko Ohtamaa    schedule 25.05.2012

arrow_upward
3
arrow_downward

Я предпочитаю второй вариант по следующим причинам:

  • Использование строк означает работу с экранирующими кавычками и т.п.
  • Многострочные шаблоны — это боль в Javascript, так как у вас не может быть многострочных строк без конкатенации. Шаблоны любой длины будут более разборчивыми в несколько строк.
  • Нет подсветки синтаксиса в строках JS.

Но использование второго варианта требует загрузки вашего файла шаблона каким-либо образом, или включения его в ваш HTML, или вставки его в ваш HTML во время сборки. Кроме того, из-за тега script возникает больше накладных расходов, И вам нужно получить строку из DOM, используя .html() jQuery или аналогичный метод. Таким образом, с точки зрения производительности вариант строки может быть лучше, поэтому предложение @Matt поместить его в строки во время сборки, вероятно, лучше всего.

person nrabinowitz    schedule 24.09.2011
comment
Спасибо за плюсы и минусы, бро. - person Qcom; 25.09.2011

arrow_upward
0
arrow_downward

Вы можете использовать движок шаблонов jQuery и загрузить все свои шаблоны во внешний файл js.

person Jason Barry    schedule 24.09.2011
comment
К сожалению, поддержка jquery.tmpl прекращена. - person Phluks; 04.07.2012