Мультиязычность на клиентской стороне

#javascript

В немаленьком приложении на JavaScript задумал сделать мультиязычность. 
Пока остановился на следующем: в БД хранить пакеты языков,при авторизации(уже реализовано)
отдавать нужный пакет, после чего генерируется тело приложения, в котором нужные фразы
представить, например, в виде строковых индексов &%45435; или делать вставки на функцию
с параметрами, которая будут возвращать образованные строки по указанному параметру-массиву.

Что посоветуете?
    

Ответы

Ответ 1

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

cl_lang = function () {
  var languages = {
    1: {name: "Русский", prefix: 'ru', display: true},
    2: {name: 'English', prefix: 'en', display: true},
    3: {name: 'Dutch', prefix: 'nl', display: true}
  };
  var phrases = {
    "head_add_rest": {
      "1": "Добавить ресторан",
      "2": "Add restaurant",
      "3": "Voeg restaurant toe"
    }, .....
  };

  // Если не найдена id фразы или id языка, то будет выведена эта фраза
  var defaultPhrase = "NO PHRASE"; // для продакшена лучше использовать пустую строку ;)

  this.currentLang = 1; // Язык по-умолчанию

  // Изменяет язык элементов интерфейса
  this.changeLangTo = function (in_idLang) {
    this.currentLang = in_idLang;
    var all_langEl = document.querySelectorAll('[data-id_phrase]');
    var el_len = all_langEl.length;
    for (var i = 0; i < el_len; i++) {
      var my_phrase = phrases[all_langEl[i].dataset.id_phrase] ? phrases[all_langEl[i].dataset.id_phrase][this.currentLang]
: null;
      all_langEl[i].innerHTML = my_phrase ? my_phrase : defaultPhrase;
    }

    return true;
  };

  // Возвращает фразу по id на языке in_idLang или на языке по-умолчанию
  this.getPhrase = function (in_idPhrase, in_idLang) {
    in_idLang = in_idLang || this.currentLang;
    var my_phrase = phrases[in_idPhrase] ? phrases[in_idPhrase][in_idLang] : null;

    return my_phrase ? my_phrase : defaultPhrase;
  };

};


Соответственно, ко всем html-элементам, которые подлежат переводу, добавляется data-id_phrase="id_phrase".
Например,