Web開發的七個原則

發表於2019-05-11
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"); 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
JAVASCRIPT 程式設計
評論(1)

相關文章