Pull to refresh

po.js — супер простая утилита для i18n

Reading time 2 min
Views 15K
Когда я разрабатываю системы на Zend Framework, то всегда использую gettext и Zend_Translate. Всё лаконично просто и обычно не возникает никаких проблем с переводом даже больших проектов. Для каждого языка генерируются свои файлы .po и .mo, переводы пляшут от дефолтного языка, ключи тоже на этом же языке. Переводчикам удобно передать эти файлы, которые они могут открыть в POEdit и удобно всё перевести. Так вот, на стороне сервера всё очень просто, но часто нужно переводить какие-то сообщения «на лету» в JavaScript, а он не понимает ваши .mo файлы. Но хотелось бы пользоваться именно ими, чтобы не разделять перевод одного проекта на 2 части (backend, frontend). И я начал искать. В Интернете существует достаточно большое количество таких решений, но все они почему-то обрастают зависимостями:

code.google.com/p/gettext-js (Prototype)
angular-gettext.rocketeer.be (Angular)
github.com/jakob-stoeck/jquery-gettext (jQuery)

А хотелось иметь именно «pure-js» решение. Ок, напишем своё.

Первым делом я искал, как же в JS прочитать PO-файлы. Можно парсить, но это лишняя нагрузка, поэтому я решил не насиловать JavaScript и отдавать ему уже готовый JSON. Поэтому первое, что нам предстоит сделать, -это сконвертировать PO в JSON. Советую воспользоваться этим конвертером.

Далее алгоритм простой, сохраняем себе на сервер JSON-файл, а передаем ссылку на него в pojs. Конечно, подключив перед этим po.min.js на страницу.

<script src="po.min.js"></script>
<script>
    pojs.init('/ru.json');
</script>


Если текущий язык дефолтный, то не нужно передавать ссылку на JSON.

Все переводы возвращаются после вызова функции с передачей в нее ключа. Если ключ не найден, то будет возвращен сам ключ.

pojs._('Hello world');


Также в po.js присутствует еще одна супер-мини фича, немного похожая на sprintf.

pojs._('My name is %s, and I am %s years old', ['Sasha', 24]);


Если JSON не закэширован, то он будет получен асинхронно, а это значит, что мы не сможем использовать pojs._() сразу же после инициализации. Оберните код, где используются переводы:

pojs.ready(function() {
    pojs._('Hello world');
});


Стоит отметить какие-то плюсы po.js, иначе не было бы смысла всё это делать:

1. Нано-размер: ~0.7KB
2. Не нуждается в сторонних зависимостях, таких как jQuery, Prototype, Angular …
3. JSON кэшируется в localStorage. Поэтому будьте осторожны, если у вас очень большие файлы переводов. Сбросить кэш можно просто добавив "?1" к ссылке на JSON-файл (да, вот такой old school)

po.js на GitHub

p.s.
Писал чисто под свои нужды, возможно, вам чего-то не хватает или что-то работает не так. Готов править, улучшать!
Tags:
Hubs:
+17
Comments 18
Comments Comments 18

Articles