页面级的业务对象与展现映射封装(一种开发思路与技术实现)

最新推荐文章于 2024-04-25 23:11:56 发布

追随阳光

最新推荐文章于 2024-04-25 23:11:56 发布

阅读量516

点赞数

分类专栏：前台页面综合文章标签：技术 javascript 对象重构 dom

本文链接：https://blog.csdn.net/codingshop/article/details/18521943

版权

前台页面综合专栏收录该内容

1 篇文章 0 订阅

订阅专栏

还是那句话，编写可维护的代码，不断的抽象和重构以获取更好的代码和体验！

声明本文的开发场景：一个表单可以理解为一个对象(java中的业务对象bo，或者说vo,po等等)在view终端的展现，如果我们需要在页面级别对这个对象展现进行增删改并与后台交互，那么就可以考虑使用页面级的业务对象与展现映射封装了；

考虑一下这个场景：个人教育背景可以抽象为一个对象，包含了起止时间，学校信息，学习内容，毕业时间等等，页面提供了动态增加，删除，每个表单对应一段教育背景信息，提供了与后台交互的功能，你会怎么做呢？

一、构建隐藏的展现模板，提供方便维护的对象展现复制条件

我先写好了表单所需的所有元素包括样式，放在div中，这个div隐藏在页面中，这个表单就是教育背景表单，维护模板远比维护代码来得舒服；

二、使用dom深克隆进行业务对象新增

新增教育背景展现表单，那么我使用了dom对象的深克隆，复制了表单展现模板，然后添加到指定的容器中，避免了繁杂了创建代码，或者append('....htmlcode');展现完成

三、使用form2Bo工具或jquey的表单工具方法获取业务对象；

如果做ajax交互，那么json是不可少的，表单在那，我得把这个表单转成对象，form2Bo下面有具体代码，思路是获取表单下可取的值域，追加到对象中，详见代码；

html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>业务对象与展现层的映射封装</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="application/javascript">
			
			//使用模板进行复制，构建对象与展现的映射
			function addBo(){
				//使用模板进行复制
				var template = document.getElementById("template");
				var target = template.cloneNode(true);
				target.style.display = "block";
				document.getElementById("contentBox").appendChild(target);
			};
			
			//删除表单
			function deleteMe(event){
				var e = event.srcElement || event.target;
				var div = $(e).parents("div:first").get(0);
				if(confirm("确定删除吗？")){
					div.parentNode.removeChild(div);
				}
			}
			
			//保存表单
			function doSave(event){
				var e = event.srcElement || event.target;
				var form = $(e).parents("form").get(0);
				var json = form2Bo(form);
				var strArr = [];
				for(var key in json){
					strArr.push(key + ":" + json[key]);
				}
				alert(strArr.join("\n"));
			}
			
			//表单转对象
			function form2Bo(form){
				var inputs = form.getElementsByTagName("input");
				var textareas = form.getElementsByTagName("textarea");
				var json = {};
				for(var i = 0,len = inputs.length; i < len; i++){
					var ipt = inputs[i];
					if(ipt.type != "button"){
						json[ipt.name] = ipt.value;
					}
				}
				for(var i = 0,len = textareas.length; i < len; i++){
					var tar = textareas[i];
					json[tar.name] = $.trim(tar.value);
				}
				return json;
			}
			
		</script>
	</head>
	<body style="font-size: 14px;">
		<h1>业务对象与展现层的映射封装</h1>
		<div style="width: 100%;text-align: right;">
			<input type="button" value="+" οnclick="addBo();"/>
		</div>
		<div id="contentBox">
		</div>
		<div id="template" style="display:none;border: 1px solid #333333;margin-bottom: 10px;width:100%;">
			<table name="tabTitle" width="100%" style="border:solid 1px groove;background-color: #A3BBD7;">
				<tr>
					<td>2013年12月1日-</td>
					<td>2013年12月10日</td>
					<td>教育机构名称</td>
					<td>手扶拖拉机专业培训</td>
					<td><input type="button" value="-" οnclick="deleteMe(event);"/></td>
				</tr>
			</table>
			<form>
				<table name="tableForm" width="100%">
					<tr>
						<td align="right">学校培训机构：</td>
						<td><input type="input" name="school" value="山东蓝翔国际学校"/></td>
						<td align="right">开始日期：</td>
						<td><input type="input" name="bgnDate" value="2001-07-01"/></td>
						<td align="right">结束日期：</td>
						<td><input type="input" name="endDate" value="2101-07-01"/></td>
					</tr>
					<tr>
						<td align="right">资格证书：</td>
						<td><input type="input" name="book" value="手扶拖拉机好几级证"/></td>
						<td align="right">获取日期：</td>
						<td><input type="input" name="gainDate" value="2200-07-01"/></td>
						<td align="right">附件：</td>
						<td><input type="input" name="fileName" value="支个招.doc"/></td>
					</tr>
					<tr>
						<td align="right">专业培训内容：</td>
						<td colspan="5">
							<textarea name="profession" style="width:95%;">
								手扶二级培训
							</textarea>
						</td>
					</tr>
					<tr>
						<td align="right">备注：</td>
						<td colspan="5">
							<textarea name="remark" style="width:95%;">
								备注，备注什么呢？？？
							</textarea>
						</td>
					</tr>
					<tr>
						<td colspan="6" align="center">
							<input type="button" value="保存" οnclick="doSave(event);"/>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>