Введение в JadePHP

0 ∞

На сегодняшний день существуют десятки движков шаблонов с опциями типа 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 без его более «традиционных» функций шаблонов.

Введение в PHP5

Как использовать хранилище

Печально, но код в данный момент не доступен через 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")
Классы в PHP - введение

Важно: вы должны использовать два пробела для отступа. Это единственный метод, который в настоящее время распознает 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. Я дал вам несколько советов о том, как его использовать, и некоторые идеи по поводу того, стоит ли его использовать.

Собираетесь ли вы попробовать его, или он слишком сокращенный для вас? Дайте мне знать в комментариях, что вы об этом думаете.