Введение в JadePHP
На сегодняшний день существуют десятки движков шаблонов с опциями типа Smarty, Twig (используемой в готовящейся к выходу версии Drupal) и Blade (по умолчанию для Laravel) - это самые известные.
И, конечно, Vanilla PHP. Отойдя непосредственно от PHP eRuby / ERB и Haml для Ruby / Ruby on Rails, Javascript теперь имеют в своем распоряжении ряд очень популярных решений: Mustache, Handlebars, Hogan и EJS. Некоторые из них отличаются незначительными нюансами синтаксиса, некоторые более заметно.
Одним из тех, которые отличаются от других существенно, является Jade, движок, обычно связанный с приложениями Javascript - например, он поддерживается расширенной версией Express для Node.js. Вот этот Jade я и хочу рассмотреть в этой статье; или более конкретно порт PHP JadePHP.
Haml и Jade
Было бы упущением не упомянуть в разговоре о Jade Haml. От которого Jade собственно и произошел - в самом деле существует несколько библиотек для использования Haml с PHP.
Jade разделяет философию Haml, которая заключается в том, чтобы создавать «красивые» шаблоны и использовать то, что авторы называют «haiku». Что бы это на самом деле ни значило, нет никаких сомнений в том, что Haml и Jade действительно имеют ряд общих характеристик, которые принципиально отличают их от большинства языков шаблонов.
В чем разница между ними?
Большинство движков шаблонов включают в себя написание целевой разметки и «вкрапление» в нее заполнителей и / или основной логики - в некотором смысле расширение. Jade также поддерживает заполнители и логику, но он также обеспечивает сокращения для написания XML-подобных элементов.
В принципе это предполагает использование HTML, хотя вы можете легко применять его для таких вещей, как RSS, и собственно XML.
По факту, если хотите, вы можете использовать Jade просто как сокращение для HTML без его более «традиционных» функций шаблонов.
Как использовать хранилище
Печально, но код в данный момент не доступен через Composer - хотя его достаточно несложно упаковать, если у кого-то есть час или два свободного времени.
Тем не менее, вы можете заставить его работать, клонировав хранилище и выполнив include или require для вложенного autoload.php.dist (хранилище Github включает UniversalClassLoader от Symfony).
Вот пример, взятый из одного описания проекта, который предполагает, что хранилище было загружено в каталог jade:
require('./jade/autoload.php.dist');
use EverzetJadeDumperPHPDumper,
EverzetJadeVisitorAutotagsVisitor,
EverzetJadeFilterJavaScriptFilter,
EverzetJadeFilterCDATAFilter,
EverzetJadeFilterPHPFilter,
EverzetJadeFilterCSSFilter,
EverzetJadeParser,
EverzetJadeLexerLexer,
EverzetJadeJade;
$dumper = new PHPDumper();
$dumper->registerVisitor('tag', new AutotagsVisitor());
$dumper->registerFilter('javascript', new JavaScriptFilter());
$dumper->registerFilter('cdata', new CDATAFilter());
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());
// Initialize parser & Jade
$parser = new Parser(new Lexer());
$jade = new Jade($parser, $dumper);
$template = __DIR__ . '/template.jade';
// Анализ шаблона (контейнера строк и файлов)
echo $jade->render($template);
Он будет компилировать файл template.jade и выполнять echo для его содержимого.
Место применения не зависит от рабочего процесса, от того, какой фреймворк вы используете и так далее. Чтобы просмотреть файловую систему для внесения изменений в шаблоны Jade, вы, пожалуй, можете использовать такие сервисы, как Watchman, Guard или Resource Watcher, и скомпилировать их в соответствующее время по ходу процесса разработки.
Простой пример
Давайте рассмотрим простой пример, который выводит полную - или базовую - HTML-страницу, всего с двумя переменными и без логики (пока!):
!!! 5
html(lang="en-us")
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=Edge;chrome=1")
title(dir="ltr")= pageTitle
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(rel="stylesheet", media="screen", href="/css/styles.css")
body
header
h1 My Jade Application
div#content
div.inner
=$bodyContent
script(data-main="js/main.js", src="js/libs/require.js")
Важно: вы должны использовать два пробела для отступа. Это единственный метод, который в настоящее время распознает Jade PHP, и использование чего-либо другого может привести к ошибкам или некорректному составлению разметки.
Сразу становится очевидно, что Jade существенно отличается от HTML, к которому вы привыкли. Как минимум, в нем нет угловых скобок и закрывающихся тегов.
Также отсутствуют фигурные скобки, двойные фигурные скобки или любой из общих подходов к разметке переменных для включения в шаблон. (Тем не менее, вы можете использовать синтаксис двойной фигурной скобки, но это не является частью Jade, как такового).
Это очень короткий метод создания разметки. Рассмотрим полученный HTML-код:
<!DOCTYPE html>
<html lang="en-us">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title dir="ltr"><?php echo pageTitle ?></title>
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<link rel="stylesheet" media="screen" href="/css/styles.css" />
<body>
<header>
<h1>Мое Jade приложение</h1>
</header>
<div id="content">
<div class="inner">
<?php echo $bodyContent ?>
</div>
</div>
<script data-main="js/main.js" src="js/libs/require.js"></script>
</body>
</html>
Теперь давайте пройдемся по ключевым строкам шаблона Jade, чтобы получить представление о том, как работает сокращение для HTML.
!!! 5 это сокращение для типа документа HTML5. Это единственное место, где применяется такой синтаксис, как три восклицательных знака.
Вы также можете использовать !!! xml, чтобы сократить , для переходов вы можете использовать !!! transitional, чтобы сократить или сокращение по умолчанию !!! default дает вам .
ПРИМЕЧАНИЕ; в последней версии Jade с включением Javascript, объявление !!! 5 было заменено на doctype html; возможно - хотя вряд ли, похоже на недочет в работе хранилищ GitHub - что JadePHP унаследует эту практику.
HTML-теги определяются только их названиями, при этом нет необходимости их закрывать; например:
body
header
Если вы так и оставите, то в результате получится:
<body>
<header></header>
</body>
Обратите внимание, как структура документа представлена с помощью отступов.
Вы можете поместить содержимое тега после его имени через пробел:
h1 Мое Jade приложение
превращается в:
<h1>Мое Jade приложение</h1>
Если вы хотите разделить большие фрагменты содержимого на несколько строк, используйте символ «|»:
p
| Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
| Aenean eu leo quam.
| Pellentesque ornare sem lacinia quam venenatis vestibulum.
Этот код компилируется в:
<p>Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
Вы можете использовать код, соответствующий CSS-селекторам, чтобы добавить идентификаторы и классы для элементов HTML:
div#content
div.inner
... дают в результате:
<div id="content">
<div class="inner">
Другие атрибуты, такие как src, href, lang, media и т.д. можно задать с помощью скобок:
html(lang="en-us") === <html lang="en-us">
link(rel="stylesheet", media="screen", href="/css/styles.css") === <link rel="stylesheet" media="screen" href="/css/styles.css" />
Знак равенства используется для подстановки переменных. Как вы можете видеть выше, при компиляции шаблона Jade он преобразуется во что-то вроде этого:
= $pageTitle
.. будет:
<?php echo $pageTitle ?>
Добавление логики
Вы можете использовать тире, чтобы ввести базовую условную логику. Вот конкретный пример:
header
h1= $pageTitle
- if ($loggedIn):
p.greeting Welcome back!
- else:
a(href="/login") Please login
- endif;
При компиляции шаблона это преобразуется в:
<header>
<h1><?php echo $pageTitle ?></h1>
<?php if ($loggedIn) ?>
<p class="greeting">Welcome back!</p>
<?php else ?>
<a href="/login">Please login</a>
<?php endif ?>
</header>
Повторение задается очень похожими строками:
ul
- foreach ($items as $item):
li= $item
Фильтры
Вы можете использовать фильтры, чтобы взять блок текста и обработать его некоторым образом, например:
:php
| $value = 10;
| $computed_value += 100;
| print $computed_value;
эквивалентно:
<?php
$value = 10;
$computed_value += 100;
print $computed_value;
?>
Возможно, более полезными будут JavaScript и CSS фильтры, например:
:style
| body {
| background: yellow;
| }
... будет эквивалентно:
<style type="text/css">
body {
background: yellow;
}
Вы задали эти фильтры следующим образом (контекст этих объявлений смотрите в выше приведенном примере кода):
$dumper->registerFilter('javascript', new JavaScriptFilter());
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());
Первый аргумент соответствует тексту, который используется для «разметки» текста в шаблонах, имеющих префикс двоеточие; так в приведенном выше примере вы можете использовать: :javascript, :php и :style соответственно.
С помощью решений EverzetJadeFilterFilterInterface, вы можете даже задавать свои собственные фильтры.
Стоит ли использовать Jade?
Спорить о том, какой язык шаблонов лучше использовать, в конечном счете, бесполезно. В любом случае вы можете привести много критериев, в соответствии с которыми одни языки работают лучше, чем другие при определенных обстоятельствах, под которые они специально заточены.
Например, такие как работа на стороне клиента или сервера. В конце концов, выбор часто бывает очень личным, он зависит от того, с каким движком вам комфортнее всего составлять скрипты.
У меня нет намерения раздувать пламя подобных споров, и сам я не хочу участвовать в дискуссиях на тему того, какой язык программирования является «лучшим».
Сокращения Jade подходят не для всех. Одни люди будут утверждать, что это очень облегчает чтение кодов, другие будут с этим категорически не согласны. Однако если вы видите для себя какие-либо преимущества в этом подходе, то это веская причина, чтобы выбрать его.
Еще одна причина, по которой вы можете решить использовать Jade - количество опций для составления шаблонов - это если вы поочередно используете разные технологии.
Если вы часто переключаетесь между, скажем, Node.js и PHP, тогда есть смысл обеспечить обоюдную совместимость.
Зачем полностью углубляться в изучение одного движка, затем использовать что-то еще, если Jade совместим с несколькими языками?
Заключение
В этой статье я рассмотрел JadePHP, порт заточенного в первую очередь под Javascript движка шаблонов Jade. Я дал вам несколько советов о том, как его использовать, и некоторые идеи по поводу того, стоит ли его использовать.
Собираетесь ли вы попробовать его, или он слишком сокращенный для вас? Дайте мне знать в комментариях, что вы об этом думаете.