web项目实现国际化

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”

实践

第一步：

<script type="text/javascript" src="${js}/jquery.i18n.properties-1.0.9.js"></script>
<script type="text/javascript" src="${js}/jquery-3.2.1.min.js"></script>

第二步：

我的这里做的是中文简体和繁体的转化：
所以简体的文件名是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的值也可以用作该方法的参数，根据不同的参数得出不同的字体（或语种）。

结果：

可以看到中间开始阅读的按钮字体的变化