Локализация клиентской части web приложений

Владимир | | Ajax, JavaScript, PHP, Web разработка.

Сегодня я хочу рассказать о поддержке нескольких языков в клиентской части 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);

Успехов!

Интересно почитать

Определяем скорость интернета