Как легко вызывать модули JavaScript из PHP?

Вы наверняка решали ее много раз, но решение было не очень привлекательным. В этом руководстве рассказывается о создании кода JavaScript на PHP с использованием библиотеки BigPipe, вдохновленной архитектурой Facebook.

Цель этой библиотеки — быстро сократить постоянно повторяющийся код для работы с DOM и улучшить коммуникационный барьер между PHP и JavaScript.

Требования

- PHP 7.1 или выше
- Node 8, 10+.
- Webpack

Монтаж

  1. Установите пакет композитора:
    $ composer require richarddobron/bigpipe
  2. Установите пакет npm:
    $ npm install bigpipe-util
  3. Добавьте эти строки в /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- использовать