Web开发的七个原则

标签: web 开发 原则 | 发表时间:2014-10-18 12:14 | 作者:hw1287789687
出处:http://www.iteye.com

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推荐



相关 [web 开发 原则] 推荐:

Web开发的七个原则

- - JavaScript - Web前端 - ITeye博客
Web(网站)开发的七个原则:. (1)能在前端校验的就尽量在前端校验.  比如上传图片,在后台也可以校验:判断MultipartFile 是否为空.但是也可以直接在前台js校验:. $('#tipsDiv').html(" 正在上传,请耐心等待...");.

web交互设计原则和模式

- shallwelin - 译言-
原文作者:Bill Scott. 原文链接:Designing Web Interfaces Principles and Patterns for Rich Interaction. web界面设计(丰富交互设计的原则和模式). (本书英文版大家可以到我blog下载:http://blog.youmila.com/?p=325).

华为内部的Web安全原则

- - 服务器运维与网站架构|Linux运维|X研究
Web安全原则 1.认证模块必须采用防暴力破解机制,例如:验证码或者多次连续尝试登录失败后锁定帐号或IP. 说明:如采用多次连续尝试登录失败后锁定帐号或IP的方式,需支持连续登录失败锁定策略的“允许连续失败的次数”可配置,支持在锁定时间超时后自动解锁. 2.对于每一个需要授权访问的页面或servlet的请求都必须核实用户的会话标识是否合法、用户是否被授权执行这个操作,以防止URL越权.

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

Web开发者必备:Web应用检查清单

- - ITeye博客
想做一个高质量的Web应用,前前后后要做的事情非常多. 国外开发者 Ata Sasmaz 为 Web 开发者制作分享了一份检查清单,包括应用开发、性能、安全、分析、可用性、可靠性、转换策略、竞争策略这些方面需要注意的事项. 清单内容可能不全面,欢迎大家在评论中补充. JavaScript 允许捕获异常.

Web前端:11个让你代码整洁的原则

- - 博客 - 伯乐在线
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒. 同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗. 上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢.

[Web] 几个原则让前端代码更整洁

- - 博客园_首页
    在讲解今天的知识点之前,我想先展示两个片段的代码,让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的,需要去改进的.     片段一  1 .     片段二是对片段一的改进,下面就改进点进行详细的讲解.     片段二的第 1 行,添加了代码 .

Web应用程序的开发步骤

- xxg - 月光博客
  如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现. 那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢. 这个问题没有一个简单的答案,甚至那些教育机构都未必能清楚的知道. 所以,像大多数在这个领域里的web开发人员一样,我们只是通过去做,去实验才学会了这些.