От автора: привет, друзья! Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.
Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.
Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.
Пакет, который сегодня задействуем, именуется следующим образом: Laravel-JS-Localization. Ознакомиться с ним вы можете по ссылке. Его установка довольно тривиальна. Все, что нужно — это выполнить команду:
composer require mariuzzo/laravel-js-localization
Помимо этого, установим еще пакет под названием Lang.js от автора предыдущего расширения, но только во front-end часть.
npm install lang.js
По большому счету, это логика, которая необходима для возвращения конкретной строки из выбранной локализации. Как ни странно, она уже есть в установленном ранее пакете laravel-js-localization. Вы можете спросить: зачем же будем устанавливать ее повторно? Дело в том, что логика-то есть, но она добавляется в структуру файла с данными по локализации, а это не совсем хорошо и неудобно в работе. Поэтому будем использовать модуль Lang.js и отдельно от него информацию о выбранной локализации.
После установки в консоли можем выполнить команду:
php artisan lang:js resources/js/translation.js
При этом файл translation.js будет содержать в себе информацию по доступным файлам локализации и их содержимому.
Далее необходимо создать модуль, который будет предоставлять интерфейс для работы со сформированным файлом translation.js.
import lang from 'lang.js';
import translations from './translations'; const Lang = new lang({ messages:translations, locale : 'en', fallback : 'en'
}); export default Lang;
По сути, этот модуль считывает содержимое файла translation.js и создает объект Lang (он описан в пакете Lang.js, установленном ранее), который содержит в себе методы по работе с локализациями. В качестве параметров конструктору необходимо передать массив данных локализации (в нашем случае это содержимое файла translation.js), локализацию по умолчанию и альтернативную локализацию.
Далее для выбора некоторой строки по соответствующему ключу локализации достаточно вызвать на исполнение метод get():
Lang.get(pagination.next);
Собственно, на этом текстовая версия урока завершена. В видеоверсии вы найдете более подробную информацию и пояснения к каждой написанной строке кода. Поэтому ждем вас там. Всего вам доброго и удачного кодирования!
