关于添加修改内容的模块化、对象化处理架构说明，以 bom 模块为例。（编号：20110704A0801）
来源：互联网 发布：Sql修改表字段类型 编辑：程序博客网 时间：2024/05/23 01:00
背景：
由于有些功能有重复使用的情况，模块化的架构有利于代码的维护与稳定。
例如：物料选择（使用的场合很多）、bom 的添加、修改（在 bom 管理页面要用，在 bom 分录页面也要用到，因些改造成模块化架构）
遵循对象化开发的思路：先设置对象属性，然后调用，最后处理接收的对象。
具体代码罗列如下：
bom.jsp 中包含文件代码：
<!-- 选择物料 --><s:include value="../item/select.jsp"></s:include><!-- bom Manage --><s:include value="../bom/manage.jsp"></s:include>
bom.jsp 文件中的调用代码：
<a href='javascript:bom.add();'>添加</a>
<a href='javascript:bom.add();'>添加</a>
bom.js 文件中的函数：
//js 类var bom = { add: function(){ dojo.byId("bomManage_handlerFunction").value = "bom.getList(1)" ; console.log("201107031636 - " + dojo.byId("bomManage_handlerFunction").value ); // 显示对话框。 bomManage.add() ; },... ...bom/anage.jsp 文件内容：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><script type="text/javascript" src="bom/manage.js"></script><input id="bomManage_handlerFunction" type="hidden" /><%-- 对话框: 添加、修改、删除 --%><div id="bomManage_Dialog" dojoType="dijit.Dialog" title="添加、修改、删除" style="width:600px; display: none;"> <form id="bomManage_Form" dojoType="dijit.form.Form"> <input title="表主键" id="bomManage_bomId" name="bomBean.bomId" type="hidden" /> <input title="制单人 ID" id="bomManage_creatorId" name="bomBean.creatorId" type="hidden" value="123" /><table class="formTable"> <tr><td>版本：<input id="bomManage_version" name="bomBean.version" maxlength="12" type="text" value="1.0"dojoType="dijit.form.ValidationTextBox"required="true"regExp = "[^'\s]{2,}" title="最少2个字符，最多12个字符，不可以有空格，不可以有单撇。" promptMessage="请输入版本信息。"trim="true"onChange = "" /></td></tr><tr><td>状态：<input type="radio" id="bomManage_isActive_radio" name="bomBean.isActive" value = "1" />激活 <input type="radio" id="bomManage_isNotActive_radio" name="bomBean.isActive" value = "0" />禁用</td></tr><tr><td><input type="hidden" id="bomManage_itemId" name="bomBean.itemId" />物料编号：<label id="bomManage_itemNumber_Label"></label>物料名称：<label id="bomManage_itemName_Label"></label><<a href="javascript:bomManage.itemSelect();">选择物料</a>>助记码： <label id="bomManage_itemHelpcode_Label"></label> </td></tr><tr><td>数量：<span dojoType="dijit.form.NumberSpinner" intermediateChanges="true" id="bomManage_quantity" name="bomBean.quantity" value="1"constraints="{min:0,max:9999}"><script type="dojo/connect" data-dojo-event="onChange">// dojo.filter() applies a boolean function to each array element// and returns an array of matches. In our case, the over:// attributes are sorted downwards, so the first return element// will be the lowest//var self = this; // So widget is referencable in function//var tempColor = dojo.filter(cutoffPoints, function(temp) {//return self.getValue() > temp.over;//})[0].color;// Lastly set the background color of the indicator box//dojo.style(dojo.byId("tempBox"), "backgroundColor", tempColor)</script></span></td></tr><tr><td>备注：<input type="text" id="bomManage_note" name="bomBean.note"dojoType="dijit.form.ValidationTextBox" maxlength="50"/></td></tr></table></form><button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" onclick="bomManage.insert();">添 加</button><button id="bomManage_UpdateButton" dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" onclick="bomManage.update();">修改</button><button id="bomManage_DeleteButton" dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" onclick="bomManage.deleteInit();">刪除</button><button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCancel" onclick="dijit.byId('bomManage_Dialog').hide();">取 消</button> <div id="bomManage_messagePanel"></div></div>bom/manage.js 文件内容：
/** * *//*********************************************************************** * System : NLMRPII* title : 权限管理* Date : 2011-06-13* Description : * Author : Livon ************************************************************************/ var validInputNode = null ; // 无效的输入数据 //js 类var bomManage = { itemSelect: function(){dojo.byId("itemSelect_handlerFunction").value = "bomManage.itemSelect_handler";itemSelect.show();}, // 获取 getList: function( pageNumber ){ // 初始化 table.showMessage("Data_List_Container", "Loading ..."); dojo.byId("pagination_Panel").innerHTML = ""; //显示分页操作板。 var filterKeys = trim( dijit.byId("filterKeys").value ) ; filterKeys.replace(/[(\s) ，,]+/g,' ') ; // 准备参数 var postContent = new Array(); postContent["bomBean.pageNumber"] = pageNumber; // 页码 postContent["bomBean.pageSize"] = "10"; // 每页记录数 postContent["bomBean.filterKeys"] = filterKeys.split(" "); postContent["formId"] = "filterForm"; // 高级查询（过滤器）的设置表单。 postContent["url"] = "bom!getBom.action"; postContent["handlerFunction"] = "bom.getList_handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); //console.log("getList_handler start at : " + (new Date()).getTime() ); // 准备参数 （ 为了 分页链接 ） var postContent4pagination = dojo.clone(postContent); postContent4pagination["url"] = "bom!getPaginationHtml.action" ; postContent4pagination["handlerFunction"] = "bom.showPagination" ; // 处理函数名称 postContent4pagination["bomBean.dataList_JsFunction"] = "bom.getList" ; // 发送 common.xhrPost( postContent4pagination ); //console.log("showPagination start at : " + (new Date()).getTime() ); }, // 处理函数 getList_handler: function( response ){ //（1）清空表格，准备填充。 table.dataClear("Data_List_Container"); //（2）设置查询关键字 var reg = common.getFilterReg("filterKeys"); //（3）显示数据 var list = response.boms; for ( var i = 0; i < list.length; i++) { // 准备数据 var cells = new Array(); cells[0] = "<input type='checkbox' name='rowCheckBox'" + " value='" + list[i].bomId + "'" + " title='" + list[i].bomId + "'>"; cells[1] = list[i].rowNumber; cells[2] = "<a title='点击查看分录信息' href='bomEntry.action?bomEntryBean.bomId=" + list[i].bomId + "'>" + list[i].bomNumber.replace( reg ,"<em>$1</em>") + "</a>" ; cells[3] = list[i].itemNumber.replace( reg ,"<em>$1</em>") ; cells[4] = list[i].itemName.replace( reg ,"<em>$1</em>") ; cells[5] = list[i].itemHelpCode.replace( reg ,"<em>$1</em>") ; cells[6] = list[i].quantity; cells[7] = list[i].measureUnit; cells[8] = list[i].auditedDate; cells[9] = (list[i].isActive == 1)?"正常":"禁用"; cells[10] = (list[i].entryItemNumber == null)?"无":list[i].entryItemNumber.replace( reg ,"<em>$1</em>") ; cells[11] = (list[i].entryItemName == null)?"":list[i].entryItemName.replace( reg ,"<em>$1</em>") ; cells[12] = (list[i].entryItemHelpCode == null)?"":list[i].entryItemHelpCode.replace( reg ,"<em>$1</em>") ; cells[13] = list[i].entryQuantity; cells[14] = list[i].entryMeasureUnit; // 插入一行 table.insertRow( "Data_List_Container", cells ); // 位于 js/table.js } //（4）提示 dojo.publish("promptMessageTopic", [{message: "数据已更新。",type: "message", duration: 1000}]); }, showPagination: function( response ){ dojo.byId("pagination_Panel").innerHTML = response.paginationHtml; //显示分页操作板。 console.log("showPagination end at : " + + (new Date()).getTime() ); }, menuInit: function(){ //rightclick //var trOriginalBgColor = newTR.bgColor;//newTR.onmouseover=function(){//this.style.backgroundColor="#BEF5AD";//this.style.borderBottom="2px solid green";//} //鼠标放上去的颜色//newTR.onmouseout=function(){//this.style.backgroundColor= trOriginalBgColor ;//this.style.borderBottom="1px dotted green";//} //鼠标移出后的颜色 var myTableRows = dojo.query("#Data_List_Container tr"); dojo.forEach( myTableRows, function(entry, i){ //console.debug(entry, "at index", i); //dojo.connect(entry,"rightclick",null,function(){ alert(789); }); permission.newMenu(entry); }); }, newMenu: function(node){ pMenu = new dijit.Menu({ //targetNodeIds: myTableRows }); pMenu.addChild(new dijit.MenuItem({ label: "修改", iconClass: "dijitEditorIcon dijitEditorIconCopy", disabled: false, onClick: function() { var permissionId = node.childNodes[0].childNodes[0].value ; permission.edit_getData( permissionId ); } })); pMenu.addChild(new dijit.MenuItem({ label: "删除", iconClass: "dijitEditorIcon dijitEditorIconDelete", onClick: function() { var permissionId = node.childNodes[0].childNodes[0].value ; permission.Delete( permissionId ); } })); /* pMenu.addChild(new dijit.CheckedMenuItem({ label: "checkable menu item" }));*/ pMenu.addChild(new dijit.MenuSeparator());/* var pSubMenu = new dijit.Menu(); pSubMenu.addChild(new dijit.MenuItem({ label: "Submenu item" })); pSubMenu.addChild(new dijit.MenuItem({ label: "Submenu item" })); pMenu.addChild(new dijit.PopupMenuItem({ label: "Submenu", popup: pSubMenu }));*/ pMenu.addChild(new dijit.MenuItem({ label: "[快捷菜单]", disabled: true })); pMenu.startup(); pMenu.bindDomNode(node); }, add: function(){ // 设置初值，均为空。 dijit.byId("bomManage_Form").reset(); dojo.byId("bomManage_bomId").value = null ; dojo.byId("bomManage_itemId").value = null ; dojo.byId("bomManage_itemNumber_Label").innerHTML = null ; dojo.byId("bomManage_itemName_Label").innerHTML = null ; dojo.byId("bomManage_itemHelpcode_Label").innerHTML = null ; dijit.byId("bomManage_UpdateButton").setAttribute('disabled', true); dijit.byId("bomManage_DeleteButton").setAttribute('disabled', true); dojo.byId("bomManage_messagePanel").innerHTML = ""; dojo.attr("bomManage_messagePanel", "class", ""); // 显示对话框。 dijit.byId("bomManage_Dialog").show(); }, // 检查物料是否合法。 itemValid: function(){ bomManage.remoteValid("itemId"); validInputNode = dijit.byId("bomBean.itemId"); }, remoteValid: function( field ){ // 准备参数 var postContent = new Array(); /* 如果要验证权限名称，则设置其它数据为空，去服务器验证，服务器会检查 permissionId 及 非空数据的合法性。 * 如果是添加，则 permissionId = 0 */ if( field == "itemId" ){ postContent["bomBean.bomNumber"] = "" ; //postContent["permissionBean.permissionCode"] = "" ; } postContent["bomBean.bomId"] = dojo.byId("bomManage_bomId").value ; postContent["bomBean.itemId"] = dojo.byId("bomManage_itemId").value ; postContent["url"] = "bom!validCheck.action"; postContent["handlerFunction"] = "bomManage.remoteValid_Handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); }, remoteValid_Handler: function(response){ console.log( validInputNode ); if( response.message == 0 ){ dojo.publish("promptMessageTopic", [{message: "有效。" , type: "message", duration: 5000}]); }else{ alert("该物料已经存在！"); //dojo.publish("promptMessageTopic", [{message: "错误：值无效！" //, type: "error", duration: 5000}]); //validInputNode.focus(); //validInputNode.displayMessage(validInputNode.invalidMessage); //validInputNode.attr("state", "Error"); } }, validCheck: function(){ // form.validate 检查表单 /* if(!form.validate()||!content){ alert("数据格式不正确！"); return false; }*/ var invalidWidget = null; // 检查权限编号 //invalidWidget = dijit.byId("bomBean.permissionNumber").isValid() ? invalidWidget : dijit.byId("permissionBean.permissionNumber"); // 检查权限名 //invalidWidget = dijit.byId("permissionBean.permissionName").isValid()? invalidWidget : dijit.byId("permissionBean.permissionName"); if( invalidWidget != null){ invalidWidget.focus(); invalidWidget.displayMessage(invalidWidget.invalidMessage); return false; }else{ //if(!checkTextareaMax("bomBean.note",500)){ //dojo.publish("promptMessageTopic", [{message: "备注内容最大长度500个字符。",type: "error", duration: 3000}]);//return false; //} } return true; },insert: function(){if( bomManage.validCheck() ){//dojo.publish("promptMessageTopic", [{message: "",type: "message", duration: 3000}]);// 显示状态及结果信息。//var messagePanel = dojo.byId("messagePanel");//dojo.attr("messagePanel", "class", "NormalMessagePanel");//messagePanel.innerHTML = "添加中 ...";// 准备参数 var postContent = new Array(); postContent["bomBean.action"] = "Insert" ;postContent["formId"] = "bomManage_Form"; // 表单。 postContent["url"] = "bom!manage.action"; postContent["handlerFunction"] = "bomManage.insert_handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); console.debug("到这儿了吗？");}},insert_handler: function(response){if( response.code ==0 ){bomManage.close();alert("添加成功！");}//dojo.attr("messagePanel", "class", "NormalMessagePanel");//dojo.attr("messagePanel", "innerHTML", "添加成功！");//dojo.publish("promptMessageTopic", [{message: "正在更新数据 ... ",type: "message", duration: 3000}]);//bom.getList(1);},edit: function(){dojo.query("#Data_List_Container input").forEach(function(node, index, array){ //console.log( node.title + node.checked ); //node.innerHTML = "new version content!"; });// 查找第一个被选中的记录的 permissionIdvar bomId = 0;dojo.some( dojo.query("#Data_List_Container input"), function(node){if(node.checked){bomId = node.title;};return node.checked;});if( bomId != 0 ){//window.location = "bomEntry.action?bomEntryBean.bomId=" + bomId ;//bom.edit_getData( bomId );bomManage.edit_getData(bomId);}else{alert("请选择数据。");}},edit_getData: function( bomId ){console.log("I am fired!"); // 准备参数 var postContent = new Array(); postContent["bomBean.bomId"] = bomId ; postContent["bomBean.bomNumber"] = ""; // postContent["formId"] = "bomManage_Form"; // 高级查询（过滤器）的设置表单。 postContent["url"] = "bom!getBom.action"; postContent["handlerFunction"] = "bomManage.edit_getData_handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); },edit_getData_handler: function( response ){var list = response.boms; dojo.byId("bomManage_bomId").value = list[0].bomId ;dojo.byId("bomManage_version").value = list[0].version ;if(list[0].isActive == 1){dojo.byId("bomManage_isActive_radio").checked = true ;}else{dojo.byId("bomManage_isNotActive_radio").checked = true ;}dojo.byId("bomManage_itemId").value = list[0].itemId ;dojo.byId("bomManage_itemNumber_Label").innerHTML = list[0].itemNumber ;dojo.byId("bomManage_itemName_Label").innerHTML = list[0].itemName ;dojo.byId("bomManage_itemHelpcode_Label").innerHTML = list[0].itemHelpCode ;dojo.byId("bomManage_quantity").value = list[0].quantity ;dojo.byId("bomManage_note").value = list[0].note ; dijit.byId("bomManage_UpdateButton").setAttribute('disabled', false); dijit.byId("bomManage_DeleteButton").setAttribute('disabled', false); dojo.byId("bomManage_messagePanel").innerHTML = ""; dojo.attr("bomManage_messagePanel", "class", ""); // 显示对话框。 dijit.byId("bomManage_Dialog").show();},update: function(){if( bomManage.validCheck() ){dojo.publish("promptMessageTopic", [{message: "",type: "message", duration: 3000}]);// 显示状态及结果信息。var messagePanel = dojo.byId("bomManage_messagePanel");dojo.attr( messagePanel, "class", "NormalMessagePanel");messagePanel.innerHTML = "修改中 ...";// 准备参数 var postContent = new Array(); postContent["bomBean.action"] = "Update"; // 页码postContent["formId"] = "bomManage_Form"; // 表单。 postContent["url"] = "bom!manage.action"; postContent["handlerFunction"] = "bomManage.update_handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); }},update_handler: function( response ){dojo.attr("bomManage_messagePanel", "class", "NormalMessagePanel");dojo.attr("bomManage_messagePanel", "innerHTML", "修改成功！");dojo.publish("promptMessageTopic", [{message: "正在更新数据 ... ",type: "message", duration: 3000}]);bomManage.close();},deleteInit: function(){var bomIds = "0";dojo.query("#Data_List_Container input").forEach(function(node, index, array){ console.log( node.title + node.checked ); //node.innerHTML = "new version content!"; if( node.checked ){bomIds += "," + node.title ;} });//console.log("permissionIds = " + permissionIds.substring(1));//bomIds = dijit.byId("permissionBean.permissionIds").getValue() + permissionIds ;console.log("bomIds = " + bomIds );bom.Delete( bomIds );},Delete: function( bomIds ){if ( confirm("确定要删除吗?") !="0"){dojo.publish("promptMessageTopic", [{"正在删除 ... ": "",type: "message", duration: 3000}]);// 准备参数 var postContent = new Array(); postContent["bomBean.action"] = "Delete"; // 页码postContent["bomBean.bomIds"] = bomIds; // 页码postContent["url"] = "bom!manage.action"; postContent["handlerFunction"] = "bom.delete_handler"; // 处理函数名称 // 发送 common.xhrPost( postContent ); }},delete_handler: function( response ){console.log( "response.code = " + response.code );//dijit.byId('permission_Dialog').hide();bom.getList(1);},itemSelect_handler: function(items ){dojo.byId("bomManage_itemId").value = items[0].id ;dojo.byId("bomManage_itemNumber_Label").innerHTML = items[0].number ;dojo.byId("bomManage_itemName_Label").innerHTML = items[0].name ;dojo.byId("bomManage_itemHelpcode_Label").innerHTML = items[0].helpCode ;// 检查选择的物料的有效性。bomManage.itemValid();},// 关闭对话框close: function(){ var func = dojo.byId("bomManage_handlerFunction").value ; eval(func); dijit.byId('bomManage_Dialog').hide();}} //处理 物料选择function itemSelect_handler( items ){dojo.byId("bomBean.itemId").value = items[0].id ;dojo.byId("itemNumber_Label").innerHTML = items[0].number ;dojo.byId("itemName_Label").innerHTML = items[0].name ;dojo.byId("itemHelpcode_Label").innerHTML = items[0].helpCode ;// 检查选择的物料的有效性。bom.itemValid();}// end- 关于添加修改内容的模块化、对象化处理架构说明，以 bom 模块为例。（编号：20110704A0801）
- ADO.NET中关于主键为自动编号的主从表（主祥表）的修改
- 由多个Object(以Teacher为例）对象所形成的数组可以使用Arrays.sort方法进行排序（编号由低到高排序）。
- linux 添加python 模块搜索路径(以thrift为例)
- 以SayHello为例说明三种事件处理方式
- 以WebBrowser.DocumentCompleted 事件为例，说明用C#如何完成事件的订阅处理。
- .Net 以WebBrowser.DocumentCompleted 事件为例，说明用C#如何完成事件的订阅处理
- 以WebBrowser.DocumentCompleted 事件为例，说明用C#如何完成事件的订阅处理。
- OpenLayers3学习二：点标记的添加删除和修改（以类为接口）
- 关于WEDC译文编号的说明
- NFS功能的添加（本篇以路由为例）
- HashCode知识总结（以set存储对象为例进行说明）
- [有修改]Android Studio 添加 Library Project （以Volley为例）
- tomcat请求修改为nio处理的配置说明
- 关于给javascript对象添加、删除、修改对象的属性
- S5PV210的异常处理第一阶段（以中断为例）
- 在立即执行函数内组合使用构造函数模式和原型模式创建对象，实现模块化开发（以daterangepicker.js为例）
- LINUX下PHP编译添加相应的动态扩展模块so（不需要重新编译PHP，以openssl.so为例）
- jquert的$.getJSON
- 朋友致我的一封信
- 查看数据库文件大小
- windows phone7 免费 网络中文输入平台
- 实践用CSS制作框架页效果
- 关于添加修改内容的模块化、对象化处理架构说明，以 bom 模块为例。（编号：20110704A0801）
- 【上班那点事】"TO, CC, BCC"-办公室邮件门道知多少
- Windows Azure(四－4)：云上的轻量数据库--Table Storage
- Setting up Git on CentOS 5 server
- NETCONF协议集的更新了
- 现在这种感觉很好
- Installing the EPEL Repository on CentOS or RHEL
- C#委托事件
- datawindow 如何将grid格式改为free格式
