Web开发的七个原则
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
已有 0 人发表留言,猛击->> 这里<<-参与讨论
ITeye推荐