Я в основном согласен с ответом этого ответа: Где хранить HTML-шаблоны?
Ты уже поступаешь правильно из-за принципа KISS .
В зависимости от того, сколько шаблонов у вас получится (вы упомянули «еще много»), вы можете отделить их от главной страницы. Для этого есть несколько причин.
Одной из причин снова будет принцип KISS. Слишком много шаблонов может затруднить навигацию по исходному коду. Возможно, ваш редактор или IDE уже рассмотрели этот вопрос. В противном случае это может быть хорошей причиной для размещения ваших шаблонов в отдельных файлах.
Другая причина - производительность. Если вы обслуживаете HTML-файл самостоятельно, без шаблонов, ваша страница попадет на клиент и начнет рендеринг гораздо раньше. Вы также можете разрешить клиенту кэшировать некоторые шаблоны и загружать новые только при их изменении. Это значительно ускорит будущие посещения вашего сайта.
Если производительность особенно важна, вы можете рассмотреть сочетание двух подходов. Вы бы включили основные шаблоны, которые собирают основную структуру вашей страницы, в основную страницу HTML. Затем дополнительные шаблоны можно получить после загрузки страницы и / или непосредственно перед тем, как они понадобятся. Чтобы включить необходимые шаблоны, вы можете использовать шаблоны на стороне сервера.
Относительно вашего первоначального вопроса о том, где их хранить, я говорю, что вы должны поместить их в любое место, где это имеет смысл. Затем см. статью Дэйва Уорда об использовании внешних шаблонов с шаблонами jQuery , чтобы получить информацию о том, как создавать и извлекать ваши шаблоны. Вот необходимый фрагмент кода:
// Asynchronously our PersonTemplate's content.
$.get('PersonTemplate.htm', function(template) {
// Use that stringified template with $.tmpl() and
// inject the rendered result into the body.
$.tmpl(template, person).appendTo('body');
});
Затем посмотрите Введение в шаблоны jQuery, Стивен Вальтер и перейдите к разделу «Удаленные шаблоны». У него есть пример, который выбирает и компилирует шаблон только один раз, но делает возможным рендеринг несколько раз. Вот основные фрагменты:
// Get the remote template
$.get("ProductTemplate.htm", null, function (productTemplate) {
// Compile and cache the template
$.template("productTemplate", productTemplate);
// Render the products
renderProducts(0);
});
function renderProducts() {
// Get page of products
var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5);
// Used cached productTemplate to render products
$.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer");
}