Pull to refresh

jQuery template engine

Reading time 2 min
Views 11K
Началось все с прочтения вот этого поста.
Идея мне очень понравилась, и я, недолго думая, начал искать в интернете готовые решения «шаблонизаторов» для jQuery.

Вот, что мне удалось найти:


Коротко о найденном


jQuery templates — простой и понятный плагин, заменяет выражения вида ${myvar:func1:func2} на значения, передаваемые входными параметрами.
Nano — делает практически тоже самое, но при этом код плагина занимает пять строк.
Pure — «DOM-based» шаблонизатор, фактически все подстановки происходят засчет наложения данных объекта на dom-дерево.
jQote — как они сами и заявляют — это переписанный под jQuery «Micro Template Engine».
jTemplates — довольно интересный движок, обладающий большим функционалом (спасибо spanasik)

Шаблоны и jQuery


На форумах jQuery велось довольно активное обсуждение на тему включения шаблонизатора в ядро jQuery (ссылка).
В частности еще предлагался демонстрационный вариант, написанный John Resig (линк)

Мой шаблонизатор


На мой взгляд, самый удачный из шаблонизаторов — jquery-tmpl (хоть он и демонстрационный). Но мне не очень нравилась его реализация, плюс не хватало некоторых методов.

Поэтому, я решил переписать его и добавить небольшой функционал (плюс написать демку, которая показала бы возможности использования шаблонов).

Результат


Результат работы можно скачать вот здесь: jQuery.tpl, все исходники лежат на: Google code.

А вот, собственно, и демо страница.

Основные возможности


  • Схожая с PHP структура (код между "{%" и "%}", остальное текст)
  • Использование именованных шаблонов
  • Возможность добавления своих модификаторов(через объект $.template.modificators)
  • Модификатор catch, each
  • Быстрое создание функций(и scope) c помощью модификаторов "@" и "~"
  • Кэширование шаблонов
  • Строки, находящиеся вне кода не проходят через eval (заменяются на переменные вида $n)
  • Шаблон может хранить данные (переменная $scope доступная из шаблона)
  • Возможность указания необязательных параметров (при обращении к ним не будет выдаваться ошибки, если они не указаны)
  • Код между "{%= " и "%}" может возвращать не только строку, но и объект jQuery


Буду рад критике и комментариям.

P.S.
Работает под IE6
Tags:
Hubs:
+25
Comments 56
Comments Comments 56

Articles