темплейты в JavaScript

иногда при использовании ajax нужно заменять крупные блоки html при этом не всегда удобно создавать кучу DOM-элементов для того чтобы форматирование осталось таким же как и было. Некоторые передают ajax-ом сразу html код и вставляют его в нужное место, но разработчики prototype сделали более удачную реализацию, когда можно передавать с сервера только данные в виде JSON, и потом вставлять их в отдельный шаблон средствами JavaScript… собственно именно у них я и позаимствовал идею, немного упростив ее

вот такой маленький классик реализует функции шаблонизатора в JavaScript, пользоваться им довольно таки просто:

1 — подключаем класс

1. function Template( template )
2. {
3.   var _template = template.toString();
4.   var _pattern = /(#\{.*?\})/g;
5.   this.evaluate = function(object)
6.   {
7.     if( !( object instanceof Array ) )
8.     {
9.       object = new Array( object );
10.     }
11.  
12.     var result = '';
13.     for( var q = 0; q < object.length; q++ )
14.     {
15.       var tmpTemplate = _template;
16.       result += tmpTemplate.replace(_pattern, function(match)
17.       {
18.  
19.         var key = match.substring(2, match.length-1);
20.         if( undefined !== object[q][key] )
21.         {
22.           return object[q][key];
23.         }
24.         return '';
25.       });
26.     }
27.     return result;
28.   }
29. };

* This source code was highlighted with Source Code Highlighter.

2 — создаем шаблон котошый нам нужен будет (каждая переменная отделяется #{ — спереди и } — сзади):
var template = '<div>#{someText}<a href="#{href}">#{otherText}</a></div>';

3 — создаем обьект для работы с шаблоном
var templateParser = new Template( template );

ну и собственно получаем готовый html код который можно вставить куда угодно на основе Ваших данных
ключи обьекта должны совпадать с переменными в шаблоне, если ключа не будет в шаблоне он игнорируется
и если в шаблоне остаются лишние переменные то они удаляются
var htmlData = templateParser.evaluate( {someText: 'to view comments', href: '/comments', otherText: 'click here'} );

в итоге будет такая строка: <div>to view comments<a href="/comments">click here</a></div>

upd: да! этот способ работает медленней чем добавление посредствам DOM, но зато экономия кода при бОльших вложениях элементов на лицо

upd2: я поменял код, тестировал на фаерфоксе, работает в 2 раза быстрей чем через DOM, примерчик слабенький:

<div style="border: 1px solid red; padding: 5px;" id="container"><br>  <div style="border: 1px solid blue; margin: 2px; display: inline"><br>    Элемент0 <a href="/element0"> нажми для перехода </a><br>  </div><br>  <!-- .. и дальше таких же 37 блоков --><br></div> <br><br>* This source code was highlighted with Source Code Highlighter.