任何一個項目說白了,無非就是對數據進行增刪改查的操作,爲了使開發人員不過多的關注視圖層而去關注業務邏輯層,我們一般都需要對視圖層代碼進行封裝,這樣可以減少開發量,縮短開發時間,特別是在使用ajax的開發過程中所涉及到的js代碼特別多,而大多數又是重複的,進行封裝是完全有必要的.
1,定義整個視圖層的樣式,把樣式與html分開這是在B/S開發中非常重要且必要的.如果把樣式帶入html,對於後期有維護是非常困難的,比如:我要改變表格的高度,那麼所以涉及到表格的頁面你都要去改到,看上去是簡單,無非是改變一個數字,但是作爲一個開發人員一定要清楚一定,改動的同時,我們會不可避免的帶入新的問題,而且這種問題是在無意識中帶入的,在查找起來是非常非常困難的,比如在頁面裏多出一個>號,你可能找一天你都找不出來,到底是在什麼地方帶進去了.所以在開始做項目的時候,一定要把樣式與html分開,以後的改動都在css裏面改動.
2,儘量減少在頁面中使用js代碼,在ajax開發中,作爲系統分析人員,一定要最大限度的減少頁面中的js代碼,在項目組裏面,每個人編寫代碼的風格是不一樣,特別向js這種靈活性較強的腳本語言,這樣有利於後期的維護,要不然當某個開發人員走了,後期屬於他的那一個模塊交給誰去維護誰都頭疼啊,很多時候讀別人的代碼,還不如自己寫.
下面是我在這個項目的封裝代碼,貼出來大家參考參考,如有不足之處,望見諒.
1,增加
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../include/head.jsp"%>
<title>客戶增加</title>
</head>
<body>
<div id="divtable">
<form id="form">
<table class="table" width="95%">
<tr>
<td class="one">
客戶姓名:
</td>
<td colspan="3"><input type="text" name="clName" id="clName" class="input_out" >
<span title="必填項" class="asterisk">*</span>
</td>
</tr>
<tr>
<td class="one">
客戶姓別:
</td>
<td>
<select name="clSex" id="clSex" class="input_out">
<option value='男'>男</option>
<option value='女'>女</option>
</select>
</td>
<td class="one">
客戶電話:
</td>
<td><input type="text" name="clHtel" id="clHtel" class="input_out" />
</td>
<tr>
<td class="one">
客戶手機:
</td>
<td>
<input type="text" name="clTel" id="clientTel" class="input_out" />
</td>
<td class="one">
身份證號
</td>
<td><input type="text" name="clCertificate" id="clCertificate" class="input_out" />
</td>
</tr>
<tr>
<td class="one">
客戶地址:
</td>
<td colspan="3"><input type="text" name="clAddr" id="clAddr" class="input_out" />
</td>
</tr>
<tr>
<td class="one">
備註:
</td>
<td colspan="3">
<textarea rows="4" cols="51" class="input_out" name="remark" id="remark"></textarea>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="保 存" class=btn_mouseout onmouseover="this.className='btn_mouseover'"
onmouseout="this.className='btn_mouseout'" title="保 存" onclick="add('Addclient.action','post','form','client',2,'','')"/>
<input type="reset" value="重 置" class=btn_mouseout onmouseover="this.className='btn_mouseover'"
onmouseout="this.className='btn_mouseout'" title="重 置"/>
</td>
</tr>
</table>
</form>
</div>
<body>
</html>
上面是一個增加的頁面,頁面裏沒有過多的代碼,開發人員,只需要改到input的name屬性,調用add方法把相應的參數傳過去就可以了
add方法的js代碼
function add(url,type,fromName,beanName,butcon,menu,refresh,boole){
var b=true;
//表單驗證
if(boole!=""&&boole=="true"){
b=doValidate(fromName);
}
if(b){
//提交
$.ajax({url:url,
type:type,
data:getData(fromName,beanName,butcon),//通過這個方法構造發送到服務器的json數據
dataType:'json',
timeout:1000,
error:function(data) {
alert("增加失敗");
},
success:function(data) {
alert("增加成功");
$("#grid",window.parent.document).flexReload();
if(menu!=""&&menu=="true"){
window.parent.document.frames('I1').location.reload('../menu.jsp');
}
if(refresh!=""){
window.location.reload(refresh);
}
}
})
}
}
function getData(fromName,beanName,butcon){
var a=document.getElementById(fromName);
var str="";
var i=0;
if(a.elements[0].name=="pId"){
i=1;
str+=beanName+"."+a.elements[0].name+"="+a.elements[0].pid+"&";
}
/**
$("#form").each(function (index, domEle){
})
*/
for(i;i<a.length-butcon;i++){
//if(a.elements[i].value!=""){//這裏的作用把隱藏的input和爲空的input過慮,減少數據傳輸成本
if(beanName!=""){//如果沒有傳beanName說明在name屬性上就做了轉換
str+=beanName+"."+a.elements[i].name;
}else{
str+=a.elements[i].name;
}
str+="=";
str+=a.elements[i].value;
if(i!=a.length-butcon-1){
str+="&";
}
// }
}
// alert(str);
return str;
}
其它頁面基本操作也一樣