Сегодня я хочу рассказать о поддержке нескольких языков в клиентской части web приложений.
Прежде всего, определимся с задачей.
Допустим, что на стороне сервера поддержку нескольких языков мы уже реализовали. Действительно, задача тривиальная. Большинство современных фреймворков содержит специальные библиотеки для работы с многоязычными приложениями. Поэтому вам нужно только выбрать соответствующий язык и написать файлы переводов.
И если наше приложение не использует JavaScript, то можно считать задачу решенной.
Но на сегодняшний день JS используется все чаще и в основном для создания интерфейса, содержащего множество надписей, сообщений и т.п.
Кроме того, в идеале мы должны указывать язык интерфейса только один раз, на стороне сервера. Например, во время регистрации пользователь указывает наиболее удобный для него язык, и мы сохраняем его в базе.
В дальнейшем при входе пользователя мы определяем язык и используем его и для клиентской, и для серверной частей приложения.
Теперь рассмотрим решение.
1) Создаем файлы переводов для каждого языка. Например,
text-ru.js
text-en.js
Примерное содержимое файлов может быть таким.
window.tr = {
mes1:"Сообщение 1"
, mes2:"Сообщение 2"
, mes3:"Сообщение 3"
};
?
window.tr = {
mes1:"Message 1"
, mes2:"Message 2"
, mes3:"Message 3"
};
Тут мы создали глобальный хеш (window.tr) и сохранили в нем текст, который нужно перевести.
Примечание. Если вы используете библиотеку вроде jQuery, то можно использовать глобальную переменную $ (она же jQuery).
(function(s) {
s.tr = {
mes1:"Сообщение 1"
, mes2:"Сообщение 2"
, mes3:"Сообщение 3"
};
})(jQuery);
2) Нам нужно определить какой скрипт с переводами подключать. Для этого мы можем использовать примерно следующий php скрипт
<?php
$curLang = 'russian';
if ($curLang == 'russian') {
$langPrefix = 'ru';
}
else {
$langPrefix = 'en';
}
?>
<script src="js/i18n/text_<?php echo $langPrefix; ?>.js" type="text/javascript"></script>
Естественно, этот код будет меняться в зависимости от того, какие библиотеки или фреймворки вы используете, но идея будет той же.
Примечание. Файлы с переводами должны быть загружены до скриптов, которые их используют.
3) Можно пользоваться
Например, так
alert(window.tr.mes2);
или для jQuery варианта
alert($.tr.mes2);
Успехов!