純js國際化(i18n)

時間 2019-12-13

標籤國際化 i18n 欄目 JavaScript 简体版

原文原文鏈接

i18n，是internationalization單詞的簡寫，中間18個字符略去，簡稱i18n，意圖就是實現國際化，方便產品在不一樣的場景下使用javascript

目標:能夠點擊切換語言或者ChangeLanguage的按鈕來完成英語和中文的切換html

效果圖以下:java

實現方案：https://github.com/jquery-i18n-properties/jquery-i18n-propertiesjquery

實現過程:git

步驟一：代碼結構github

步驟2：實現html文件this

 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(){
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     </script>
46 </body>
47 
48 </html>