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

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

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

拷贝官方的实例

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

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

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

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

引入插件xhr backend

增加xhr配置项:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
// 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:

1
2
3
4
5
6
import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';

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

增加json文件

增加json翻译文件:

1
2
3
locales/en/translation.json
locales/zh/translation.json
locales/dev/translation.json

切换语言

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

1
2
3
4
5
6
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版本增加查询参数,可以控制浏览器的缓存。

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

1
queryStringParams: { v: '1.3.5' }

【全文完】

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

您的支持将鼓励我继续创作!
0%