Делаем поддержку мультиязычности в веб-приложении

На самом деле вариантов множество. Начиная с хардкода

if(language == 'ru'){
    alert('Сообщение на русском языке');
} else if(language == 'en') {
    alert('Message in english');
}

и так для каждого текстого блока. Но, как мне кажется, что

По этому я придумал вот такой вот велосипед:

let options = {}; //Переменная с нашими настройками
if(localStorage.getItem('language')){
    options.language = localStorage.getItem('language'); //Если в Local Storage есть наша переменная языка, возьмем от туда
} else {
    options.language = 'en'; //если нет, установим Английский
}

//При нажатии на кнопку смены языка
$('#change-language-button').click(function(){
    checkLanguage();
});

function checkLanguage(){
  if (options.language == 'en') {
    options.language = 'ru';
  } else {
    options.language = 'en';
  } //Меняем язык
  getMessages(options.language);
  localStorage.setItem("language", options.language); //Записываем в Local Storage
}

//Получаем Json со строками из Json файла
function getMessages(lang) {
  $.ajax({
    url    : 'lang/' + lang + '/messages.json',
    dataType: "json",
    success : function (data) {
      msg = data;
      setLanguage();
    }
  });
}
//Присваиваем полученные строки объектам
function setLanguage() {
  $('.controls-header').text(msg.msg_controls);
  $('.options-header').text(msg.msg_options);
  /*Перечисляем наши текстовые блоки*/
}

Создаем папку 'lang', а в ней папки, соответствующие аббревиатурам наших языков. Соответственно в данном примере 'ru' и 'en'. В них создаем файлы messages.json с нашими строками. Например lang/en/messages.json

{
  "msg_controls"    : "Controls:",
  "msg_options"      : "Options:"
}

lang/ru/messages.json

{
  "msg_controls"    : "Управление:",
  "msg_options"      : "Опции"
}

Вы великолепны!

6 thoughts on “Делаем поддержку мультиязычности в веб-приложении”

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

    {

    «msg_controls» : {

    «en»: «Controls:»,

    «ru»: «Управление:»

    } ,

    «msg_options» : {

    «en»: «Options:»,

    «ru»: «Опции»

    }

    }

    и уже в setLanguage

    $('.controls-header').text (msg[lang].msg_controls);

    если брать в расчет что оперируем над текстом, а во всех нынешних вебсерверах deflate по умолчанию включен и

    браузеры тоже 99% умеют, то при транспорте этот файл минимум в 4 раза ужмется

    или нагрузить чутка сервер, хранить локализации в аналогичном пхп массиве и при запросе

    url : 'lang/messages.php?lang=' + lang,

    из исходного пхп массива с локализациями выписывать запрошенную локаль в доп массив по исходному варианту и его уже пропускать через json_encode и выдавать клиенту

  2. милости просим 🙂

    в своем космическом колхозе делал исходный вариант

    при двух-то языках скакать по двум массивам было муторно туда сюда прыгать подправлять

    так что да, если ощущения появятся, как вариант имейте ввиду

    1. ну мне там порядка десяти строк нужно было всего переводить, так что объем не такой великий. и я эту систему в Битриксе подсмотрел — там так же Лэнговые строки хранятся по папкам с названиями идентификаторов языков. плюс этой системы в том, что если нужно добавить новый язык — тупо создаем новую папочку, например «DE», прогоняем наши строки через переводчик и вуаля))

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

Добавить комментарий