web(網站)開發的十個原則:
(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");
(3)耗時操作(上傳大檔案,如7m以上圖檔)時一定要有提示
執行耗時任務時一定要有提示,否則不清楚的使用者以為"當機","系統無響應"了.
提示方式有:文字提示,gif動畫提示.
下圖是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);
var password_value='';
if(passwordobj.value.trim)
{
password_value=passwordobj.value.trim();
password_value=com.whuang.hsj.trim(passwordobj.value);
if(!com.whuang.hsj.ishasvalue( password_value)){
com.whuang.hsj.seterrormessage(passwordobj,loginresultspan,'請填寫密碼.',false);
passwordobj.value='';
if(password_value.length<=20)
passwordobj.value=calcmd5(password_value);
com.whuang.hsj.seterrormessage(passwordobj,loginresultspan,'密碼過長',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代碼時也要考慮到重用性,通俗一點說,就是相同的代碼不要出現兩次.
我從工作時起,就注意代碼可重用性,不斷的封裝成方法,因為方法就是可重用性的最小粒度,然後就是架構了.
至今我自己維護的一個js檔案已有1700行,
可重用性是一個思維方式,類似于舉一反三,觸類旁通.不僅寫代碼,做其他事也需要考慮可重用性.比如我們接了項目,我們可能當做一錘子買賣,不考慮可重用性,隻要完成功能就行.
其實我們還有另外一種做法,我們可以把它做得很靈活,子產品化,便于重用.這樣下次我們接到類似的項目時,就可以直接套用了.這樣會節省很大的成本.
(7)通路沒有權限的頁面會跳轉到登入頁面,登入成功之後應直接進入剛才欲通路的頁面
比如我沒有登入就通路 http://192.168.1.125:8080/yhyc/product/list
會跳轉到登入頁面:
此時我輸入使用者名和密碼,登入成功之後應直接進入剛才我想通路的位址:http://192.168.1.125:8080/yhyc/product/list
(8)能點選的地方一定要差別
比如滑鼠移動到上面時變成手型或樣式有變化等.
代碼:
<img style="cursor:hand;" src="assets/uploads/product/imgpath_1414232682_1440.jpg" height="160px" width="250px" onclick="viewbigpic(this,event)">
style="cursor:hand;" 表示滑鼠移動到上面時光标變成手型.
(9)web項目的樣式必須統一
網站的樣式必須統一,不要有的頁面是藍色風格,有的頁面是紅色風格.
反例:
一個頁面對應一個css樣式檔案
這樣就有一個嚴重的問題:
(a)每個頁面對應一個css檔案,風格很難統一;
(b)改變風格時難度很大,因為每個檔案都得改一遍.
以上這種寫法就非常不好,容易造成樣式不統一,以後要改樣式,就需要改兩個地方.
(10),删除時不要真正地删除
設一個标志位就行