- PVSM.RU - https://www.pvsm.ru -
Я много пишу на 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/
Нажмите здесь для печати.