Шаблоны JavaScript

Question

Я пытался убедить коллегу использовать Усы / Хогана в начале проекта, и я предложил следующее:

Наличие файла templates.js, который может выглядеть примерно так:

var tpl_alert = '<div class="alert">{{msg}}</div>';
var tpl_welcome = '<p class="user-{{type}}">Welcome, {{name}}</p>';
...

Затем мы включили бы templates.js и использовали соответствующий tpl в рендеринге Mustache / Hogan.js.

Мое предложение было отклонено, поскольку мы жестко закодировали HTML-шаблоны в переменные js. Это действительно так плохо? Какие есть альтернативы этому?

Answer 1

Чтобы ответить на ваш вопрос, размещение ваших шаблонов в переменных javascript внутри статического файла JavaScript затрудняет поддержку ваших шаблонов. Вам нужно беспокоиться о экранировании строк всякий раз, когда вы хотите сделать простое изменение. И 1 синтаксическая ошибка приведет к сбою вашего приложения.

Однако размещение всех ваших шаблонов в одном файле JavaScript - это самый быстрый способ загрузки ваших шаблонов.

Ваши альтернативы:

1. Хранение ваших шаблонов в отдельных файлах и создание статического файла template.js в качестве шага предварительной сборки.
2. Загрузка асинхронных файлов шаблонов html через AJAX в переменные javascript.
3. Использование библиотеки, такой как Require.js , которая будет асинхронно загружать ваши шаблоны при необходимости в переменные.

Answer 2

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

В частности, я использую eco шаблоны (я бы не рекомендовал их, если вы не знакомы со сценарием кофе) и Stitch для node.js . Stitch поддерживает пользовательские механизмы, связанные с расширениями файлов, поэтому, когда он находит эко-файл в каталоге моего проекта, он компилирует его в функцию Javascript. Теперь я могу включить эту функцию в любую другую часть моего приложения, используя функцию require, предоставленную строчкой, используя исходный путь к эко-файлу. Поэтому, если шаблон находится в src/views/listItem.eco, я бы запустил var listItemView = require('views/listItem');, чтобы извлечь его и использовать вот так

var html = listItemView({item: items[i]});
$someElement.html(html);

Вы можете использовать require.js вместо stitch if course или любую другую похожую среду.