Директива Blade hasStack в Laravel и расширенное управление стеком

Информатек Диджитал » Ресурсы » Директива Blade hasStack в Laravel и расширенное управление стеком

Если вы ежедневно работаете с Laravel, рано или поздно вы столкнетесь с Blade, его директивами и, конечно же, стеками представлений и идеей гипотетической директивы `hasStack` для более эффективного управления ими. Возможно, вы привыкли к классическим PHP-шаблонам, React или Vue, но когда вы по-настоящему поймете Blade и все, что он предлагает (включая стеки), именно тогда организация представлений значительно улучшится.

В этой статье мы углубимся в тонкости: вы подробно узнаете, как работает Blade, что такое директивы управления, как структурированы макеты, компоненты, слоты, атрибуты, авторизация и среды, и в этом контексте, как вписывается концепция стеков и директива hasStack, позволяющая проверять наличие стекового контента перед рендерингом. Все это будет проиллюстрировано практическими примерами и реалистичным подходом, разработанным для современных проектов Laravel.

Что такое Blade и почему так важно понимать его директивы?

Блэйд - это официальный шаблонизатор LaravelЭто не заставит вас прекратить использование PHP, но предоставит вам гораздо более чистый синтаксис для смешивания логики представления и HTML без постоянного открытия и закрытия тегов. Всегда. Каждый шаблон .blade.php Он скомпилирован в чистый PHP и кэшируется в storage/framework/views, поэтому накладные расходы во время выполнения минимальны.

Виды лезвий обычно сохраняются в ресурсы/представления и возвращаются с маршрутов или контроллеров с помощью помощника view()Вы можете передать данные этому помощнику во втором аргументе (ассоциативный массив, compact()и т.д.), и в представлении они потребляются с синтаксисом двойные ключи для отображения экранированного содержимого или с восклицательными знаками для неэкранированного содержимого.

Главное преимущество Blade заключается в том, что он предлагает конкретные директивы (те слова, которые начинаются с @) для обработки условий, циклов, авторизации, стеков скриптов, компонентов, слотов, проверки, сред... Все это делает код представления гораздо более читабельным и поддерживаемым, чем хаотичная смесь классического PHP с echo и простой HTML.

Базовый синтаксис Blade: echo, escape и verbatim

Самая распространённая операция в представлении — отображение данных. В Blade, чтобы вывести содержимое переменной, просто используйте {{ }}, что внутренне переводится в echo e($variable) и поэтому, Экранирование HTML-сущностей для предотвращения XSS:

Отображение экранированных переменных осуществляется очень просто:

{{ $name }}

Если вы хотите отобразить предварительно сгенерированный HTML-код или контент, который не должен экранироваться (например, потому что вы контролируете его и знаете, что он безопасен), вы можете использовать синтаксис {!! !!} , который отключает автоматическое экранирование и позволяет браузеру интерпретировать его как есть:

{!! $htmlSeguro !!}

Если вы работаете с фронтенд-фреймворками, которые также используют ключи (например, Vue или какая-либо клиентская библиотека шаблонов), Blade позволяет вам «сбежать» из собственного двигателя с префиксом @, Таким образом, @{{ variableJavascript }} Он не будет интерпретироваться как выражение Blade, а останется в HTML-коде для обработки фреймворком браузера.

Когда у вас есть большие блоки, где необходимо полностью соблюдать двойные фигурные скобки, не затрагивая их в Blade, вы можете заключить их в директиву @verbatim … @endverbatim . Всё, что находится внутри, останется нетронутым — очень полезный инструмент при интеграции сложных шаблонов фронтенда.

Управляющие структуры: if, switch, циклы и переменная $loop

Blade предлагает полный набор директив управления потоком , которые делают синтаксис PHP более читабельным и согласованным. На практике логика практически идентична, но вы получаете ясность и избегаете чрезмерного использования PHP-тегов в HTML.

Операторы if написаны с @if, @elseif, @else и они закрываются с @endifУ вас также есть такие сочетания клавиш, как @unless (отрицание условия), @isset чтобы проверить, что переменная определена и @empty чтобы проверить, пуст ли он.

Для сценариев с несколькими возможными значениями директива @выключатель копирует структуру переключателя PHP с помощью @case, @break, @default и близко с @endswitch, что упрощает использование нескольких условных операторов, которые легко читать.

