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的值也能夠用做該方法的參數，根據不一樣的參數得出不一樣的字體（或語種）。

結果：

能夠看到中間開始閱讀的按鈕字體的變化