Простая локализация своими руками

Существует большое количество готовых решений по локализации программного обеспечения. В статье «Локализация angular-приложения» мы устанавливали и настраивали плагин для первого Angular, но также рассмотрели общие принципы перевода на разные языки.

Все плагины и решения по локализации очень похоже так как используют одни и те же методы работы. Кратко перечислим здесь этапы из предыдущей статьи:

  1. Специальное выделение слов в шаблоне, которые необходимо перевести на разные языки.
  2. Сохранение перевода на определенный язык в отдельных файлах (может быть json, xml и другие).
  3. Подключение необходимого плагина или написание собственной функции локализации.
  4. Настройка конфигурации (где лежат переводы, язык по умолчанию и так далее).

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

Первым делом, надо выделить строки, которые нужно переводить. Так как мы не будем использовать шаблонные системы, то в чистом HTML это удобнее всего сделать с помощью атрибутов. Мы можем написать атрибут translate и передать ему id для перевода, но данный атрибут не валидный и может быть отброшен некоторыми браузерами. Для создания своих атрибутов есть стандарт data-*, который проходит валидацию, поэтому будем использовать атрибут data-translate. Вы можете придумать любой другой, главное чтобы он начинался с “data-”. Как вы уже поняли, это очень удобный функционал, который используется во многих JavaScript плагинах для различных задач. Таким образом мы например можем выделить для перевода заголовок:

<h1 data-translate=”pageTitle”>Default title</h1>

В атрибуте можно написать стандартное значение, если перевода с указанным id нет.

Конечно в данном случае мы не можем вставлять перевод в атрибуты в HTML напрямую, но можем делать это через JavaScript — все-таки у нас не шаблонная система.

Далее нам нужно создать файл с переводами — в данном примере для простоты будем хранить все в одном файле, но можно конечно разбить по файлам и просто подгружать нужную локализацию через ajax. Сделаем в файле конструктор для создания объекта перевода и его использования где необходимо.

function Translation(lang) {

  lang = lang || ‘en’; // Зададим язык по умолчанию если он не был передан в инициализации

// Объекты с переводами

languages = {};

languages.ru = {pageTitle: ‘Главная страница’};

languages.en = {pageTitle: ‘Home page’};

}

Далее напишем в конструкторе функции по локализации.

function localization() {

for (var key in languages[lang]) {

           if (object.hasOwnProperty(key)) {

             translateHtml(key, languages[lang][key], lang);

           }

       }

}

function translateHtml(translateId, value, lang) {

Var elements = document.querySelectorAll(‘[data-translate=»‘ + translateId + ‘»]’);

If (elements.length > 0) {

for (var i = elements.length; i—;) {

elements[i].innerText = value;

       }

}

   }

Функция localization проходится по объекту с переводом и вызывает функцию translateHtml, которая ищет элементы с атрибутом data-translate и совпадением id перевода. Если элементы найдены, то перебираем их в цикле и внутри тега записываем строку в определенном языке.

Наша функция локализации готова. Вот полный код:

function Translation(lang) {

  lang = lang || ‘en’; // Зададим язык по умолчанию если он не был передан в инициализации

// Объекты с переводами

languages = {};

languages.ru = {pageTitle: ‘Главная страница’};

languages.en = {pageTitle: ‘Home page’};

localization();

function localization() {

for (var key in languages[lang]) {

           if (object.hasOwnProperty(key)) {

             translateHtml(key, languages[lang][key], lang);

           }

       }

}

function translateHtml(translateId, value, lang) {

Var elements = document.querySelectorAll(‘[data-translate=»‘ + translateId + ‘»]’);

If (elements.length > 0) {

for (var i = elements.length; i—;) {

elements[i].innerText = value;

       }

}

   }

 

}

Теперь вызовем ее где нужно с указанием необходимого языка для перевода всех строк на странице:

var translation = new Translation(‘en’);

В примере выше мы передали язык аргументом статически, но обычно делают динамическую переменную, которая выставляется в зависимости от например адреса — http://website.com/<язык> или get параметра http://website.com/page?lang=<язык>.

Таким образом, мы сделали очень простую локализацию, которая, я надеюсь, понятно показывает как работают в ПО переводы на различные языки.