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

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

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"      : "Опции"
}

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

203 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. не спорю, у всего есть свои плюсы и минусы, но когда надо часто поправлять много раз где, в моем случае когда разрабатывалась игра и локализации заполнялись по ходу разработки и часто приходилось их изменять подправлять, оказалось что в одном файле для меня гораздо удобнее менее геморнее… в общем по ситуации выбирать

  4. I’m really enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did
    you hire out a developer to create your theme? Great work!

  5. Hi! I know this is kind of off topic but I was wondering
    if you knew where I could get a captcha plugin for my
    comment form? I’m using the same blog platform
    as yours and I’m having difficulty finding one? Thanks a lot!

  6. You’re so interesting! I don’t think I have read a single thing like that before.
    So wonderful to discover another person with a few genuine thoughts on this topic.
    Seriously.. thank you for starting this up.

    This website is something that’s needed on the web, someone with some originality!

  7. An intriguing discussion is worth comment. I believe that you ought to write more about this issue, it might
    not be a taboo matter but usually people don’t talk about these topics.
    To the next! All the best!!

  8. Hey! This is my first comment here so I just wanted to give a quick shout out and
    say I genuinely enjoy reading your blog posts. Can you suggest any other
    blogs/websites/forums that go over the same subjects? Thanks for your
    time!

  9. I’ll right away grasp your rss feed as I can not find your e-mail subscription link or e-newsletter service.
    Do you’ve any? Kindly let me know so that I may subscribe.
    Thanks.

  10. Undeniably consider that which you stated. Your favorite reason appeared to be
    at the internet the simplest factor to take note of. I
    say to you, I certainly get irked at the same time as folks think about worries
    that they just do not realize about. You controlled to hit the nail
    upon the highest and also outlined out the entire thing with no need side effect , folks can take a signal.
    Will likely be back to get more. Thank you

  11. Hello there! This blog post couldn’t be written much better!
    Going through this article reminds me of my previous roommate!
    He always kept talking about this. I’ll send this information to him.
    Pretty sure he will have a great read. Thank you
    for sharing!

  12. Hello, I think your site might be having browser compatibility issues.
    When I look at your blog in Safari, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads
    up! Other then that, very good blog!

  13. Incredible! This blog looks exactly like my old one!
    It’s on a completely different subject but it has pretty much the same page layout and design. Excellent
    choice of colors!

  14. It’s a shame you don’t have a donate button! I’d definitely donate to this superb blog!
    I guess for now i’ll settle for book-marking and adding your RSS
    feed to my Google account. I look forward to fresh updates and will share this site with my Facebook group.
    Chat soon!

  15. I loved as much as you will receive carried out right
    here. The sketch is tasteful, your authored subject matter stylish.

    nonetheless, you command get got an nervousness over that you wish be delivering the following.
    unwell unquestionably come further formerly again as
    exactly the same nearly a lot often inside case
    you shield this hike.

  16. Hello there, I believe your web site may be having internet browser compatibility problems.

    When I take a look at your website in Safari, it looks fine however, if opening in I.E.,
    it’s got some overlapping issues. I merely wanted to give you a quick heads up!

    Aside from that, great website!

  17. Good day! This is my first visit to your blog!

    We are a collection of volunteers and starting a new initiative in a
    community in the same niche. Your blog provided us
    beneficial information to work on. You have done a wonderful job!

  18. Hello there! I know this is kinda off topic but I’d figured
    I’d ask. Would you be interested in exchanging links or maybe guest writing
    a blog post or vice-versa? My blog discusses a lot of the same subjects
    as yours and I think we could greatly benefit from each other.
    If you happen to be interested feel free to send me an e-mail.
    I look forward to hearing from you! Great blog by the way!

  19. I am not positive the place you are getting your information, however great topic.

    I must spend a while learning more or understanding more.
    Thanks for fantastic info I used to be searching for this info for
    my mission.

  20. My programmer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs. But he’s tryiong none the less.
    I’ve been using WordPress on numerous websites for about a year and am nervous about
    switching to another platform. I have heard great things about blogengine.net.

    Is there a way I can transfer all my wordpress posts into
    it? Any kind of help would be really appreciated!

  21. I feel this is one of the most important info for me. And i am glad studying your article.
    However should remark on few basic things, The
    web site taste is ideal, the articles is in point of fact nice :
    D. Excellent job, cheers

  22. Have you ever thought about including a little bit more than just your articles?
    I mean, what you say is important and everything.
    But just imagine if you added some great
    pictures or videos to give your posts more, “pop”!
    Your content is excellent but with pics and video clips, this blog could certainly
    be one of the very best in its niche. Fantastic blog!

  23. Simply want to say your article is as surprising. The clearness in your post is just cool and i can assume you
    are an expert on this subject. Well with your permission allow me to grab your feed to
    keep up to date with forthcoming post. Thanks a million and please keep up the
    rewarding work.

  24. ยุคที่ใครๆก็ปรารถนาความสะดวกสบาย บาคาร่าออนไลน์ก็เลยเป็นตัวเลือกที่โคตรดีสำหรับท่าน UFABET มีบาคาร่าให้เลือกเล่นมากมายพวกเราเป็นคาสิโนที่จ่ายจริง ทำเงินได้จริง สมัครง่าย ระบบฝากถอนอัตโนมัติแล้วเจอกันขอรับ

  25. สมัยที่ใครๆก็ประสงค์ความสบายสบาย บาคาร่าออนไลน์ก็เลยเป็นตัวเลือกที่โคตรดีสำหรับท่าน UFABET มีบาคาร่าให้เลือกเล่นมากไม่น้อยเลยทีเดียวพวกเราเป็นคาสิโนที่จ่ายจริง ทำเงินได้จริง สมัครง่าย ระบบฝากถอนอัตโนมัติแล้วเจอกันขอรับ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *