纯js国际化(i18n)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

i18n，是internationalization单词的简写，中间18个字符略去，简称i18n，意图就是实现国际化，方便产品在不同的场景下使用

目标:可以点击切换语言或者ChangeLanguage的按钮来完成英语和中文的切换

效果图如下:

实现方案：https://github.com/jquery-i18n-properties/jquery-i18n-properties

实现过程:

步骤一：代码结构

步骤2：实现html文件

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>国际化</title>

     <script src="js/jquery.min.js"></script>

     <script src="js/jquery.i18n.properties.min.js"></script>

 </head>

 <body>

     <label data-locale="User Name">用户名：</label><input type="text">

     <label data-locale="Password">密码：</label><input type="password">

     <button id='btn' data-locale="Btn Change">切换语言</button>

     <script type="text/javascript">

         isEng = true

         btn.onclick=function(){

             if(!isEng){

                 loadProperties('en');

             }else{

                 loadProperties('zh');

             }

             isEng = !isEng

         }

         function loadProperties(lang) {

             $.i18n.properties({

                 name: 'strings',    //属性文件名     命名格式： 文件名_国家代号.properties

                 path: 'i18n/',   //注意这里路径是你属性文件的所在文件夹

                 mode: 'map',

                 language: lang,     //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties

                 callback: function () {

                     $("[data-locale]").each(function () {

                         console.log($(this).data("locale"));

                         $(this).html($.i18n.prop($(this).data("locale")));

                     });

                 }

             });

         }

         loadProperties('en');

     </script>

 </body>

 </html>