前端界面国际化（改进i18n方式）

àì夳堔傛蜴生んèń 2021-09-27 12:34 528阅读 0赞

### 前端界面国际化主要有两种方式 ###

1.translater.js插件的方式

2.使用i18n的方式

网上有说的谷歌插件的方式其实也可以，但是bug有很多，比如说代码的翻译...   当你访问一个外网的时候，有的时候肯定遇到很多单词都看不懂的地方，当你使用谷歌浏览器的时候，它就会提示你是否翻译。谷歌插件的方式就相当于这样的。但是你发现没，你想看的代码它居然也给你翻译中文，这完全不是我们想要的结果。所有不推荐这种方式。

### 使用i18n的方式 ###

先下插件：(jquery.i18n.properties-min-1.0.9.js jquery.i18n.properties-1.0.9.js)

下载地址：[https://download.csdn.net/download/qq\_39705793/10692883][https_download.csdn.net_download_qq_39705793_10692883]

加在引用js的尾部（具体路径根据你放的位置来）

页面元素

<div class="lan">
       <div class="lan1"><label class="i18n" name="lan"></label></div>
       <div class="lan2">
          <select id="language">
             <option value="zh-CN">中文简体</option>
             <option value="zh-TW">中文繁體</option>
             <option value="en">English</option>
          </select>
       </div>
    </div>
       <div id="content">
          <div>
             <label id="label_username"></label>
             <input type="text" id="username">
             </input>
       </div>
          <div>
             <label id="label_password"></label>
             <input type="password" id="password">
             </input>
          </div>
          <input type="button" id="button_login"/>
       </div>

Js部分的调用：

jQuery.i18n.properties({
         name : 'strings', //资源文件名称
         path : '/console//bundle/', //资源文件路径
         mode : 'map', //用Map的方式使用资源文件中的值
         language : 'zh',
         callback : function() {//加载成功后设置显示内容  回调函数
    debugger;
             $('#button_login').html($.i18n.prop('Login'));
             $('#label_username').html($.i18n.prop('User Name'));
             $('#label_password').html($.i18n.prop('Password'));
         }
     });

这样的话界面上有大量的元素翻译的话，回调元素将会有许多个，这明显是个问题。

### 改进使用i18n的方式（大规模元素进行国际化） ###

先让大家看一下我的目录文档

![70][]

我们将插件放在dist / js / i18n /   插件是点击上方链接下载，将插件放在此目录下我们会发现有三个配置文件，这三个配置文件是由键值对组成的

![70 1][]![70 2][]

strings.properties这个是默认的    strings\_ar.properties这个是阿拉伯文的  我就不展示了

初始化工作：在界面上引入js , 别忘记引入jquery哦 这个在jq环境下的

在界面加载的时候，调用一下方法

$(function () {
           setTimeout(loadProperties('../../dist/js/i18n/'),5000);
    });

做好这部工作之后，重点来了，我写了一个js文件 他在我的结构图下边，名字properi18.js ，它将动态的翻译界面上带有特殊属性的元素，从我的代码来看，我将需要国际化的元素增加一个自定义标签data-locale，意思是如果有个标签的属性是  data-locale=配置文件国际化的key  他将会翻译。eg：data-locale=i18n\_meetingRoomManagement

举个例子：

这个是我界面上的局部html界面，我将需要国际化的元素都填上我的自定义标签，那么他们可以国际化

你需要在主页加上一个下拉框，也就是调用这个函数的接口，你选择英文，界面上出现英文，你选择中文，界面上出现中文

<div class="input-group-addon" style="border:0;width: 20%;"><i data-locale="i18n_langge" style="font-weight:bold;">语言：</i>
    </div>
    <select class="form-control select2"id="langge" onchange="loadProperties('dist/js/i18n/')">
    		<option value="zh" data-locale="i18n_Chinese" >中文</option>
    		<option value="en" data-locale="i18n_English" >English</option>
    		<option value="ar" data-locale="i18n_Arabia" >English</option>
    </select>

大家也可以显而易见的看见，我自己写的js中，最上边先是获取option标签的值，有则传入那个方法中，没有的话默认则是中文。

大家可能在界面上出现提示框，或者确认框等的代码，比如alert("你好“)

这没有办法进行国际化，那么则需要调用我的js中的第二个方法。loadPropertiesalert

即：

alert(loadPropertiesalert('il8n_departmentCodeOnlyNum','dist/js/i18n/'));

loadPropertiesalert()  第一个参数则是配置文件中的key值，第二个参数是地址

针对于Input标签属性placeholder国际化的问题：直接设置属性值为配置文件中的key

大家有什么建议或问题在下方留言...................

[https_download.csdn.net_download_qq_39705793_10692883]: https://download.csdn.net/download/qq_39705793/10692883
[70]: /images/20210923/d68112d9999b4e9fac50b186f43c580c.png
[70 1]: https://img-blog.csdn.net/20180928115734548?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzA1Nzkz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20210923/bc2ac8e2db54454e9c5a8a803f915e1f.png