Что касается петель, у вас есть @для, @для каждого y @пока, Plus @forelseЭто очень полезно, когда вы хотите выполнить итерацию по коллекции, но также вам нужно обработать случай пустого списка без написания дополнительного оператора if. @forelse ... @empty ... @endforelse При отсутствии элементов можно отобразить альтернативный контент.

Когда вы путешествуете через @для каждогоBlade делает переменную доступной для вас $цикл, объект, который содержит очень полезную информацию о текущей итерации: индекс, является ли это первым или последним поворотом, является ли индекс четным или нечетным, сколько всего итераций имеется или даже доступ к родительскому циклу в случае вложенных циклов, использующих $loop->parent.

Наследование шаблонов, макеты и разделы

В реальных приложениях вам не нужно повторять заголовки, меню или нижние колонтитулы в каждом представлении. Blade позволяет определить мастер-макет (обычно он хранится в) resources/views/layouts/master.blade.php), который наследуют все страницы. В макете вы определяете «пустые» области с помощью @yield а остальная часть общего HTML остается стабильной.

Чтобы использовать этот макет из дочернего представления, вам просто нужно указать @extends('layouts.master') и объявите разделы, которые вы хотите заполнить, используя @раздел y @endsection, каждый @yield('nombre') степень магистра будет соответствовать @section('nombre') по мнению дочери.

Кроме того, директива `@parent` позволяет не только переопределять раздел, но и добавлять контент выше или ниже того, что определено в макете . Это очень полезно для боковых панелей или блоков, которые вы хотите расширить, а не заменить.

Если вам нужно включить повторно используемые фрагменты HTML без полного наследования, Blade предоставляет @включать и целое семейство связанных директив: @includeIf, @includeWhen, @includeUnless y @includeFirstкоторые позволяют вам условно включать подвиды или выбирать первый из существующих в списке возможных маршрутов.

В случаях, когда для каждого элемента коллекции повторяется небольшой фрагмент кода, директива `@each` объединяет `foreach` и `include` в одну строку и даже может определить альтернативное представление на случай, если коллекция изначально пуста.

Компоненты, слоты и атрибуты лезвия

Компоненты Blade — это естественная эволюция макетов, и они позволяют инкапсулировать многократно используемые элементы интерфейса (кнопки, оповещения, карточки, формы и т. д.) с собственной логикой, свойствами и слотами, а также контентом, который можно внедрять извне, используя синтаксис, очень близкий к современным компонентам фреймворков JavaScript.

Существует два основных типа компонентов: основанный на классе (расположен в app/View/Components, созданный с помощью php artisan make:component) и анонимныйкоторые можно увидеть только в resources/views/components без связанного класса. В обоих случаях они отображаются в представлениях с метками типа <x-alert /> o <x-forms.input />.

Компоненты на основе классов получают данные через HTML-атрибуты (С kebab-case в поле зрения и camelCase в конструкторе), представлены в компонентном представлении как публичные свойства и могут выбрать метод shouldRender() для условного решения, следует ли их показывать.

Для гибкого контента компоненты имеют функцию слотыОсновной контент доступен как $slot в шаблоне компонента и слоты с именем определяются с помощью <x-slot name="titulo">...</x-slot> При использовании компонента. Изнутри вы можете вызывать методы компонента через $component и даже проверить, пуст ли слот, с помощью $slot->isEmpty() или если у него есть реальное содержание $slot->hasActualContent().

