(1)能在前端校驗的就儘量在前端校驗
比如上傳圖片,在後臺也可以校驗:判斷MultipartFile 是否為空.但是也可以直接在前臺js校驗:
<script type="text/javascript"> var checkUploadForm=function(){ var uploadFile = com.whuang.hsj.$one("pic"); if (com.whuang.hsj.isHasValue(uploadFile.value)) { $('#tipsDiv').html("<font color='blue' style='font-weight: bold' > 正在上傳,請耐心等待...</font>"); showLoadPanel(); return true; } else { alert("請選擇要上傳的檔案."); return false; }
} </script>(2)只要頁面有文字框,則進入頁面時自動聚焦$(document).ready(function(){ //$('#tbody1 tr:odd').filter(':gt(0)').addClass('odd'); $('#tbody1 tr:even').filter(':gt(0)').addClass('even'); var itemname22=com.whuang.hsj.$one("itemname"); if(itemname22){ itemname22.focus(); } //$('#tbody1 td:contains("Because of you")').addClass('highlight'); });window.onload=function(){ var itemname22=com.whuang.hsj.$one("itemname"); if(itemname22){
itemname22.focus(); }
}
(3)耗時操作(上傳大檔案,如7M以上圖片)時一定要有提示
執行耗時任務時一定要有提示,否則不清楚的使用者以為" 當機 ","系統無響應"了.
提示方式有:文字提示,gif動畫提示.
引用的gif檔案如下:
(4)能不跳轉的就不跳轉
拿登入來舉例,其實登入時有些校驗可以在頁面js中校驗,但是使用者名稱,密碼的校驗就必須提交到伺服器後臺校驗了,一般情況下會同步地傳送請求,所以會有跳轉.
跳轉有兩個麻煩事,一是螢幕會閃一下,二是填寫的資訊都沒有了(瀏覽器自動儲存的情況不在此列).
校驗使用者名稱密碼時也可以不跳轉,如何實現呢?
使用 Ajax
function ajaxLogin(){ var usernameObj=com.whuang.hsj.$one('username'); var passwordObj=com.whuang.hsj.$one('password'); var loginResultSpan=com.whuang.hsj.$id("loginResult"); if(!com.whuang.hsj.isHasValue( usernameObj.value)){ com.whuang.hsj.setErrorMessage(usernameObj,loginResultSpan,'請填寫使用者名稱.',false); return false; } var password_value=''; if(passwordObj.value.trim) { password_value=passwordObj.value.trim(); } else { password_value=com.whuang.hsj.trim(passwordObj.value); } if(!com.whuang.hsj.isHasValue( password_value)){ com.whuang.hsj.setErrorMessage(passwordObj,loginResultSpan,'請填寫密碼.',false); passwordObj.value=''; return false; } if(password_value.length<=20) { passwordObj.value=calcMD5(password_value); } else { com.whuang.hsj.setErrorMessage(passwordObj,loginResultSpan,'密碼過長',false); passwordObj.value=''; return false; } var abc44=function (obj) { // alert(obj); var jsonObj2=eval("("+obj+")"); // alert(obj) var loginResult=jsonObj2.result; if(loginResult=='failed'){ com.whuang.hsj.setErrorMessage(usernameObj,loginResultSpan,jsonObj2.error,false); passwordObj.value=''; }else{ location.href="<%=path%>/orders/list"; } }; var url2="<%=path%>/index/login"; //alert(url2); var xmlhw5=new XMLHttpHuangWei(url2, "username="+usernameObj.value+"&password="+passwordObj.value,abc44); xmlhw5.XMLGetMethod();
}(5)儘量不要彈框,採用span/div提示一般提示錯誤時採用alert,但是alert多了是不是感覺很煩,為什麼?必須要你點選一下才能消失.
現在的趨勢是採用span/div顯示錯誤資訊,如下圖
(6)可擴充套件性和可重用性
殊不知現在有很多js框架,比如jQuery,dojo等.框架是幹嘛的?說白了就是 避免和減少重複勞動 .所以我開玩笑,這些框架都是懶人創造的.
我們寫js程式碼時也要考慮到重用性,通俗一點說,就是 相同的程式碼不要出現兩次 .
我從工作時起,就注意程式碼可重用性,不斷的封裝成方法,因為方法就是可重用性的最小粒度,然後就是框架了.
至今我自己維護的一個js檔案已有1700行,
可重用性是一個思維方式,類似於舉一反三,觸類旁通.不僅寫程式碼,做其他事也需要考慮可重用性.比如我們接了專案,我們可能當做一錘子買賣,不考慮可重用性,只要完成功能就行.其實我們還有另外一種做法,我們可以把它做得很靈活,模組化,便於重用.這樣下次我們接到類似的專案時,就可以直接套用了.這樣會節省很大的成本.
(7)訪問沒有許可權的頁面會跳轉到登入頁面,登入成功之後應直接進入剛才欲訪問的頁面
比如我沒有登入就訪問 http://192.168.1.125:8080/yhyc/product/list
會跳轉到登入頁面:
此時我輸入使用者名稱和密碼,登入成功之後應直接進入剛才我想訪問的地址:http://192.168.1.125:8080/yhyc/product/list
評論(1)