JEECG 前端JS国际化实现，采用i18n新技术方案

JEECG平台已全面实现了国际化，从后台代码提示到页面表单，使用方法简单易用: 后台配置国际化语言，java或者jsp层通过引用国际化标签，即可轻松实现国际化，根据用户登录选择的语言，实现动态语言切换；

除了java和jsp层，那么 js的国际化要怎么处理呢？jeecg原来的方案是通过复制不同的国际化js文件，比如**_en.js,**_ch.js来实现，这种方式不好维护，所以 jeecg 3.7.8版本开始采用了新技术方案i18n，实现一份js ，国际化文本存在属性文件中，统一维护。

如果你这边jeecg已经是新版3.7.8+以上，对此文只做了解即可，因为jeecg的国际化机制已经很完善，不需要再修改；如果你是老版本那你可以通过此文学习自己升级。

一、使用技术

jQuery.i18n.properties是一款轻量级的jQuery国际化插件，能实现Web前端的国际化，采用.properties文件对JavaScript进行国际化，根据用户指定的语言和国家编码来解析对应的以”.properties”为后缀的文件

/plug-in/i18n/jeecgs.properties

/plug-in/i18n/jeecgs_zh.properties

/plug-in/i18n/jeecgs_en.properties

二、集成步骤

第一步：引入必须的js文件，JEECG在base标签中已做通用处理，自己开发的原生态页面需要自己手动引入

jquery.i18n.properties.js
jquery.js

第二步：页面加载时加载国际化properties文件,JEECG标签引入tools时默认已加载，没有引用是需要自己调用处理

//i18n前段国际化
initI18nConfig();

/**
 * i18n国际化配置
 */
function initI18nConfig() {
	var i18n_browser_Lang = getCookie("i18n_browser_Lang");
	if(i18n_browser_Lang == 'zh-cn'){
		i18n_browser_Lang = 'zh';
	}
//	console.log(i18n_browser_Lang);
    $.i18n.properties({
        name:'jeecgs',    		//属性文件名     命名格式： 文件名_国家代号.properties
        path:'plug-in/i18n/',   //注意这里路径是你属性文件的所在文件夹
        mode:'map',
        language:i18n_browser_Lang,//这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties
        callback:function(){
       	
        }
    });
}

第三步：创建不同语言的properties文件，在不同语言文件用添加国际化key及key对应的语言内容

/plug-in/i18n/jeecgs.properties 默认文件

dialog.close=关闭
dialog.submit=提交
dialog.select=选择

/plug-in/i18n/jeecgs_zh.properties 中文

dialog.close=关闭
dialog.submit=提交
dialog.select=选择

/plug-in/i18n/jeecgs_en.properties 英文

dialog.close=close
dialog.submit=submit
dialog.select=select

第四步：js国际化使用

js中调用方法 $.i18n.prop(key) ，通过key以Map的形式获取资源文件中对应的值

例如：

      $.dialog({
			content: 'url:'+addurl,
			zIndex: getzIndex(),
			lock : true,
			width:width,
			height: height,
			title:title,
			opacity : 0.3,
			cache:false, 
			okVal: $.i18n.prop('dialog.submit'),
		    cancelVal: $.i18n.prop('dialog.close'),
		    cancel: true /*为true等价于function(){}*/
		});

okVal: $.i18n.prop('dialog.submit'), 设置确认按钮名称
cancelVal: $.i18n.prop('dialog.close'),设置取消按钮名称

JEECG 前端JS国际化实现，采用i18n新技术方案

JEECG 前端JS国际化实现，采用i18n新技术方案

猜你喜欢