关于添加修改内容的模块化、对象化处理架构说明，以 bom 模块为例。（编号：20110704A0801）

背景：

由于有些功能有重复使用的情况，模块化的架构有利于代码的维护与稳定。
例如：物料选择（使用的场合很多）、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!";
});

// 查找第一个被选中的记录的 permissionId
var 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