Интернационализация сообщений

Интернационализация (i18n) является ключевым аспектом при разработке веб-приложений, ориентированных на глобальную аудиторию. В контексте Polymer, подход к i18n строится на использовании специализированных библиотек и механизмов для управления локализованными ресурсами, интеграции их в компоненты и динамического обновления текста в пользовательском интерфейсе.

Основные принципы локализации

Локализация включает перевод текстов, форматирование дат, чисел и валют в зависимости от региона пользователя. В Polymer это реализуется через хранение текстовых ресурсов в виде JSON-файлов или JavaScript-объектов, где ключи соответствуют идентификаторам сообщений, а значения — переведённым строкам.

Ключевые аспекты:

  • Отделение текста от логики компонентов.
  • Динамическая подгрузка ресурсов в зависимости от выбранного языка.
  • Поддержка fallback-языка при отсутствии перевода.

Использование библиотеки @polymer/iron-localize

Одним из стандартных решений для i18n в Polymer является пакет @polymer/iron-localize, который обеспечивает механизм локализации через миксины и события.

Установка и подключение:

import { html, PolymerElement } from '@polymer/polymer';
import { IronLocalizedMixin } from '@polymer/iron-localize/iron-localized-mixin.js';

Создание локализованных ресурсов:

Ресурсы хранятся в JSON-формате:

{
  "en": {
    "greeting": "Hello, {name}!",
    "date_format": "MM/DD/YYYY"
  },
  "ru": {
    "greeting": "Привет, {name}!",
    "date_format": "DD.MM.YYYY"
  }
}

Инициализация локализации в компоненте:

class MyLocalizedComponent extends IronLocalizedMixin(PolymerElement) {
  static get template() {
    return html`
      <div>{{localize('greeting', {name: 'Алексей'})}}</div>
    `;
  }

  static get properties() {
    return {
      resources: {
        type: Object,
        value: () => ({
          'en': { 'greeting': 'Hello, {name}!' },
          'ru': { 'greeting': 'Привет, {name}!' }
        })
      }
    };
  }
}
customElements.define('my-localized-component', MyLocalizedComponent);

В этом примере метод localize автоматически подставляет значение из текущей локали, заменяя шаблонные параметры.

Динамическое переключение языка

Для поддержки смены языка в приложении можно использовать свойство language миксина IronLocalizedMixin. При изменении этого свойства все компоненты, использующие localize, автоматически обновляют отображаемый текст.

this.language = 'ru';

Это позволяет реализовать интерфейс, где пользователь может выбирать язык без перезагрузки страницы.

Форматирование дат и чисел

Для корректного отображения дат и чисел в соответствии с локалью рекомендуется использовать встроенный объект Intl:

const date = new Date();
const formattedDate = new Intl.DateTimeFormat(this.language).format(date);

const number = 123456.78;
const formattedNumber = new Intl.NumberFormat(this.language, { style: 'currency', currency: 'RUB' }).format(number);

Intl обеспечивает адаптацию к региональным стандартам, включая порядок дней, разделители тысяч, символ валюты и др.

Структура проекта с локализацией

Для удобства управления локализованными ресурсами рекомендуется организовать проект следующим образом:

/src
  /components
    my-localized-component.js
  /i18n
    en.json
    ru.json
    es.json

В компоненте ресурсы можно импортировать динамически:

import en from '../i18n/en.json';
import ru from '../i18n/ru.json';

this.resources = { en, ru };

Это облегчает поддержку нескольких языков и позволяет добавлять новые локали без изменения логики компонентов.

Поддержка fallback-языка

Fallback необходим для случаев, когда перевод отсутствует. IronLocalizedMixin позволяет указать запасной язык через свойство fallbackLanguage:

this.fallbackLanguage = 'en';

Если строка не найдена для текущего языка, автоматически используется версия из fallback-языка, что предотвращает появление пустого текста в интерфейсе.

Динамические сообщения с параметрами

Полезной практикой является использование шаблонов в сообщениях:

{
  "en": { "welcome": "Welcome, {username}!" },
  "ru": { "welcome": "Добро пожаловать, {username}!" }
}

Метод localize позволяет передавать параметры:

this.localize('welcome', { username: 'Ольга' });

Это упрощает работу с переменными, такими как имена пользователей, даты, суммы и другие динамические данные.

Адаптация компонентов с внешними библиотеками

Polymer легко интегрируется с внешними i18n-библиотеками, например i18next, для сложных сценариев, требующих асинхронной загрузки языковых пакетов или работы с серверными API. В этом случае локализация компонента реализуется через вызовы методов библиотеки и биндинг к свойствам элемента.

Интернационализация в Polymer строится на строгом разделении логики и текстовых ресурсов, использовании миксинов для динамического обновления и поддержке шаблонов сообщений с параметрами. Такой подход обеспечивает масштабируемость приложения и удобство добавления новых языков без изменения структуры компонентов.

Оглавление