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

 

(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),删除时不要真正地删除

 

设一个标志位就行