Есть несколько шаблонных систем в 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>
И в яваскрипте код для обработки шаблона идет что-то вроде этого:
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.
Поскольку для каждого шаблона требуется время, чтобы сделать XHR? Или у вас есть способы обойти это или другие предложения? – Tower
Если шаблоны не огромны, а сервер очень медленный, время должно быть незначительным (от 500 мс до 2 секунд должно быть нормой), и вы делаете это только тогда, когда вам нужен шаблон, а не все сразу. После того как вы получили шаблон, просто сохраните его в переменной javascript, чтобы вы могли использовать его, когда вам это нужно. –
@rFactor: Смотрите мой ответ за то, как я обошел эту проблему. – slebetman