Как правильно делать локализацию JavaScript-приложений?

Question

[Petr Flaks]

Здравствуйте!

Я делаю расширение для Google Chrome, которое, как известно, пишется на HTML и JavaScript. Расширение у меня мультиязычное: на английском и на русском. Но передо мной встала проблема: я не знаю, как правильнее всего сделать локализацию расширения, чтобы это не было колхозом, а также чтобы из-за выбранного решения не пришлось в будущем наступать на какие-нибудь грабли.

Собственно, это к вопросу не относится, но уточню, что в Google Chrome переводы записываются в JSON-файл:

"local_storage_usage": {
	"message": "Local storage"
},
"last_error_occured": {
	"message": "Extension last error occured"
},
"no_error": {
	"message": "There is no error."
},
...

А потом вызываются встроенным методом chrome.i18n.getMessage("local_storage_usage"). Я, не зная как сделать лучше, создаю страницы примерно таким образом:

$("#debug").html('<h1 class="h3">' + chrome.i18n.getMessage("debug_page") + '</h1>' +
'<h2 class="h4">' + chrome.i18n.getMessage("key_permissions") + '</h2>' +
'<div id="permissions">' + chrome.i18n.getMessage("loading") + '</div>' +
'<hr>' +
'<p>' + chrome.i18n.getMessage("reset_alarm_warn") + '</p>');

Но такой подход не кажется мне практичным. Подскажите, как бы вы поступили на моем месте?

Спасибо.

Comments

[littleguga]

>Расширение для chrome
>Использовать jquery
Зачем? Зачем лишняя нагрузка?

[Petr Flaks]

littleguga: popup-window ничем не отличается от обычной HTML-страницы. От jQuery я использую много чего, не только селекторы, поэтому использование библиотеки считаю оправданным.

[littleguga]

terron: я это знаю. Вы грузите лишние 40кб(пусть даже с диска, а не из сети), это лишняя нагрузка. Чистый js дает все те же самые возможности, что есть в jquery. Jquery нужен для поддержки старых браузеров, к которым хром ну никак не относится. Возьмите хотя бы уж zepto.js, он в 5 раз меньше, хоть немного оптимальнее нагрузка будет.

[Алексей]

littleguga: Расширению не нужно грузиться за 2 секунды, как сайту - оно имеет право устанавливаться как программа в первый раз, так что экономить на спичках - не лучшая идея. Плюс jQuery существенно менее многословный чем JavaScript - этого более чем достаточно для его использования, если хотите писать хорошо поддерживаемый код.

[Алексей]

Он конечно сократит некоторую часть кода (причём не ту что сократит jQuery), но суть моего комментария это не меняет - не фиг писать с нуля велосипеды (если это не этап обучения) и оптимизировать там где не надо, если есть готовые удобные пути.

[littleguga]

Алексей: есть zepto.js, это jquery без поддержки старых браузеров. Поддерживаемый код можно писать и на чистом js.

[littleguga]

Алексей: какие велосипеды? Есть встроенные функции в js вроде addEventListener и т.д., которые нативные, в данном случае jquery велосипед(пусть и чужой).

[Алексей]

littleguga: Перепишите без jQuery что-нибудь мифическое типа этого: $('.my-element').find('.first').addClass('yellow').show().append('Yay!').val('Trum-tum-tum'). Сколько строк получилось? И так ведь почти в любом месте где используется jQuery - одну строку менять на несколько. (Хреновый пример, но суть отражает) В любом случае рано или поздно встанет вопрос о том чтобы писать обёртку над JS для частых операций. И зачем это нужно, когда можно использовать готовое протестированное решение?

По-поводу Zepto - API, как я понимаю, не 100% совместимо с jQuery - есть риск что сторонняя библиотека требующая jQuery (которых обычно несколько в проектах) не сработается с ней. Зачем париться и придумывать себе новые баги? А вот на этапе оптимизации, или в мобильной версии сайта, можно попробовать прикрутить.

[littleguga]

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

Answer 1

[Алексей]

Чтобы не было колхозом - в первую очередь прикрутите шаблонизатор - рекомендую Handlebars. В остальном - вроде норм.

Comments

[Petr Flaks]

Посидел, разобрался, с Handlebars код действительно выглядит очень цивильно.

Создал хелпер "loc":

Handlebars.registerHelper("loc", function(str, args) {
	return new Handlebars.SafeString(chrome.i18n.getMessage(str));
});

И использую вот так: <h1>{{loc 'settings'}}</h1>

Большое спасибо!

Answer 2

[VZVZ]

1) Не приходило ли в голову хранить в том JSON-файле перевод сразу всего куска HTML, а не по кусочкам? Тогда бы не пришлось ничего конкатенировать. Тогда в JS было бы достаточно:

$("#debug").html(chrome.i18n.getMessage("debug_page_html"));

Это и по производительности, пожалуй, было бы чуток быстрее.

2) не приходило ли в голову не искать какие-то готовые библиотеки с избыточным функционалом, а просто написать СВОЮ функцию-шаблонизатор, которая бы заполняла пропуски в шаблоне HTML.
Получится как-то так:

$("#debug").html(my_own_function(
  '<h1>{{debug_page}</h1><h2>{{key_permissions}}</h2>',
  chrome.i18n.getMessage("debug_page"),
  chrome.i18n.getMessage("key_permissions")
));

Это ведь не так уж и сложно.