Как легко вызывать модули JavaScript из PHP?
Вы наверняка решали ее много раз, но решение было не очень привлекательным. В этом руководстве рассказывается о создании кода JavaScript на PHP с использованием библиотеки BigPipe, вдохновленной архитектурой Facebook.
Цель этой библиотеки — быстро сократить постоянно повторяющийся код для работы с DOM и улучшить коммуникационный барьер между PHP и JavaScript.
Требования
- PHP 7.1 или выше
- Node 8, 10+.
- Webpack
Монтаж
- Установите пакет композитора:
$ composer require richarddobron/bigpipe
- Установите пакет npm:
$ npm install bigpipe-util
- Добавьте эти строки в /path/to/resources/js/app.js:
4. Создайте файл /path/to/resources/js/ServerJS.js
— этот шаг необязателен, но если вы его пропустите, используйте его на следующем шаге: require("bigpipe-util/ServerJS")
5. Добавьте эти строки в нижний колонтитул страницы:
Что все может быть Ajaxifed?
Ссылки<a href="#"
ajaxify="/ajax/remove.php"
rel="async">Remove Item</a>
Формы<form action="/submit.php"
method="POST"
rel="async">
<input name="user">
<input type="submit" name="Done">
</form>
Диалоги<a href="#"
ajaxify="/ajax/modal.php"
rel="dialog">Open Modal</a>
ДОМОПС API
- setContent: устанавливает содержимое элемента.
- appendContent: вставляет содержимое как последний дочерний элемент указанного элемента.
- prependContent : вставить содержимое как первый дочерний элемент указанного элемента.
- insertAfter: вставить содержимое после указанного элемента.
- insertBefore: вставить содержимое перед указанным элементом.
- удалить: удалить указанный элемент и его дочерние элементы.
- заменить: заменить указанный элемент содержимым.
- eval: оценивает код JavaScript, представленный в виде строки.
ДИАЛОГ API
- setController: устанавливает контроллер класса JavaScript — если вам нужно зарегистрировать дополнительные прослушиватели событий (показать, показать, скрыть, скрыть) или логику.
- setTitle : Задает заголовок диалога.
- setBody: Задает текст диалога.
- setFooter: Задает нижний колонтитул диалога.
- setDialog: устанавливает все содержимое диалога.
- closeDialogs: закрывает все открытые диалоги.
- closeDialog : закрыть только текущий диалог.
- диалог: визуализировать определенный диалог.
Обновить и перенаправить
Полезная нагрузка
API-интерфейс BigPipe
- require: вызвать метод модуля JavaScript. Вы можете вызвать определенный метод класса или обычную функцию с пользовательскими аргументами.
Пример PHP-кода:
Пример кода JavaScript:
export default class SecretModule {
run(first, second) {
// …
}
}
- диалог: открывает диалог, но может работать с несколькими диалогами одновременно.
Пример PHP-кода:
- транспорт: с помощью маркеров транспорта вы можете отправлять HTML-контент, а также преобразовывать его в объекты JavaScript (такие как карта, набор или элемент).
Пример PHP-кода:
Демонстрационное приложение с примерами
- Демо-приложение написано на Laravel, но эта библиотека не зависит от фреймворка.
-⚠️ Демонстрационный сервер не поддерживает HTTPS, поэтому вам может потребоваться подтвердить исключение безопасности.
- http://bigpipe.xf.cz
- https://github.com/richardDobron/bigpipe-php
- https://github.com/richardDobron/bigpipe- использовать