Немного шаблонизирования

Не так давно из лекции Дугласа Крокфорда я узнал об очень интересной технике «шаблонизирования» в JavaScript. Основная цель техники заключается в том, что мы получаем с сервера JSON и потом как-то формируем из этого HTML. Во многих ситуациях этот процесс оставляет желать лучшего потому, что формирование HTML происходит или с помощью конкатенации строк или ряда операций createElement, appendChild и т.п. Возможно многие уже знают об этом решении, но для тех кто не знал надеюсь будет полезно.

Простой пример:

И так, нужно из таких данных:

var data = {
  title: 'C pocket reference',
  type: 'PDF Document',
  tag: 'programming', // Чтобы не усложнять пусть тэг будет один
  created_at: '5.31.2010'
}

получить такой html:

<tr>
  <td>C pocket reference</td>
  <td>PDF Document</td>
  <td><a href="tags/programming">programming</a></td>
  <td>5.31.2010</td>
</tr>

Приступим:

var html = '<tr><td>'+data.title+'</td><td>'+data.type+'</td><td><a href="tags/'+data.tag+'">'+data.tag+'</a></td><td>'+data.created_at+'</td></tr>' 

Как-то страшненько. Варианты??

Добавляем в прототипу String метод supplant от Дугласа Крокфорда:

String.prototype.supplant = function(o) {
    return this.replace(/{([^{}]*)}/g,
        function(a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

Суть метода в том чтобы пробежаться по свойствам полученного в параметрах объекта, которые находились в строке и были заключены в фигурные скобки и заменить имена свойств на их значения. Все это похоже на конструкцию #{} в Ruby, которая позволяет вставлять значения переменных в строку без конкатенации.

Пробуем:

var html = '<tr><td>{title}</td><td>{type}</td><td><a href="tags/{tag}">{tag}</a></td><td>{created_at}</td></tr>'.supplant(data)

Плюсы:

• не нужно конкатенировать строки
• перед каждым свойством не нужно писать имя объекта

Подсветить такие конструкции в редакторе и будет чудесно.