Писать чистый HTML часто неудобно, особенно если нужно делать динамические вставки.
Шаблонизаторы частично решают эту проблему, но их причудливый синтаксис нужно изучать, мириться с ограничениями, вкладывать одни шаблоны в другие для повторного использования, в целом попытка хороша, но что-то не то.
В некоторых фреймворках есть хелперы, в частности написать эту статью меня вынудила Aura.Html. С хелперами иная история — они изначально задуманы для реального упрощения, поскольку одной командой могут генерировать хороший кусок HTML кода, но они в большинстве заточены под определённое использование, и что-то дальше этого выглядит слишком криво.
Как более универсальное решение было бы не плохо не изобретать причудливый синтаксис, а использовать самый обычный PHP и всем знакомые примитивные CSS-селекторы.
Размышляя в таком духе некоторое время назад я принялся пилить свой велосипед. Велосипед получился, использовался в рамках другого велосипеда, потом отделился, много раз обновлялся, и сейчас я хотел бы поделиться им с сообществом.
Как оно работает?
Идея была в том, чтобы сделать как можно проще:
h::div('Content')
что на выходе даст
<div>
Content
</div>
Это самый простой пример. Название метода — тэг, внутри передается значение. Если нужно добавить атрибутов — не проблема:
h::div(
'Content',
[
'class' => 'some-content'
]
)
<div class="some-content">
Content
</div>
И можно было бы подумать, что проще уже никак, но тут на помощь приходят CSS-селекторы, и немного уличной магии:
h::{'div.some-content'}('Content')
На выходе будет то же самое. С первого взгляда может показаться немного странным, но на практике весьма удобно.
В сравнении с Aura.Html
В начале я упоминал Aura.Html, стоит сравнить как генерируется HTML там, и тут.
Aura.Html (пример из документации):
$helper->input(array(
'type' => 'search',
'name' => 'foo',
'value' => 'bar',
'attribs' => array()
));
Наш вариант:
h::{'input[type=search][name=foo][value=bar]'}()
Любой из параметров можно было вынести в массив.
На выходе:
<input name="foo" type="search" value="bar">
И ещё вариант посерьезней.
Aura.Html (пример из документации):
$helper->input(array(
'type' => 'select',
'name' => 'foo',
'value' => 'bar',
'attribs' => array(
'placeholder' => 'Please pick one',
),
'options' => array(
'baz' => 'Baz Label',
'dib' => 'Dib Label',
'bar' => 'Bar Label',
'zim' => 'Zim Label',
),
))
Наш вариант:
h::{'select[name=foo]'}([
'in' => [
'Please pick one',
'Baz Label',
'Dib Label',
'Bar Label',
'Zim Label'
],
'value' => [
'',
'baz',
'dib',
'bar',
'zim'
],
'selected' => 'bar',
'disabled' => ''
])
Тут in используется явно, его можно использовать для передачи внутренностей тэга, как Content в примере с div выше. Используются как общие правила, так и некоторые специальные, немного подробнее о которых дальше.
На выходе то же самое:
<select name="foo">
<option disabled value="">Please pick one</option>
<option value="baz">Baz Label</option>
<option value="dib">Dib Label</option>
<option selected value="bar">Bar Label</option>
<option value="zim">Zim Label</option>
</select>
Специальная обработка
Все тэги следуют общим правилам обработки, но есть некоторые тэги, которые имеют дополнительные конструкции для удобства.
Например:
h::{'input[name=agree][type=checkbox][value=1][checked=1]'}()
<input name="agree" checked type="checkbox" value="1">
Работает похоже с select, в value значение, а checked проставится когда совпадет одноименный элемент передаваемого массива.
Ещё один пример использования in и специальной обработкой input[type=radio]:
h::{'input[type=radio]'}([
'checked' => 1,
'value' => [0, 1],
'in' => ['Off', 'On']
])
<input type="radio" value="0"> Off
<input checked type="radio" value="1"> On
Никаких оберток label не добавляется специально, чтобы сделать код максимально общим и предсказуемым.
Если нужно обработать массив
Это, наверное, самая часто используемая вместе с контролем вложенности возможность, так как данные и правда часто приходят откуда-то в виде массива.
Для обработки массива его можно передать прямо вместо значения:
h::{'tr td'}([
'First cell',
'Second cell',
'Third cell'
])
Либо даже опустить лишние скобки в самом простом случае
h::{'tr td'}(
'First cell',
'Second cell',
'Third cell'
)
На выходе:
<tr>
<td>
First cell
</td>
<td>
Second cell
</td>
<td>
Third cell
</td>
</tr>
Каждый элемент массива будет обработан отдельно, то есть вполне законно передавать не только строки, но и некоторые атрибуты, правда, иногда это выглядит слишком монструозно:
h::{'tr.row td.cs-left[style=text-align:left;][colspan=2]'}(
'First cell',
[
'Second cell',
[
'class' => 'middle-cell',
'style' => 'color:red;',
'colspan' => 1
]
],
[
'Third cell',
[
'colspan' => false
]
]
)
Если в вызове тоже были указаны атрибуты — class и style будут расширены, остальные перезаписаны, атрибуты с логическим значением false будут удалены.
<tr class="row">
<td class="cs-left" colspan="2" style="text-align:left;">
First cell
</td>
<td class="cs-left middle-cell" colspan="1" style="text-align:left;color:red;">
Second cell
</td>
<td class="cs-left" style="text-align:left;">
Third cell
</td>
</tr>
С помощью волшебной палочки, которая не является привычной частью CSS-селектора (это единственное исключение, без которого можно обойтись), можно управлять тем, как будут обрабатываться уровни вложенности:
h::{'tr| td'}([
[
'First row, first column',
'First row, second column'
],
[
'Second row, first column',
'Second row, second column'
]
])
<tr>
<td>
First row, first column
</td>
<td>
First row, second column
</td>
<tr>
<tr>
<td>
Second row, first column
</td>
<td>
Second row, second column
</td>
<tr>
Если массив получен из базы данных, или иного хранилища — удобно использовать такой массив напрямую, и это можно сделать передав в специальный атрибут insert:
$array = [
[
'text' => 'Text1',
'id' => 10
],
[
'text' => 'Text2',
'id' => 20
]
];
h::a(
'$i[text]',
[
'href' => 'Page/$i[id]',
'insert' => $array
]
)
<a href="Page/10">
Text1
</a>
<a href="Page/20">
Text2
</a>
Можно и в одну строчку все атрибуты написать:
$array = [
[
'id' => 'first_checkbox',
'value' => 1
],
[
'id' => 'second_checkbox',
'value' => 0
],
[
'id' => 'third_checkbox',
'value' => 1
]
];
h::{'input[id=$i[id]][type=checkbox][checked=$i[value]][value=1]'}([
'insert' => $array
])
<input id="first_checkbox" checked type="checkbox" value="1">
<input id="second_checkbox" type="checkbox" value="1">
<input id="third_checkbox" checked type="checkbox" value="1">
А ещё всё это можно расширять
Этот класс представляет только общие, ни к чему не привязанные правила генерации HTML, которые могут быть использованы независимо от окружения.
Но иногда хочется упростить выполнение более сложных рутинных операций.
Например, я использую многие элементы UIkit на фронтенде, и, например, для переключателя нужна особым образом подготовленный HTML.
Скопировав оригинальный код обработки input и слегка отредактировав можно получить такой результат:
h::radio([
'checked' => 1,
'value' => [0, 1],
'in' => ['Off', 'On']
])
<span class="uk-button-group" data-uk-button-radio="">
<label class="uk-button uk-active" for="input_544f4ae475f58">
<input checked="" id="input_544f4ae475f58" type="radio" value="1"> On
</label>
<label class="uk-button" for="input_544f4ae475feb">
<input id="input_544f4ae475feb" type="radio" value="0"> Off
</label>
</span>
Так же можно переопределить метод pre_processing, и реализовать произвольную обработку атрибутов непосредственно перед рендерингом тэга, например, при наличии атрибута data-title я навешиваю класс, и таким образом получаю всплывающую подсказку над элементом при наведении.
Преимущество использования
Генерируется HTML без шанса оставить тэг незакрытым, или что-то в этом роде.
Везде используются общие правила обработки, которые логичны, весьма быстро запоминаются, и являются намного чаще удобными, чем наоборот.
Можно использовать с абсолютно любыми тэгами, даже с веб-компонентами (пример писать не буду, и так много примеров).
Нет никаких зависимостей, есть возможность унаследовать и переопределить/расширить по желанию всё что угодно, так как это всего лишь один статический класс, и больше ничего.
На выходе обычная строка, которую можно легко использовать вместе с абсолютно любым кодом, использовать на входе следующего вызова класса.
Где взять и почитать
На этом, пожалуй, хватит примеров.
Исходный код на GitHub
Там же есть документация с подробным объяснением всех нюансов использования и всех поддерживаемых конструкций.
Поставить можно через composer, либо просто подключив файл с классом.
Пример наследования с добавлением функциональности
Планы
Нужно всё-таки отрефакторить __callStatic(), не сломав при этом ничего)
Было бы круто переписать на Zephir, и сделать расширение для PHP (это скорее мечта, но, возможно, когда-то возьмусь и за нее).
Автор: nazarpc