Компоненты также элегантно управляют дополнительные атрибуты которые не соответствуют свойствам конструктора (например class, id, data-*Все это сгруппировано в доступный «мешок атрибутов» с $attributesкоторый вы можете визуализировать как есть или манипулировать такими методами, как merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().

Кроме того, Blade включает специальные директивы для типичного HTML-кода форм: @checked , @selected , @disabled , @readonly и @required , которые выводят соответствующий атрибут только в том случае, если полученное ими условие истинно.

Макеты с использованием компонентов и классического наследования

В современном Laravel все чаще глобальный макет приложения определяется как Компонент лезвия (например, <x-layout>) вместо использования только классического наследования @extendsТаким образом, макет может получать слоты, атрибуты и свойства, как и остальные компоненты.

Типичный шаблон предполагает создание компонента Планировка c php artisan make:component LayoutОпределите базовую структуру HTML (заголовок, ссылки CSS, навигация, нижний колонтитул) в вашем шаблоне и используйте {{ $slot }} для внедрения основного контента. При необходимости можно указать именованный слот. title таким образом, чтобы каждая страница имела свое название в декларативной форме.

С другой стороны, «классический» вариант все еще существует. наследование шаблонов через @extends, @section y @yieldЭто широко применялось до популяризации компонентов. Вы можете продолжать комбинировать оба подхода, используя компонентную компоновку для всего, или придерживаться традиционного наследования, если ваш проект уже настроен таким образом.

В обоих случаях цель одна и та же: избежать повторения HTML-шаблона в каждом представлении , поддерживать единый источник достоверной информации о макете и позволить каждой странице сосредоточиться исключительно на своем конкретном содержимом.

Сеанс, аутентификация, среда и авторизация в Blade

Blade отлично интегрируется с остальной частью фреймворка, поэтому его возможности не ограничиваются только рендерингом HTML: он также предоставляет высокоуровневые директивы для взаимодействия с сессией, системой аутентификации, средой приложения и правилами авторизации.

Для аутентификации используются директивы, такие как @auth и @guest , которые отображают свой контент только в том случае, если пользователь аутентифицирован или является гостем, соответственно. Кроме того, в качестве аргумента можно указать конкретный механизм аутентификации для уточнения используемого контекста аутентификации.

Лас- директивы по охране окружающей среды в качестве @production o @env('local') Они позволяют обуславливать разделы представления в зависимости от текущей среды Laravel. Это очень полезно, например, для отображения баннеров, отладочных трассировок или скриптов только в локальной или тестовой среде.

Что касается сессий, директива `@session` позволяет легко проверить, существует ли ключ сессии, и если да, то предоставить его значение через переменную `$value` . Это элегантно решает классический случай с всплывающими сообщениями или оповещениями.

Для авторизации политик и шлюзов Blade предоставляет @может, @не могу y @cananyС их помощью можно отображать или скрывать кнопки, ссылки или целые блоки в зависимости от того, есть ли у пользователя разрешение на выполнение определенного действия с моделью или классом. В сочетании с @guest o @authОни позволяют создавать гораздо более безопасные и понятные интерфейсы.

Формы, проверка и обработка ошибок в представлениях

При переходе от статических представлений к формам вы действительно оцените удобство Blade. Laravel требует включения CSRF-токена во все формы, изменяющие данные, и чтобы избежать необходимости вручную писать скрытое поле, существует директива `@csrf` , которая генерирует поле ввода с соответствующим токеном.

HTTP-методы, такие как PUT, PATCH или DELETE Они моделируются через скрытое поле _method, и Blade делает его доступным для вас @метод('PUT') (или PATCH/DELETE) для его автоматической генерации в форме.

Показывать ошибки проверки Директива существует @ошибкакоторая связана с определённым полем. В нём доступна переменная. $ сообщение с текстом ошибки. Поскольку это фактически скомпилированный оператор if, вы можете использовать @else для отображения альтернативного контента при отсутствии ошибок.

Объект $ошибки Он всегда присутствует в представлениях и группирует все сообщения проверки для текущего запроса. Он легко интегрируется с помощником. old(), что позволяет «заново заполнить» форму значениями, отправленными пользователем после неудачной проверки, сохраняя записи и наглядно отображая ошибки.

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

Стеки в Blade: @stack, @push, @prepend и концепция hasStack

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

Директива `@stack('name')` указывает, куда будут помещены все фрагменты, связанные с этим стеком. В отличие от этого, в любом другом представлении вы можете использовать `@push('name')` для перемещения контента в конец стека или `@prepend('name') ` для перемещения его в начало. Это часто используется для скриптов и стилей, специфичных для страницы.

Представьте, например, что в вашем макете есть что-то вроде этого <head> и в конце <body>:

@stack('styles')
...
@stack('scripts')

Затем, в конкретном представлении, требующем дополнительного JavaScript , можно сделать следующее:

@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush

Это позволяет избежать необходимости знать каждый скрипт или стиль на каждой странице ; определяются только стеки, и дочерние представления располагают в стеке то, что им нужно. Также есть `@pushIf` для добавления контента на основе логического условия без необходимости писать весь оператор `if`.

В этом контексте многим разработчикам не хватает директивы типа `@hasStack` или подобной , которая позволила бы им проверить, содержит ли данный стек содержимое, прежде чем его отображать. Хотя Blade не включает директиву с таким названием по умолчанию, идея ясна: иметь возможность делать что-то вроде «если стек скриптов пуст, не выводить дополнительные метки» или «если в стеке метаданных есть элементы, обернуть их в определенный блок».

Сегодня достичь эквивалентного поведения можно, дополнить директивы стека логикой в ​​макете или с помощью специальных помощников, или даже с помощью наших собственных зарегистрированных директив через Blade::directive()Таким образом можно имитировать директиву hasStack, которая выполняет внутренний запрос к стеку, прежде чем решить, какой HTML-код следует сгенерировать.

JSON, JavaScript и вспомогательные директивы в Blade

Во многих представлениях Laravel необходимо передавать данные из бэкенда в JavaScript. Обычно это включает в себя выполнение json_encode() массива или коллекции и оставить его внутри встроенного скрипта, но это не всегда безопасно и удобно. В Laravel это упрощается с помощью вспомогательного метода Js::from(), который сериализует и корректно экранирует значения PHP в JSON для встраивания в HTML.

Когда вы отображаете сложные данные в браузере, Js::from() Это позволяет избежать проблем с кавычками или специальными символами и возвращает выражение JSON.parse() Безопасно для включения в атрибуты или скрипты. Передача сложных выражений внутри директивы не рекомендуется, поскольку Blade использует регулярные выражения при их компиляции, и это может привести к неожиданным сбоям.

Кроме того, Blade позволяет определять комментарии шаблонов , которые не передаются в итоговый HTML-код (в отличие от классических HTML-комментариев), а также блоки @php … @endphp , в которых можно выполнять небольшие фрагменты чистого PHP-кода, когда это абсолютно необходимо. Вы даже можете использовать @use для импорта классов в представление или присвоения им псевдонимов, что удобно при работе со вспомогательными функциями или очень специфическими компонентами.

Если вы достигли точки, когда вам нужна узкоспециализированная функциональность эха для определенных объектов, вы можете зарегистрировать пользовательские обработчики эха c Blade::stringable()так что при отображении определенного объекта Blade вызывает ваш обратный вызов вместо магического метода __toString() класса.

Представления ошибок, фрагменты и пользовательские директивы

Laravel позволяет вам настраивать просмотры ошибок: просто создайте файлы в resources/views/errors с HTTP-кодом в качестве имени (например, 404.blade.php o 500.blade.phpКаждый раз при возникновении этой ошибки вместо универсального шаблона из фреймворка будет использоваться ваш шаблон.

Для случаев, когда вы работаете с такими инструментами, как Turbo или HTMLX, и просто хотите вернуть конкретные фрагменты представленияBlade предлагает директивы @fragment … @endfragment в сочетании с такими методами, как view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Таким образом, вы можете повторно использовать один и тот же шаблон целиком и извлекать из него только те части, которые вам нужны в зависимости от контекста.

Если вам недостаточно репертуара директив, вы всегда можете создать свои собственные с помощью Blade::directive()Обычной практикой является их регистрация с использованием метода boot() de AppServiceProvider или через выделенного провайдера. Компилятор Blade передаст вам выражение внутри директивы как строку, а вы вернёте PHP-код, который хотите сгенерировать после компиляции.

Для простых индивидуальных условий также есть Blade::if()который создаёт условные директивы в одной строке. Например, можно определить @disk('s3') для проверки, является ли диск приложения по умолчанию S3, а затем использовать его в любом представлении, как если бы это была собственная директива.

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

Глубокое освоение Blade — от базового синтаксиса до продвинутых компонентов, директив авторизации, валидации, окружений и, прежде всего, управления стеком — позволит вам создавать модульные, безопасные, согласованные и простые в обслуживании представления , где такая директива, как hasStack, в будущем органично впишется для дальнейшего расширения контроля над тем, что внедряется в каждую область вашей компоновки.