Статьи

Как передать данные PHP и строки в JavaScript в WordPress

Апрель 19, 2019

Хорошей практикой является размещение всех ваших данных в статических строках в ваших PHP-файлах. Если вам позже понадобится использовать некоторые данные в JavaScript, то хорошей практикой будет также поместить ваши данные в качестве атрибутов data-* в ваш HTML. Но в некоторых определенных сценариях у вас нет другого выбора, кроме как передавать строки непосредственно в код JavaScript.

Если вы включаете библиотеку JavaScript, и вы обнаружили, что инициализируете объект JavaScript внутри вашего header.php затем присваиваете данные его свойствам, то эта статья для вас.

Эта статья научит вас, как правильно передавать данные PHP и статические строки в вашу библиотеку JavaScript.

Почему нужно передавать данные в JavaScript

Позвольте мне проиллюстрировать некоторые типичные сценарии необходимости передачи данных в JavaScript. Например, иногда нам нужно вставить эти значения в ваш код JavaScript:

  • URL домашней страницы, администратора, плагина, темы или ajax,
  • Переводимые струны, или
  • Тема или вариант WordPress.

Общий способ передачи данных

Допустим, у нас есть файл jQuery с именем myLibrary.js который мы включим в наш сайт WordPress: 

  var myLibraryObject;

 (функция ($) {
     «использовать строгое»;

     myLibraryObject = {
         home: '', // заполните это позже

         pleaseWaitLabel: '', // заполнить использовать это позже

         someFunction: function () {
             // код, который использует свойства выше
         }
     }
 });

Мы ставим его в файл functions.php со следующим кодом:

1
wp_enqueue_script( ‘my_js_library’, get_template_directory_uri() . ‘/js/myLibrary.js’ );

Теперь вопрос в том, как мы можем заполнить home и, pleaseWaitLabel свойства? Вы могли бы инстинктивно добавить что-то подобное в ваш header.php чтобы получить нужные данные:

01
02
03
04
05
06
07
08
09
10
11
12
<script>
(function( $ ) {
  «use strict»;
 
  $(function() {
 
    myLibraryObject.home = ‘<?php echo get_stylesheet_directory_uri() ?>’;
    myLibraryObject.pleaseWaitLabel = ‘<?php _e( ‘Please wait…’, ‘default’ ) ?>’;
 
  });
}(jQuery));
</script>

Это работает как задумано; Тем не менее, WordPress предоставил нам лучший и более короткий способ сделать это.

Путь WordPress

Рекомендуемый способ передачи данных в JavaScript — использование функции wp_localize_script . Эта функция предназначена для использования после постановки сценария в очередь с помощью wp_enqueue_scripts .

1
wp_localize_script( $handle, $objectName, $arrayOfValues );

Вот параметры:

  • $handle . Дескриптор сценария в очереди для привязки значений к
  • $objectName . Объект JavaScript, который будет содержать все значения $ arrayOfValues
  • $arrayOfValues . Ассоциативный массив, содержащий имя и значения для передачи в скрипт

После вызова этой функции переменная $objectName станет доступной в указанном сценарии.

Реализация wp_localize_script

Давайте настроим предыдущий пример, чтобы использовать наш новый метод передачи данных. Сначала мы ставим скрипт в очередь, затем вызываем wp_localize_script в нашем functions.php :

1
2
3
4
5
6
7
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;

 (функция ($) {
     «использовать строгое»;

     myLibraryObject = {
         someFunction: function () {
             // код, который использует php_vars.home и php_vars.pleaseWaitLabel
         }
     }
 } (JQuery));

Вывод

Используя wp_localize_script , наш код становится проще, а наш header.php чище. Надеемся, что вы можете использовать эту функцию в своем собственном коде и пользоваться ее преимуществами.

Я надеюсь, вам понравилась эта статья. Я высоко ценю любые отзывы, комментарии и предложения.

Будете ли вы использовать это в одном из ваших проектов? Поделитесь своими мыслями ниже!

56
Share: