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提示
引用的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
(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),删除时不要真正地删除
设一个标志位就行
