/* 组件目的: 在java-web程序的研发过程中,经常使用枚举(譬如人物性别,审核状态等),枚举库存的值多半是英文或者是数字, 而前台在给用户展示的时候 ,需要对英文或者数字进行转译,就是翻译成对应的文本内容。 很多时候都是这种模式:后台java编写constant.java枚举类,统一管理枚举;而前台则要参考constant.java的内容, 将枚举的内容写死在jsp页面,或者在前台对应的再写一个constant.js文件,和后台的constant.java想对应。 这样的代价都是显而易见的:同步问题。后台枚举增加了或者修改了,前端都要相应的修改,否则就会出错。 解决方案:前后台使用同一个枚举的配置文件。 这个小组件展示的内容分两部分: 1是系统枚举设计的思路。 2是基于这个思路前端对应的代码。(后端没有给出示例,不过和前端大同小异) */
枚举配置xml文件:(xml不同于java文件,不用编译)
<?xml version="1.0" encoding="utf-8"?> <!-- 系统全局枚举声明文件 此处的枚举,同时适用于后台java和前台jsp页面,反过来说:后台java和前台jsp都必须遵守这个枚举,以此达到前后台枚举同步。 --> <constatns> <!-- 结构和使用说明: 1.根节点是constatns,紧接着是selector节点,selector节点只包含option节点。 2.option节点的数据存储【全部使用属性】表示。 3.selector 本身有两个属性: 1.name表示 当前选择器的名称 2.defaultKey 表示程序使用当前选择器的时候,使用的默认值。 4.option 没有子节点,只有三个属性 1.key 表示当前枚举的固定的值【和程序脱离、没有任何关系】。 2.value 表示后台程序\数据库存储的枚举的值(和程序有关系)。(key可以和value相同,也可以不同) 3.text 表示前台页面展示的枚举的文本(和程序有关系)。 设置key的值,目的就是保证枚举脱离程序后,程序依然可以访问枚举。 --> <!--demo: 用户性别 --> <selector name="userSex" defaultKey="boy"> <option key="boy" value="1" text="男"/> <option key="girl" value="0" text="女"/> <option key="secret" value="2" text="保密"/> </selector> <!-- demo: 数据审核状态 --> <selector name="checkStatus" defaultKey="tobecheck"> <option key="tobecheck" value="0" text="待审核"/> <option key="passed" value="1" text="审核通过"/> <option key="unpassed" value="2" text="审核未通过"/> </selector> </constatns>
/* * 将字符串转化成XMLDom对象或者读取物理的xml文件 * @param xmlStr xml字符串 * @param isFile 是否是物理文件( 默认是false) * @author 胥大健 201209 */ function createXmlDOM(xmlStr,isFile){ var xmlDom = null; isFile = isFile || false; if(xmlStr.match(/.+[.]{1}xml/)){isFile = true;} var isIE = (navigator.userAgent.indexOf("MSIE")>=0); if (isIE){//IE only xmlDom=new ActiveXObject("Microsoft.XMLDOM"); xmlDom.async="false"; if(isFile){ xmlDom.load(xmlStr); }else{ xmlDom.loadXML(xmlStr); } }else{//FF ,chrome try{ if(isFile){ var xhr = new XMLHttpRequest(); xhr.open("GET", xmlStr, false); xhr.send(null); xmlDom = xhr.responseXML; }else{ xmlDom=(new DOMParser()).parseFromString(xmlStr,"text/xml"); } }catch(e){ if(isFile){ xmlDom = document.implementation.createDocument("","",null); xmlDom.async =false; xmlDom.loadXML(xmlStr); }else{ xmlDom=(new DOMParser()).parseFromString(xmlStr,"text/xml"); } } } return xmlDom; } /** * 读取constants.xml枚举配置文件,获取枚举配置的JSON对象格式的方法 * @param xmlPath 枚举配置文件的物理路径 * @return 将xml格式的枚举配置转成成JSON格式的JS对象。 * @author 胥大健 20120924 **/ function getConstantJSON(xmlPath){ var ConstantJSON = {}; var xmlDom = createXmlDOM(xmlPath,false); //JSLogger.log(xmlDom); var constantDOM = (xmlDom.getElementsByTagName("constatns")[0]); var selectorArr = constantDOM.getElementsByTagName("selector"); for(var i=0,len=selectorArr.length;i<len;i++){ var selector = selectorArr[i]; var name = selector.getAttribute("name"); ConstantJSON[name] = {}; var optionsData = {}; var optionArr = selector.getElementsByTagName("option"); for(var j=0,len2=optionArr.length;j<len2;j++){ var option = optionArr[j]; var key = option.getAttribute("key"); optionsData[key] = { key:option.getAttribute("key"), value: option.getAttribute("value"), text:option.getAttribute("text") }; //ConstantJSON[name][key] = optionsData; } var def = selector.getAttribute("defaultKey"); optionsData["defaultData"] = { key:optionsData[def].key, value: optionsData[def].value, text:optionsData[def].text } ConstantJSON[name] = optionsData; //ConstantJSON[name]["defaultKey"] = } return ConstantJSON; } //测试: var ConstantJSON = getConstantJSON("constants.xml"); JSLogger.logColor("获取人物性别的枚举列表:","blue"); JSLogger.log(ConstantJSON.userSex,true); JSLogger.logColor("获取人物性别的枚举中男性的值(库存值)和显示文本(前台显示文本):","blue"); JSLogger.log(ConstantJSON.userSex.boy.value+":"+ConstantJSON.userSex.boy.text) JSLogger.logColor("先获取默认的key值,在根据key值获取性别枚举中对应的value:","blue"); JSLogger.log("人物性别默认值 = "+ConstantJSON.userSex.defaultData.value+"("+ConstantJSON.userSex.defaultData.text+")"); JSLogger.logColor("获取审核状态的枚举列表:","blue"); JSLogger.log(ConstantJSON.checkStatus.tobecheck,true); JSLogger.logColor("获取审核状态枚举的默认值:","blue"); JSLogger.log("审核状态默认值 = "+ConstantJSON.checkStatus.defaultData.value+"("+ConstantJSON.checkStatus.defaultData.text+")"); JSLogger.log(ConstantJSON,true); JSLogger.log(ConstantJSON.userSex,true); JSLogger.log(ConstantJSON.checkStatus,true);
zip附件是示例源码
图片附件是部分效果图
愤怒的coder - 标准化