在项目中，我们面临这样的问题，就是如果在前台做抽象，大家想想后台代码的抽象，我们耳熟能详，但是前台的抽象，我们是如何做的呢？恐怕这个问题，如果是第一次抛给自己，自己也很惶恐，就是，我们不是对应一个业务写好一个页面吗？以前从来没有想过抽象，这里，我就要说，那是咱们最初级的方式，今天带大家一起见证先比较靠谱一种方式！

回顾

        我们回顾下html编码的历程，在web1.0时代，我们面向的大多是静态页面，这时候，能够展示出来就好，由于网速的限制，电脑处理能力的约束，我们只能把什么都写在一起，但是随着时间的推移，技术革新，网速提升，个人电脑和服务器技术的提升，允许我们可以显示动态的页面，这时，我们称之为web2.0！

        在web2.0时代，我们能做的更多，可以做很多，css虽然不是web2.0的代表技术，但是，他给我们提供了思路，就是页面对象化，将样式作为一种类存在，这个类的载体就是一个个的css文件，而我们每次写的class属性就是在实例一个个的对象，这样的技术，给了我们很大的启发，我们是不是也可以将很多概念剥离开html，做抽象和封装，打包成一个类呢？答案当然是肯定的！

        今天，我在我们项目中，就发现了牛人的存在，之所以牛，是他找到了一个概念的抽象，就是统一验证的js代码，说白了，就是我们不需要写太多常规的长度，字符验证，这些统一交由某个类完成，我们看看，他是怎么实现的！

        类文件：validateform.js

对比：

1，以前的页面验证代码

<span style="font-size:18px;">//为了验证就医单号是否为空
  	var isDBNull = 'true'
  	//判断就医单号是否为空，为空：true，否则false；
  	function isInoputNull(){
		for(var i = 0;i < detailSourceList.length; i++){
         	
         	var dateStr = $('#txtOriginalCode' + i)[0].value;
         	
 			if(dateStr.trim()==''){
 				isDBNull='false';
    		}
    			
         }
  	}</span>

这样我们每个需要验证的页面都要在提交时走一遍这个函数，我们如果验证多了，就会在提交表单是写N个类似的函数 ，这样，实际浪费的是我们的时间！

2，改进之后

<span style="font-size:18px;"><input type="text" vtype="NumAndStr" notNull="true" vdisp="提示信息" id="isOldLeader"   value=http://www.mamicode.com/"${LoginUser.NLeader}"/>

在提交表单是，我们只需要调用一个统一的验证入口（doValidate）就可以了

总结：

        前台页面的封装，实际上是减少了代码人员的开发量，做到一次开发，多次复用的效果，这样开发，还有很多，比如说日期控制，按钮控制等，还有一种层面上的封装，就是前台页面的动态组合，就是一次开发模板页面，多次利用，说白了就是由后台组合页面，发给前台，这样的例子，我在早些博客中写过，大家可以去看看“论道——工厂模式与装饰模式的融合”

        封装，在今天的我看来，没有什么是绝对不可以封装的，我们发现，当初做系统是，觉得这个是特殊的，那个是特殊的，实际上是我们对业务的不熟悉，在做系统时，我们还发现，系统做到一半，突然才发现，有很多东西是可以封装的，我们不必懊恼，这就是经验，我们对某类型业务的封装，也是从无到有的，积累了一定的代码和业务后，我们就可以利用现有巨人，就是网络，在做系统以前不妨多看看网上别人是怎么做的，对我们就会很有启发！

附件：后台单击js下载

java工程积累——前台页面的统一校验