layui框架国际化的实现

项目场景：

要对一个前端使用layui的项目进行国际化，但是layui好像没有实现国际化，所以需要自己手动实现。

软件版本：

layui版本：layui-v2.5.6

jquery版本：3.5.1.min

解决方案：

• 需要国际化的内容主要有：

1. 日期输入框
2. 分页栏
3. 弹出框（页面）的标题、按钮等
4. 弹出框（页面）的内容
5. 页面其它内容
6. js方法中的值

• 解决思路：

1. 日期输入框：利用layui时间日期控件的lang属性
2. 分页栏：重写laypage.js
3. 弹出框（页面）的标题、按钮等：在js中控制值
4. 弹出框（页面）的内容：在js中控制值
5. 页面其它内容：在dom元素中自定义属性，并将对应的国际化code放入，页面加载完对dom属性进行遍历，替换自定义属性为对应的国际化值
6. js方法中的值：在js中控制值

具体实现：

1. 编写国际化配置文件
2. 引入?jquery.i18n.properties.js（点此下载） ，用于解析国际化配置文件
3. 编写language.js，用于根据code获取国际化值及替换dom元素中的code为国际化值
4. 重写laypage.js（点此下载修改过的文件），将分页栏国际化

• properties配置文件：

\resources\static\languages\systemInfo_en_US.properties：

userNo=User No
userName=User name
userType=User type

\resources\static\languages\systemInfo_zh_CN.properties：

userNo=用户编号
userName=用户名称
userType=用户类型

• language.js：

以下代码替换页面标签中的data-i18n、placeholder-i18n、href-i18n属性。data-i18n对应的国际化值会放入标签的innerTEXT中；placeholder-i18n的国际化值会放入placeholder属性；href-i18的国际化值会放入href属性；要替换其它属性请自行添加。

language()方法，用于根据给定的code返回国际化值。

代码还包括对easyui中linkbutton、window、panel等的处理示例，实际没有用。

使用时将initPage()方法放入要国际化页面的onload()方法中即可。

function initPage(){
    	if($.cookie("langType")){
    		loadProperties($.cookie("langType"));
    	}else{
    		loadProperties("zh_CN");	
    	}
    } 
function loadProperties(language){
    jQuery.i18n.properties({
    name:'systemInfo_'+language,
    path:"/languages/",
    mode:'map',
    callback: function() {
    	$("[data-i18n]").each(function () {
    		if($(this).hasClass("easyui-linkbutton")){
    			//初始化按鈕
        		$($(this).children().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else if($(this).hasClass("easyui-window")){
    			//初始化彈窗title
    			$($(this).prev().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else if($(this).hasClass("easyui-panel")){
    			//初始化彈窗title
    			$($(this).prev().children()[0]).html($.i18n.prop($(this).attr('data-i18n')))
    		}else{
    			//初始化普通標籤
    			$(this).prepend($.i18n.prop($(this).attr('data-i18n')))
    		}
        });

		$("[placeholder-i18n]").each(function () {
			$(this).attr("placeholder",$.i18n.prop($(this).attr('placeholder-i18n')));
		});

		$("[href-i18n]").each(function () {
			$(this).attr("href",$.i18n.prop($(this).attr('href-i18n')));
		});
    }  
    });  
}

function language(key){
	return $.i18n.prop(key);
}

• html示例：

<div class="layui-form-item">
    <label class="layui-form-label" data-i18n="userNo"></label>
    <div class="layui-input-block">
        <input class="layui-input" placeholder-i18n="userNo" type="text"/>
    </div>
</div>

• js示例：

其中，btn: [language('btn.confirm'), language("btn.cancel")] 用于替换layui确认框中的按钮。

function delRowOpen(){
	let selected = layTable.checkStatus('qryGrid');
	if(selected.data.length!==1) {
		layer.msg(language('msg.selectOneToDelete'));
		return;
	}
	selected = selected.data[0];
	if(!selected.id){
		layer.msg(language('msg.selectedKeyIsNull'));
		return;
	}
	layer.confirm(
		language("sys.confirmDel")
		, {icon: 0, title:language("sys.info"),btn: [language('btn.confirm'), language("btn.cancel")]}
		, function(index) {
			let param = {
				'id' : selected.id,
				'random' : Math.random()
			};
			$.ajax({
				url : ctx + "/kv/del",
				type : "POST",
				data : param,
				success : function(res){
					if(res.success){
						queryList();
					}
					layer.msg(res.msg);
				}
			});
			layer.close(index);
		});
}

• 注意事项：

如果在js中编辑页面标签，要使用language()方法拼接，不能使用data-i18n、placeholder-i18n、href-i18n等属性，因为页面加载后onload()方法中已经执行过initPage()方法，此后再动态添加的页面dom元素不会再进行属性替换。

function aa(d){
	let value = d['machineAttr'];
	if(!value||value.length===0){
		return "-";
	}
	return "<a href='javascript:void(0);' onclick='openParamDetail(\"showEquParam\",\""+d['groupCode']+"\","+JSON.stringify(value)+")'>"+language('show')+"</a>";
}

• 修改语言：

    function changeLang(lang) {
        $.cookie("langType",lang);
        location.reload();
    }