纯js国际化(i18n)
i18n,是internationalization单词的简写,中间18个字符略去,简称i18n,意图就是实现国际化,方便产品在不同的场景下使用
目标:可以点击切换语言或者ChangeLanguage的按钮 来完成英语和中文的切换
效果图如下:
实现方案:https://github.com/jquery-i18n-properties/jquery-i18n-properties
实现过程:
步骤一:代码结构
步骤2:实现html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 isEng = true
18 btn.onclick=function(){
19 if(!isEng){
20 loadProperties('en');
21 }else{
22 loadProperties('zh');
23 }
24 isEng = !isEng
25
26 }
27 function loadProperties(lang) {
28 $.i18n.properties({
29 name: 'strings', //属性文件名 命名格式: 文件名_国家代号.properties
30 path: 'i18n/', //注意这里路径是你属性文件的所在文件夹
31 mode: 'map',
32 language: lang, //这就是国家代号 name+language刚好组成属性文件名:strings+zh -> strings_zh.properties
33 callback: function () {
34 $("[data-locale]").each(function () {
35 console.log($(this).data("locale"));
36 $(this).html($.i18n.prop($(this).data("locale")));
37
38 });
39 }
40 });
41 }
42 loadProperties('en');
43
44
45
46
47
48
核心思路:
既然要做国际化,我们得准备在不同语言情况下的词汇
将中英文的一些词汇和描述消息 放在i18n的文件夹中的strings_en.properties和strings_zh.properties
那么如果是中文环境,就按照strings_zh.properties这个文件中的词汇描述来;否则按照英文的来
这样一来,不同语言环境就可以加载不同的词汇了,国际化完毕
代码打包放在百度云了,希望能帮到更多的人:
https://pan.baidu.com/s/1Dl6jup_Igw9QHj9N2EQsSg
【疾病科普】眼皮跳、脸上老是抽是怎么回事?|杨振宁:永恒的骄傲——纪念邓稼先