动态设置 RequireJS i18n 语言环境

Question

我正在使用RequireJS i18n plugin 将翻译加载到我的应用程序中。我正在为用户首选语言的运行时确定的概念而苦恼。

如果您使用navigator.language 来确定用户的首选语言，该插件运行良好，但在我的应用程序中，用户的语言保存在服务器上的数据库中。所以我需要在运行时设置语言环境：

require.config({
    config: {
        i18n: {
            locale: userLocale
        }
    }
});

所以我需要一种巧妙的方法来设置userLocale 在 RequireJS 加载我的应用程序之前。有谁知道实现这一目标的最佳方法是什么？可能性包括：

1) 在我的应用程序之外以非 AMD 方式设置 userLocale：

//run Ajax call to determine user's localization preferencess
var Localization = Localization || getUserLocalization(); 

//and then...
require.config({
    config: {
        i18n: {
            locale: Localization.userLocale
        }
    }
});

require(['app']);

这让我有点难过，因为这意味着我的一些应用程序将在 RequireJS 之外，因此不整洁。这也意味着所有用户的本地化设置（语言时区、日期格式、数字格式）都将保存在全局命名空间中。

2) 有一个单独的 require 调用来检索本地化设置

我不确定这是如何工作的，但也许：

var Localization = require(['localization']);

require.config({
    config: {
        i18n: {
            locale: Localization.userLocale
        }
    }
});

require(['app']);

也许由于异步，这不起作用？此外，app 无法访问 Localization 对象，因此仍需要将其存储为全局变量。

任何人都可以找到解决此问题的好方法吗？有没有人使用过 RequireJS i18n 插件来做类似的事情？

Answer 1

似乎经过大量研究，解决此问题的最佳方法是检查localStorage 的locale 值。如果尚未设置，我会使用虚拟语言加载应用程序：

var locale = localStorage.getItem('locale') || 'dummy';

require.config({
    config: {
        i18n: {
            locale: locale
        }
    }
});

require(['app']);

我使用一种名为dummy 的语言，在我的nls 文件中设置为一个空对象。使用虚拟而不是默认，意味着我不必猜测用户的语言可能是什么，并且可能会迫使他们下载大量错误语言的翻译：

define({
    "root": false,
    "dummy": {}, //dummy language with no translations if user language is unknown
    "fr": true,
    "en": true,
    "en-uk": true,
    "fr-fr": true
});

然后，当应用程序加载完毕且用户已登录时，我使用服务调用查询数据库，将语言设置为localStorage，然后使用location.reload() 重新加载应用程序：

    //retrieve user object (including preferred locale) from service call
    user = getUserObject(userId); 

    locale = localStorage.getItem('locale');

    if (!locale || locale !== user.locale) {

        localStorage.setItem('locale', user.locale);

        //reload the app
        location.reload();
    }

当然，我需要支持旧版本的 IE，所以我还包含使用 userData 的回退，但这是解决方案的要点。

这种方法部分来自RESThub 的人是如何做到的。

Answer 2

如果您的页面是使用模板系统动态生成的，另一种选择是将require.config({config {..} }) 内联到生成的 HTML 中...这样说：

<!-- load require.js -->
<script src="js/lib/require.js"></script>
<!-- standard config options in this file -->
<script src="js/config.js"></script>
<!-- user specific config inlined in the Dynamic HTML -->
<script>
  // now set the user's preferred locale
  require.config({
    config : { 
      i18n: {
        locale: '<% user.locale %>' // i.e. use PHP to insert user's preferred language
      }
    }
  });
  require(['app']); // Call your main app here
</script>

require.config(..) 可以多次调用，但应在您的应用加载之前完成。