项目场景：

要对一个前端使用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>";
}