JavaScript国际化方案i18next的入门使用

JavaScript国际化方案i18next的入门使用

JavaScript中实现国际化的方案有不少，从github上star数较多的选择角度，选择了i18Next库，生态比较全。

i18next的官方教程文档不够明了，记录一下入门使用，主要是加载自定义的多语言json文件。

拷贝官方的实例

https://github.com/i18next/jquery-i18next/blob/master/example/sample.html

将官方的实例放入Web服务器上，通过浏览器可直接访问。

此时的文字内容是通过js代码直接定义的，若是要添加其他的语言，直接在resources中添加即可。

增加对多语言json文件的支持

引入插件xhr backend

增加xhr配置项：

{
  // path where resources get loaded from, or a function
  // returning a path:
  // function(lngs, namespaces) { return customPath; }
  // the returned path will interpolate lng, ns if provided like giving a static path
  loadPath: '/locales/{{lng}}/{{ns}}.json',

  // path to post missing resources
  addPath: 'locales/add/{{lng}}/{{ns}}',

  // your backend server supports multiloading
  // /locales/resources.json?lng=de+en&ns=ns1+ns2
  allowMultiLoading: false,

  // parse data after it has been fetched
  // in example use https://www.npmjs.com/package/json5
  // here it removes the letter a from the json (bad idea)
  parse: function(data) { return data.replace(/a/g, ''); },

  // allow cross domain requests
  crossDomain: false,

  // allow credentials on cross domain requests
  withCredentials: false,

  // define a custom xhr function
  // can be used to support XDomainRequest in IE 8 and 9
  ajax: function (url, options, callback, data) {}

  // adds parameters to resource URL. 'example.com' -> 'example.com?v=1.3.5'
  queryStringParams: { v: '1.3.5' }
}

使用xhr:

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

i18next
  .use(XHR)
  .init(i18nextOptions);

增加json文件

增加json翻译文件：

locales/en/translation.json
locales/zh/translation.json
locales/dev/translation.json

切换语言

切换多语言，切换之后需要再调用localize函数。

var lan = i18next.language;
i18next.changeLanguage(lan == 'zh' ? "en" : "zh", (err, t) => {
    // resources have been loaded
    console.log("changeLanguage success: " + i18next.language);
    $('.translation').localize();
  });

缓存的问题

v1.4.1版本增加查询参数，可以控制浏览器的缓存。

使用方法：在配置项中增加以下的版本配置。

queryStringParams: { v: '1.3.5' }

【全文完】

—update 2017.5.14 增加v1.4.1版本的查询参数配置说明