ExtJS MVC, динамическая загрузка и i18n

Недавно я столкнулся с одной и той же проблемой.

Нахождение чистого способа сделать это было довольно сложной задачей - большинство альтернатив были либо.

1) Дублируйте свою базу кода для каждой локали (WTH)

2) Загрузите локализованные файлы, переопределяющие каждый из ваших компонентов (поддерживая ад? Что относительно бедных переводчиков?)

3) Использовать/генерировать статический файл, содержащий переводы и ссылаться на него (все языки загружаются?) Дополнительная команда сборки для ее создания? Как вы их синхронизируете?)

Я попытался получить лучшее из всех миров и получил класс утилиты, ответственный за:

1) Загрузка файлов перевода ExtJS (которые в основном применяют переопределения к базовым компонентам extjs)

2) Загрузка специфического ресурса ресурса resourcebundle (указав, какой язык для загрузки) с сервера.

3) Прототипирование String с помощью метода translate(), который запрашивает загруженное хранилище (содержащее пакет сообщений с сервера) и возвращает перевод на основе значения строки.

Это суть вещей:

Связывание и прототипирование:

localeStore.load({
    callback : function(records, operation, success) {
        // Define translation function (NB! Must be defined before any components which want to use it.)
        function translate() {
            var record = localeStore.getById(this.valueOf()) ;
            if(record === null) {
                alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file.
                return this.valueOf(); // Return key name as placeholder
            } else {
                var value = record.get('value');
            }
            return value;
        }

        String.prototype.translate = translate;
        callback.call(); // call back to caller(app.js / Ext.Application), loading rest of application
    }
});

В качестве примера из представления:

this.copyButton = Ext.create('Ext.button.Button', {
    disabled: true,
    text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(),
    action: 'openCopyDialog'
});

Пакет на сервере (mesages_en.properties): DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON = Копировать файл и т.д..

Плюсы:

• Без проблем, 'Your_key'.translate() позволяет легко читать и понимать, что это локализованная строка
• Нет/незначительные накладные расходы на обслуживание (сохранение файла переопределения для каждого языкового стандарта?)..
• Вы загружаете только нужный вам язык - не весь shabang.
• Если вы действительно этого хотите, у вас может даже быть собственный перевод для локальных файлов ExtJS в том же пакете.
• Вы можете написать модульные тесты, чтобы гарантировать, что все пучки содержат одни и те же ключи, что позволяет избежать перенесенных переводов позже

Минусы:

• Синхронный - магазин должен быть загружен до запуска основного приложения. Я решил это, добавив обратный вызов из класса утилиты, который был вызван после загрузки всех текстов.
• Отсутствие в реальном времени количества текстов. Хотя я не хотел, чтобы мои пользователи перегружали сервер: P

До сих пор мой подход был очень хорош для моих требований. Нагрузка на сайт не заметно медленнее, а пакеты (содержащие ~ 200 ключей/значений на пучок) измеряют при ~ 10 кбайт во время загрузки.