В javascript есть несколько систем шаблонов. Однако, мой личный фаворит - тот, который я разработал сам, используя ajax для получения шаблонов XML. Шаблоны представляют собой файлы XML, что позволяет легко встраивать HTML-код и выглядит примерно так:
<title>This is optional</title>
<body><![CDATA[
HTML content goes here, the CDATA block prevents XML errors
when using non-xhtml html.
<div id="more">
$CONTENT$ may be substituted using replace() before being
inserted into $DOCUMENT$.
</div>
]]></body>
<script><![CDATA[
/* javascript code to be evaled after template
* is inserted into document. This is to get around
* the fact that this templating system does not
* have its own turing complete programming language.
* Here's an example use:
*/
if ($HIDE_MORE$) {
document.getElementById('more').display = 'none';
}
]]></script>
И код JavaScript для обработки шаблона выглядит примерно так:
function insertTemplate (url_to_template, insertion_point, substitutions) {
// Ajax call depends on the library you're using, this is my own style:
ajax(url_to_template, function (request) {
var xml = request.responseXML;
var title = xml.getElementsByTagName('title');
if (title) {
insertion_point.innerHTML += substitute_strings(title[0],substitutions);
}
var body = xml.getElementsByTagName('body');
if (body) {
insertion_point.innerHTML += substitute_strings(body[0],substitutions);
}
var script = xml.getElementsByTagName('script');
if (script) {
eval(substitute_strings(script[0],substitutions));
}
});
}
function substitute_strings (str, substitutions) {
for (var n in substitutions) {
str.replace(n,substitutions[n]);
}
return str;
}
Способ вызова шаблона:
insertTemplate('http://path.to.my.template', myDiv, {
'$CONTENT$' : "The template's content",
'$DOCUMENT$' : "the document",
'$HIDE_MORE$' : 0
});
Знак $ для замещенных строк - это просто соглашение, вы можете использовать % из # или любые другие разделители, которые вы предпочитаете. Это просто для того, чтобы сделать заменяемую деталь однозначной.
Одним большим преимуществом использования замен на стороне javascript вместо обработки шаблона на стороне сервера является то, что это позволяет шаблону быть простыми статическими файлами. Преимущество этого (за исключением того, что нет необходимости писать код на стороне сервера) заключается в том, что вы можете установить политику кэширования для шаблона как очень агрессивную, так что браузеру нужно будет только извлечь шаблон при первой загрузке. Последующее использование шаблона будет происходить из кэша и будет очень быстрым.
Кроме того, это очень простой пример реализации, иллюстрирующий механизм. Это не то, что я использую. Вы можете изменить это далее, чтобы сделать такие вещи, как множественная подстановка, лучшая обработка блока скрипта, обработка нескольких блоков контента с помощью цикла for вместо простого использования первого возвращенного элемента, правильной обработки сущностей HTML и т. Д.
Мне действительно нравится эта причина в том, что HTML - это просто HTML в текстовом файле. Это позволяет избежать кавычек и ужасных проблем с производительностью конкатенации строк, которые вы обычно обнаружите, если напрямую встраиваете строки HTML в javascript.