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

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

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

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

<script type="text/javascript" src="<%=contextPath%>/assets/scripts/plugins/jquery.i18n.properties-min-1.0.9.js"></script>
<script type="text/javascript" src="<%=contextPath%>/assets/scripts/jquery.i18n.properties-1.0.9.js"></script>

页面元素

<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的方式（大规模元素进行国际化）

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

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

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

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

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

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

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

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

function loadProperties(path) {  
	var lan;
	if($("#langge").val()!=null&&$("#langge").val()!=undefined){
		lan=$("#langge").val();
		setCookie("langge",$("#langge").val())
	}else{
		lan=getCookie("langge");
		if(lan==null||lan===undefined){
			lan="zh"
		}
	}
	
        $.i18n.properties({  
            name:'strings',    
            path:path,   
            mode:'map',  
            language:lan,     
            callback:function(){  
            	  $(".i18n").each(function(){
               	   var a=$(this).attr("class");
            	var b=a.substring(5,a.lenth)
               	   $(this).html($.i18n.prop(b));  
               	   }); 
               $("[data-locale]").each(function(){ 
            	   var a=$(this).text();
               		//console.log($(this).data("locale"));
                   $(this).html($.i18n.prop($(this).data("locale")));  
                
               });  
               $('[data-i18n-value]').each(function () {
                   $(this).val($.i18n.prop($(this).data('i18n-value')));
               });
               
               $('input').each(function (){
            	   if(($(this).attr("placeholder"))!=undefined){
            		   if(($(this).attr("placeholder").indexOf("i18n_"))==0){
                		   $(this).attr("placeholder",$.i18n.prop($(this).attr("placeholder")));
                	   }
            	   }
               });
               
               $("th").each(function(){
            	   
            	    var tdArr = $(this).attr("class");
            	    if(tdArr !=undefined&&tdArr!=null ){
            	    if(tdArr.indexOf("i18n") >= 0){
            	    var vel=	$.i18n.prop(tdArr);
            	    	var ter="   <div class='th-inner'>"+vel+"</div>"+
            	   					" <div class='fht-cell'></div>"
            	    	 $(this).html(ter);  
            	    }
            	    }
            	     
            	  });
            }  
        });  
    }  
function loadPropertiesalert(alsss,path){
	var lan;
	if($("#langge").val()!=null&&$("#langge").val()!=undefined){
		lan=$("#langge").val();
		setCookie("langge",$("#langge").val())
	}else{
		lan=getCookie("langge");
		if(lan==null||lan===undefined){
			lan="zh"
		}
	}
        $.i18n.properties({  
            name:'strings',    
            path:path,   
            mode:'map',  
            language:lan,     
            callback:function(){  
            	vel=	$.i18n.prop(alsss);
            	
            }  
        });  
        return vel;
}
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
	return unescape(arr[2]);
}

return null;
}

举个例子：

<ol class="breadcrumb">
           <li><i class="fa fa-home"></i><a href="../../dashboard.html" data-locale="i18n_index">首页</a></li>
           <li><a href="#" data-locale="i18n_detailData">详细数据</a></li>
           <li class="active" data-locale="i18n_personnelManagement">人员管理</li>
</ol>

这个是我界面上的局部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

 

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