原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://jeecg.blog.csdn.net/article/details/81542851

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'),设置取消按钮名称

 

文章最后发布于: 2018-08-10 09:50:42
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览