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