Поместить шаблоны JavaScript на стороне клиента в HTML или JavaScript? - PullRequest
Новая
       21

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

6 голосов
/ 24 сентября 2011

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

<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>

Где же находится хранилище шаблонов с точки зрения разделения проблем?

Ответы [ 4 ]

4 голосов
/ 25 мая 2012

Если вы используете логику шаблонных шаблонов на стороне клиента, например Прозрачность , шаблоны могут быть встроены в основной 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 ужасны, и их следует избегать, если это возможно.Это не подсветка синтаксиса, и вы легко пропускаете ошибки.

4 голосов
/ 24 сентября 2011

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

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

3 голосов
/ 24 сентября 2011

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

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

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

0 голосов
/ 24 сентября 2011

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

...