純js國際化(i18n)
阿新 • • 發佈：2019-05-15
-i 代碼 rop -h aid ava nal utf 路徑
i18n，是internationalization單詞的簡寫，中間18個字符略去，簡稱i18n，意圖就是實現國際化，方便產品在不同的場景下使用
目標:可以點擊切換語言或者ChangeLanguage的按鈕 來完成英語和中文的切換
效果圖如下:
實現方案：https://github.com/jquery-i18n-properties/jquery-i18n-properties
實現過程:
步驟一：代碼結構
步驟2：實現html文件
1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>國際化</title> 6 <script src="js/jquery.min.js"></script> 7 <script src="js/jquery.i18n.properties.min.js"></script> 8 </head> 9 10 <body> 11 12 <label data-locale="User Name">用戶名：</label><input type="text"> 13 <label data-locale="Password">密碼：</label><input type="password"> 14 <button id=‘btn‘ data-locale="Btn Change">切換語言</button> 15 16 <script type="text/javascript"> 17 isEng = true 18 btn.onclick=function(){ 19if(!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 </script> 46 </body> 47 48 </html>
核心思路：
既然要做國際化，我們得準備在不同語言情況下的詞匯
將中英文的一些詞匯和描述消息 放在i18n的文件夾中的strings_en.properties和strings_zh.properties
那麽如果是中文環境，就按照strings_zh.properties這個文件中的詞匯描述來；否則按照英文的來
這樣一來，不同語言環境就可以加載不同的詞匯了，國際化完畢
代碼打包放在百度雲了，希望能幫到更多的人:
https://pan.baidu.com/s/1Dl6jup_Igw9QHj9N2EQsSg
純js國際化(i18n)