- PVSM.RU - https://www.pvsm.ru -

Прекомпиляция клиентских JavaScript шаблонов

Я много пишу на JavaScript, и если вам при работе с шаблонами, как и мне, надоело экранировать окончание строк, следить за именами шаблонов и собирать их перед каждым билдом, это решение для вас, jsttojs [1] — утилита для прекомпиляции клиентских шаблонов в JavaScript.

Первой мыслью было «загуглить», после непродолжительных поисков стало ясно, что ничего подходящего нет. Есть handlebars.js [2], но количество кода который он генерирует оставляет желать лучшего, выигрыш кажется сомнительным. Конечно же есть замечательный Google Closure Tools [3], но это законченное решение завязанное на инфраструктуре Closure Tools, что для нас не подходит. Было принято решение написать свою утилиту, в качестве языка для консистентности был выбран JavaScript.

Суть очень проста, у вас есть папка с шаблонами, шаблоны имеют иерархию с бесконечной вложенностью, скрипт ищет все ваши шаблоны, производит минификацию и помещает в глобальный объект, где ключ шаблона — это путь к конкретному шаблону.

Область применения

Это инструмент не привязанный к какому либо конкретному шаблонизатору, вы можете использовать свое любимое решение, например mustache, underscore.js, или ваш собственный, самый лучший фреймворк.

Так как скрипт запускается из консоли, при желании можно интегрироваться в любую систему сборки проекта, например в grunt [4] с помощью grunt-shell [5].

Использование

Установка производится с помощью стандартного пакетного менеджера npm:

$ npm install -g jsttojs

Доступны следующие параметры:

-h, --help           справка по использованию
-V, --version        версия 
-e, --ext <n>        имя расширения для шаблонов, по умолчанию jst
-n, --name <n>       имя глобальной переменной для хранения шаблонов, по умолчанию JSTmpl
-w, --watch          отслеживать изменения файлов в фоне и собирать шаблоны автоматически

$ jsttojs templates compiled/templates/index.js --ext mustache --watch

Самым «вкусным» на мой взгляд является опция --watch, можно просто запустить скрипт и забыть про него, при любом изменении внутри шаблонов, добавлении или удалении файлов, вся сборка будет происходить автоматически, не нарушая ваш привычный рабочий ритм.

Примеры

Шаблоны:

// tamplates/index.jst
Hello world {{ username }}
second line

// tamplates/video/index.jst
Hello {{ username }} on index video page
Run precompile templates

Выполняем команду:

$ jsttojs templates compiled/templates/index.js --name MyGlobalVariable

И получаем шаблоны готовые к использованию:

// compiled/templates/index.js
window.MyGlobalVariable = {
  "index" : "Hello world {{ username }} second line",
  "video/index" : "Hello {{ username }} on index video page"
}

Заключение

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

Код доступен на github [6]

Ссылки

Так же можно посмотреть в сторону

Автор: Upward

Источник [9]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/18885

Ссылки в тексте:

[1] jsttojs: http://upwards.github.com/jsttojs/

[2] handlebars.js: https://github.com/wycats/handlebars.js

[3] Google Closure Tools: https://developers.google.com/closure/

[4] grunt: https://github.com/gruntjs/grunt

[5] grunt-shell: https://github.com/sindresorhus/grunt-shell

[6] github: https://github.com/upwards/jsttojs

[7] handlebars: http://handlebarsjs.com/

[8] jquery-tmpl-jst: https://github.com/wookiehangover/jquery-tmpl-jst

[9] Источник: http://habrahabr.ru/post/157341/