Pull to refresh

И javascript шаблонизатор

Reading time3 min
Views2.4K
В наше время существует уже немалое количество таковых, не правда ли? Они даже неплохо справляются со своей работой, если надо, к примеру, сформировать HTML за сотые доли секунды – это довольно быстро, и пользователь не чувствует этой задержки. И почему же мы все не кидаемся вовсю использовать шаблонизацию на стороне клиента? Ну вот к примеру несколько пунктов:
– генерировать страницу (бОльшую её часть) становится таки уже накладно;
– если у вас используется смешанная шаблонизация (шаблоны и на javascript, и на вашем любимом скриптовом языке), то возникнет ситуация, когда они у вас дублируются;

Вот о втором пункте мне бы и хотелось поговорить, его решение прямо повлияет на решение первой проблемы — производительности.

Про то, что дублирование шаблонов — это плохо, объяснять не надо? Идея само собой не нова, но ввиду нетривиальности реализации, не пользуется популярностью (по крайней мере, не трубят об этом способе столько, сколько о шаблонизаторах на серверных языках).
Так вот, пишем шаблон, который умеет подхватывать и javascript, и наш любимый perl / php / python / и т.д. Всё логично, все мы это понимаем, хотим, но готовых вариантов не пруд пруди, придется наверняка писать самому, но вот прям сейчас времени в обрез, а потом как-то забывается.

Работа программиста — это 90% времени проектирование, проведение пробных тестов, и 10% времени — написание кода пока нас никто не видит, и не мешает нам. Давайте рассуждать, чего нам надо от шаблонизатора, а потом уже сами напишем его.

На простеньком примере посмотрим на схему в целом.


Шаблон:
<ul>
  {%topics}
    <li class="{?#id == 1}first{|}other{/?}">{#title}</li>
  {/%topics}
</ul>


* This source code was highlighted with Source Code Highlighter.


Данные в виде JSON:
[{title: 'Новость',id: 1},{title: 'Статья',id: 2},{title: 'Фото',id: 3},{title: 'Видео',id: 4},{title: 'Аудио',id: 5}]

* This source code was highlighted with Source Code Highlighter.


Результирующий html
<ul>
  <li class="first">Новость</li>
  <li class="other">Статья</li>
  <li class="other">Фото</li>
  <li class="other">Видео</li>
  <li class="other">Аудио</li>
</ul>


* This source code was highlighted with Source Code Highlighter.

В результате обработки нашего шаблона парсером шаблонизатора, на выходе у нас должна быть js библиотечка и модуль к нашему скриптовому языку.
Я опущу часть про то, в каком виде должен быть код для нашего любимого скриптового языка, отметим лишь то, что если ему скормить наш массив хэшей, он должен оперативненько выдать html.

А вот теперь про библиотеку javascript. Если бы мы получали что-то похожее на это (напоминаю — это результирующий код шаблонизатора, и в принципе нам его читабельность что шла, что ехала):
(function(){

zTpl = function(options) {
  this.init(options);
  return this;
};

zTpl.prototype = {
  init: function(options) {
    this.opt = options
  },
  topics: function(data) {
    var out = '<ul>';
    for (var i=0; i< data.length; i++) {
      out += '<li class="';
      if (data[i].id == 1) {
        out += 'first';
      } else {
        out += 'other';
      }
      out += '">'+data[i].title+'</li>';
    }
    out += '</ul>';
    return out;
  }
};

})();


* This source code was highlighted with Source Code Highlighter.


То уже на стороне клиента мы бы сделали так:
var d = [{title: 'Новость',id: 1},{title: 'Статья',id: 2},{title: 'Фото',id: 3},{title: 'Видео',id: 4},{title: 'Аудио',id: 5}];
var tpl = new zTpl();
var html = tpl.topics(d);


* This source code was highlighted with Source Code Highlighter.


И вот, мы получили то, что хотели:
– генерацию html по шаблону и входному JSON;
– шаблоны у нас используются и скриптовым языком и javascript'ом, отсюда нет дублирования онных;
– за счет того, что у нас шаблоны превращаются в нативный код (скриптового языка и javascript), мы получаем максимально возможную скорость генерации;

Отметим:
– Генерация происходит за счет конкатенации чередующихся между собой переменных и статических данных(строк по сути) шаблона.
– Приведенный шаблон и код, это вершинка айсебрга возможностей нашего будущего шаблонизатора. Здесь будут все плюшки и перелести нашего серверного шаблонизатора, по мере возможности, как то многоуровневая вложенность переменных, рекурсии, и даже подобие кэширования.

Что господа думают о таком развитии событий? Целесообразность сего действа?
Tags:
Hubs:
Total votes 41: ↑31 and ↓10+21
Comments53

Articles