使用 Requirejs 动态加载语言环境文件 [英] Load Locale File Dynamically using Requirejs

问题描述

我有一个基于 RequireJS 的单页 Marionette 应用程序，它需要支持翻译.

I have a single page Marionette app built on RequireJS which needs to support translations.

我的目标是为每种语言都有一个字典文件，并根据登录用户的配置加载相关文件.

My goal is to have a dictionary file for each language, and based on the logged in user's configuration, load the relevant file.

由于大部分用户会使用英语，我想在构建时将英语词典捆绑在应用程序中(使用 r.js).

Since most of the users will use English, I want to bundle the English dictionary in the app during build (using r.js).

我写了一个小的 Translator 模块，它基本上封装了 jed.js(我用于 i18n 的库):

I wrote a small Translator module, which basically wraps jed.js (the library I'm using for i18n):

//in myTranslator.js
define(function (require) {
    "use strict";

    var Jed = require("jed");
    var localeData = require("json!locales/en_US.json");

    var Translator = function () {
        var i18n = new Jed({
            "domain": "messages",
            "locale_data": localeData
        });
        return i18n;
    };
    return Translator;
});

//in app.js
define(function(require){
    var Translator = require("myTranslator");
    var translator = new Translator();
});

如您所见，区域设置数据是从静态文件加载的.我希望能够将语言环境传递给 Translator 构造函数，并基于此加载正确的 JSON 文件.

As you can see, the locale data is loaded from a static file. I want to be able to pass in the locale to the Translator constructor, and based on that, load the correct JSON file.

如何在保持英文 JSON 与构建的项目捆绑在一起的情况下做到这一点?

How can that be done together with keeping the English JSON bundled with the built project?

推荐答案

这是我最终做的解决方案.效果很好，我还学会了使用 $.Deferred，这很棒！

This is the solution I ended up doing. It worked out quite nicely, and I also learnt about using $.Deferred which was great!

对我来说，关键是使用 require 文本插件作为代码中的加载器.

The key for me was using the require text plugin as a loader in the code.

默认语言环境设置为依赖项，这样它也会在构建中烘焙.

The default locale is set as a dependency, that way it's baked in the build as well.

解释在下面的代码中:

//in translator.js
define(function (require) {
    "use strict";

    var $ = require("jquery");
    var _ = require("underscore");
    var Jed = require("jed");
    var text = require("text");
    var defaultDictionary = require("json!locales/en_US.json");

    var Translator;

    Translator = (function () {
        var DEFAULT_LOCALE = "en_US";
        var defaultLocaleData = {
            locale: DEFAULT_LOCALE,
            dictionary: defaultDictionary
        };

        var createTranslator = function (localeData) {
            //create the actual Jed instance with the relevant dictionary
            var i18n = new Jed({
                "domain": "messages",
                "locale_data": localeData.dictionary
            });
            return i18n;
        };
        var parseLocaleDictionary = function (locale, dictionary) {
            //parse the dictionary JSON string loaded by text plugin...
            //handle errors in parsing if needed
        };
        //get to work here
        var getTranslatorForLocale = function (locale) {
            //$gettingData promise will be resolved when data for Jed is loaded and ready
            var $gettingData = $.Deferred();
            //$creatingTranslator promise will be returned to caller and will be resolved when everything's done
            var $creatingTranslator = $.Deferred();

            if (!locale || locale === DEFAULT_LOCALE) {
                //default locale, so resolve right away because we required it already
                $gettingData.resolve(defaultLocaleData);
            }
            else {
                //need to load the dictionary from here
                var dictionaryUrl = require.toUrl("locales/" + locale + ".json");
                //this is the dynamic loading
                text.get(
                    dictionaryUrl,
                    function (dictionary) {
                        //if successful, parse the JSON string and use that dictionary
                        var localeData = parseLocaleDictionary(locale, dictionary);
                        $gettingData.resolve(localeData);
                    },
                    function (error) {
                        //on load error, use the default and resolve promise
                        $gettingData.resolve(defaultLocaleData);
                    });
            }

            //once the data is ready, we can create the translator instance
            $gettingData.done(function (localeData) {
                var i18n = createTranslator(localeData);
                //notify caller that translator is ready
                $creatingTranslator.resolve(i18n);
            });

            return $creatingTranslator.promise();
        };

        return {
            //this function is returned to the user of Translator
            getTranslator: function (locale) {
                var $gettingTranslator = getTranslatorForLocale(locale);
                return $gettingTranslator;
            }
        };
    }());

    return Translator;
});
//in app.js
define(function (require) {
    var Translator = require("translator");
    //in app.js
    var myTranslator;
    var userLocale = "fr_FR";
    //this is a promise that will be resolved when translator is ready
    var $getTranslator = Translator.getTranslator(userLocale);
    //when translator is ready, store it
    $getTranslator.done(function (translator) {
        myTranslator = translator;
    });
    //...
});

这篇关于使用 Requirejs 动态加载语言环境文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！