web项目实现国际化

浅浅的花香味﹌ 2022-02-24 07:29 340阅读 0赞

web网站实现国际化：

## 思路 ##

1.引入js文件
    2.添加(.properties)资源文件
    3.编写js方法

1.需要的js文件：

[jquery.i18n.properties-1.0.9.js][1]
    jquery.js

2.资源文件:以.properties文件的key-value的特性，设置key和value，一般一个语种要写一个文件。

例如： zh.properties文件这样写：publicName=姓名
           en.properties文件这样写：publicName=name

3.js方法：在js方法中加载资源文件，根据key得到value值，然后通过选择器在给元素赋值，显示在页面上。

例如：加载zh.properties文件时，可以根据publicName得到”姓名“
          加载en.properties文件时，可以根据publicName得到“name”

## 实践 ##

第一步：

第二步：  
![图片描述][1476433053-599d0c175ab56_articlex]

我的这里做的是中文简体和繁体的转化：  
所以简体的文件名是messahes\_CN\_dl.properties,意思是中国大陆

内容如下：startReader = 开始阅读

繁体字的文件名是message\_CN\_tw.properties,意思是中国台湾

内容如下：startReader = 開始閱讀

第三步：

function loadProperties() {
        jQuery.i18n.properties({//加载资浏览器语言对应的资源文件
            name : 'messages_CN_dl', //资源文件名称
            path : '${messages}/', //资源文件路径
            mode : 'map', //用Map的方式使用资源文件中的值
            callback : function() {//加载成功后设置显示内容
                $('.btn_start').html($.i18n.prop('startReader'));
            }
        });
    }

此方法的name的值是加载的资源文件名，

如果加载message_CN_tw.properties文件。
    那么    $.i18n.prop('startReader')的值就是“開始閱讀”，
    如果加载messahes_CN_dl.properties
    那么    $.i18n.prop('startReader')的值就是“开始阅读”，

所以这个name的值也可以用作该方法的参数，根据不同的参数得出不同的字体（或语种）。

## 结果： ##

可以看到中间开始阅读的按钮字体的变化  
![图片描述][3231022009-599d1757b6b9a_articlex]  
![图片描述][386199495-599d17618088f_articlex]

[1476433053-599d0c175ab56_articlex]: /images/20220224/93848d41958645da841e526a3e815617.png
[3231022009-599d1757b6b9a_articlex]: /images/20220224/6e4c3282a2374dd7a6dd3528ab4250b1.png
[386199495-599d17618088f_articlex]: /images/20220224/d99b3c9db8aa4ed3adb2705c46b18c45.png