申明式翻译设计

对js或者网站后台这些需要对输出提示进行翻译只要包装个翻译方法在代码调用就行了。

对下图这种写在HTML里面的文字在不影响DOM结构的情况通常想到的是给节点加ID，然后js通过ID操作这些元素调用翻译，这样做的话就影响DOM结构，使得业务实现时候还得考虑翻译的实现，不符合设计理念。在这里插入图片描述
经过我思考，引入申明式翻译来实现页面HTML的翻译最合适，不会侵入业务结构。

约定如下：
在html节点属性有listranslate的属性就认为有翻译要求，属性值约定。单个翻译命令用~分隔。前面为命中点，后面为翻译的代码（既英文部分）。命中点可以为html或这个节点的属性值。单个DOM的多个属性翻译之间用上尖号分割。
例如:

在这里插入图片描述

这几种申明基本满足html翻译，实现原理如下：
在jQuery之后，EasyUI之前引入翻译JS

基于以上实现的码表示例：
在这里插入图片描述

申明式翻译实现的JS

//缓存对象
var LISSYSLanguagePakObj = null;
//GetCode:获得数据代码
//ChData:中文数据
//CurUserID:当前用户主键，没会话页面传，正常不需要传
function TranslateDataMTHD(GetCode, ChData, UserDR) { if (LISSYSLanguagePakObj == null) { var url = '../../sys/ashx/ashCommon.ashx?Method='; if (UserDR != null && UserDR != "") { url = '../../sys/ashx/ashCommonNoSession.ashx?Method='; } else { UserDR = ""; } var BLLCode = GetPathName(); $.ajax({ type: "get", dataType: "json", //text, json, xml cache: false, // async: false, //为true时，异步，不等待后台返回值，为false时强制等待；-asir url: url + "GetLanguagePak", data: { BLLCode: BLLCode, UserDR: UserDR }, success: function (result, status) { //对数据进行筛选，是后台抛的信息的话，就提示，以及决定是否继续 if (!FilterBackData(result)) { return; } LISSYSLanguagePakObj = {}; for (var i = 0; i < result.length; i++) { LISSYSLanguagePakObj[result[i].GetCode] = result[i].RetData; } } }); } if (LISSYSLanguagePakObj[GetCode] != null) { return LISSYSLanguagePakObj[GetCode]; } else { var url = '../../sys/ashx/ashCommon.ashx?Method='; if (UserDR != null && UserDR != "") { url = '../../sys/ashx/ashCommonNoSession.ashx?Method='; } else { UserDR = ""; } var BLLCode = GetPathName(); //生成数据 $.ajax({ type: "get", dataType: "json", //text, json, xml cache: false, // async: true, //为true时，异步，不等待后台返回值，为false时强制等待；-asir url: url + "TranslateDataMTHD", data: { BLLCode: BLLCode, GetCode: GetCode, ChData: ChData, UserDR: UserDR }, success: function (result, status) { //对数据进行筛选，是后台抛的信息的话，就提示，以及决定是否继续 if (!FilterBackData(result)) { return; } } }); return ChData; }
}
$(function () { 
//得到要翻译的Dom
var LISSSYSTranslateDom = $('[listranslate]');
if (LISSSYSTranslateDom != null && LISSSYSTranslateDom.length > 0) { for (var i = 0; i < LISSSYSTranslateDom.length; i++) { var curDom = $(LISSSYSTranslateDom[i]); var transDesc = curDom.attr("listranslate"); if (transDesc != "") { var descArr = transDesc.split('^'); for (var j = 0; j < descArr.length; j++) { var oneDesc = descArr[j]; var oneArr = oneDesc.split('~'); if (oneArr.length > 1) { var oper = oneArr[0]; var GetCode = oneArr[1]; var ChData = ""; if (oper == "html") { ChData = curDom.html(); var transRes = TranslateDataMTHD(GetCode, ChData); curDom.html(transRes); } else { var operArr = oper.split('['); var oper = operArr[0]; var operChild = ""; if (operArr.length > 1) { operChild = operArr[1]; } ChData = curDom.attr(oper); var ChDataChild = ""; if (operChild != "") { var chDataArr = ChData.split(','); if (chDataArr.length > 0) { for (var k = 0; k < chDataArr.length; k++) { var oneChData = chDataArr[k]; var oneChDataArr = oneChData.split(':'); if (oneChDataArr[0] == operChild) { var ChDataChild = oneChDataArr[1]; if (ChDataChild.length > 2) { ChDataChild = ChDataChild.substring(1, ChDataChild.length - 1); } } } } } var ChNewData = ""; if (operChild != "") { ChNewData = ChDataChild; } else { ChNewData = ChData; } var transRes = TranslateDataMTHD(GetCode, ChNewData); if (operChild != "") { ChData = ChData.replace(ChDataChild, transRes); curDom.attr(oper,ChData); } else { curDom.attr(oper,transRes); } } } } } } }
});

以上代码也不复杂

2021-03-20 致想法比实现更重要

文章来源: blog.csdn.net，作者：Walk in loosing，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/zhanglianzhu_91/article/details/115032364

（完）