Front-end в фреймворке Laravel: локализация JS-скриптов

Дата публикации: 2018-11-23

От автора: привет, друзья! Продолжаем разбираться в особенностях разработки front-end в фреймворке Laravel. На прошлом уроке была рассмотрена передача информации по описанным маршрутам во front-end приложение. Казалось бы, этого достаточно. Но есть еще немаловажные параметры, которые также желательно передать — это локализация или статические данные, отображаемые в представлениях как фреймворка, так и front-end приложений. Поэтому с помощью данной статьи давайте научимся локализовать отображаемую информацию в скриптах JavaScript.

Вообще, задача сегодняшнего урока довольно типична и встречается весьма часто при разработке веб-проектов. А это значит, что, скорее всего, есть готовое расширение с неким встроенным функционалом. И это действительно так — более того, подобных «помощников» написано очень много, поэтому сегодня рассмотрим один из них.

Конечно, поставленную задачу можно реализовать и без использования сторонних пакетов. Но хороший разработчик должен уметь как написать что-то с нуля, так и работать с уже готовыми решениями.

Пакет, который сегодня задействуем, именуется следующим образом: Laravel-JS-Localization. Ознакомиться с ним вы можете по ссылке. Его установка довольно тривиальна. Все, что нужно — это выполнить команду:

composer require mariuzzo/laravel-js-localization

1	composer require mariuzzo/laravel-js-localization

Помимо этого, установим еще пакет под названием Lang.js от автора предыдущего расширения, но только во front-end часть.

npm install lang.js

1	npm install lang.js

По большому счету, это логика, которая необходима для возвращения конкретной строки из выбранной локализации. Как ни странно, она уже есть в установленном ранее пакете laravel-js-localization. Вы можете спросить: зачем же будем устанавливать ее повторно? Дело в том, что логика-то есть, но она добавляется в структуру файла с данными по локализации, а это не совсем хорошо и неудобно в работе. Поэтому будем использовать модуль Lang.js и отдельно от него информацию о выбранной локализации.

После установки в консоли можем выполнить команду:

php artisan lang:js resources/js/translation.js

1	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;

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);

1	Lang.get(pagination.next);

Собственно, на этом текстовая версия урока завершена. В видеоверсии вы найдете более подробную информацию и пояснения к каждой написанной строке кода. Поэтому ждем вас там. Всего вам доброго и удачного кодирования!

Метки: laravel