19 Фев
Как передать данные из PHP в JS
Хорошей практикой является помещение всех ваших данных в статические строки в ваших PHP-файлах. Если вам нужно использовать некоторые данные в JavaScript позже, также хорошей практикой является помещение ваших данных в ваш HTML в виде атрибутов data-*. Но в некоторых случаях у вас нет выбора, кроме как передавать строки непосредственно в ваш код JavaScript. Эта статья научит вас, как правильно передавать данные PHP и статические строки в вашу библиотеку или файл JavaScript. Рассмотрим как передать данные из PHP в JS.
Какие данные может потребоваться передавать данные в JS?
Очень часто, при работе с сайтами построенными на WordPress приходиться передавать следующие данные на обработку и дальнейшую работу с ними в JavaScript файлы.
- URL-адреса домашней страницы, администратора, плагина, темы или AJAX
- переводимые строки (созданные динамически в PHP)
- опции темы или WordPress.
Обычный способ передачи данных.
Предположим, у нас есть файл jQuery с названием myLibrary.js, который мы хотим подключить на нашем сайте WordPress:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
home: '', // populate this later
pleaseWaitLabel: '', // populate use this later
someFunction: function() {
// code which uses the properties above
}
}
});Мы можем подключить его через файл functions.php с помощью следующего кода:
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );Теперь вопрос: как мы можем заполнить свойства home и pleaseWaitLabel? Вы наверное предложили бы добавить в ваш header.php следующий код, чтобы получить нужные данные:
<script>
(function( $ ) {
"use strict";
$(function() {
myLibraryObject.home = '<?php echo get_stylesheet_directory_uri() ?>';
myLibraryObject.pleaseWaitLabel = '<?php _e( 'Please wait..', 'default' ) ?>';
});
}(jQuery));
</script>И этот подход бы сработал отлично. Но есть более правильный подход, который мы сейчас рассмотрим.
Старый способ: использование функции wp_localize_script.
Старый способ передачи данных в JavaScript заключается в использовании функции wp_localize_script. Эта функция должна использоваться после того, как вы добавили скрипт, используя wp_enqueue_scripts. Давайте рассмотрим синтаксис этой функции и ее аргументы.
wp_localize_script( $handle, $objectName, $arrayOfValues );- $handle — Обращение к подключенному скрипту, к которому нужно привязать значения.
- $objectName — JavaScript объект, который будет содержать все значения из $arrayOfValues.
- $arrayOfValues — Ассоциативный массив, содержащий имена и значения, которые нужно передать в скрипт.
После вызова этой функции переменная $objectName становится доступной в указанном скрипте.
Давайте перепишем ранее приведенный пример, чтобы использовать новый способ передачи данных. Сначала мы подключаем скрипт, а затем вызываем wp_localize_script в файле functions.php:
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
$dataToBePassed = array(
'home' => get_stylesheet_directory_uri(),
'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'my_js_library', 'php_vars', $datatoBePassed );Наши значения home и pleaseWaitLabel теперь могут быть получены внутри нашего файла jQuery через переменную php_vars.
Так как мы использовали wp_localize_script, нам не нужно ничего запускать (или подключать) в нашем файле header.php, и мы можем безопасно удалить содержимое тега <script>. Мы также можем удалить дополнительные свойства из нашего jQuery скрипта. Теперь он может быть упрощен до следующего:
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
someFunction: function() {
// code which uses php_vars.home and php_vars.pleaseWaitLabel
}
}
}(jQuery));Новый способ: использование функции wp_add_inline_script
Новый и рекомендуемый способ — использовать функцию wp_add_inline_script. Эта функция должна использоваться после того, как вы добавили скрипт с помощью wp_enqueue_scripts. Давайте рассмотрим синтаксис и аргументы этой функции.
wp_add_inline_script( $handle, $data, $position = 'after' );- $handle — Название скрипта, к которому добавляется встроенный скрипт.
- $data — Строка, содержащая JavaScript-код, который будет добавлен.
- $position — Определяет, следует ли добавить встроенный скрипт до или после указанного скрипта.
Таким образом, эта функция добавляет встроенный скрипт перед или после вашего кода JavaScript. Давайте изменим пример, который мы рассмотрели в предыдущем абзаце, используя версию wp_add_inline_script.
wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );
$dataToBePassed = array(
'home' => get_stylesheet_directory_uri(),
'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_add_inline_script( 'wpdocs-my-script', 'const php_vars = ' . json_encode( $dataToBePassed ), 'before' );
Теперь значения home и pleaseWaitLabel можно получить внутри файла jQuery через переменную php_vars. Эти переменные в JavaScript будут доступны как php_vars.home и php_vars.pleaseWaitLabel, как показано в следующем фрагменте кода.
var myLibraryObject;
(function($) {
"use strict";
myLibraryObject = {
someFunction: function() {
console.log(php_vars.home);
console.log(php_vars.pleaseWaitLabel);
}
}
}(jQuery));Заключение. Как передать данные из PHP в JS
Используя wp_add_inline_script, наш код стал проще, а header.php — чище, без громоздких кусков непонятного кода. Надеюсь, что вы сможете использовать эту функцию в своем коде и получить ее преимущества. Так же будет полезно помнить и про другой метод, использование функции wp_localize_script, который так же часто встречается в различных темах и плагинах для WordPress.
