分享:运用模板模式整合多个业务意义相近的页面

产品升级。在现有产品中增加了一个新的模块,模块主要是把发票功能集成到现有的系统中。
我负责发票上的基础数据的操作,由于基础数据非常多,且每一个基础数据都要用一个页面去设置。
起初把一些业务意义相近,操作相近的功能集中起来,整合后还是出现了10+的页面。
对于10+的页面中有些查询字段,录入字段都是相近的,而且页面排版都相似,所以决定用模板模式,整合当前页面。
1.在模板页面上定义共用区域,共用区域内放字段,字段的校验等。
2.在模板页面上定义定制区域,定制区域交给子页面去处理。

我们现有的前台技术是JSF,所以再加上FACELETS很符合上述思想。
共用区域:
    1.整合了查询页面的共用查询字段和查询字段的检验逻辑。
    2.整合了查询页面的列表显示区域,列表内的显示内容交给子页处理。
    3.整合了编辑页面的共用录入字段和录入字段的检验逻辑。(我们的UI设计中编辑页面其实是和查询页面在一起,即点击列表中一行,出现“对话框”层。层中显示了编辑字段。)
对于上述三点。技术上作出如下处理:
1.定义模板查询页面的显示框架。
    <html>
    <head>
    <script>
        <common-script />--交给模板页面处理
        <custom-script />--留给子页面添加,在FACELETS中用<ui:insert name="customScripts"></ui:insert>
    </script>
    <style />同script一样。
    <body>
        DIV层定义各个显示区域。依然用<ui:inert />定义子页面的内容。其实这就是facelets的强大之处了。
    </body>
    </html>
2.定义模板查询页面的JS框架
    在页面初始化时定义页面上各个区域的初始化动作。
例如
$(document).ready(function(){
    queryTemplate = new QueryTemplate();
    queryTemplate.registerSection(); //把页面中的各个部分注册进去。
    queryTemplate.init();//页面初始化
})

QueryTemplate.prototype = {
    init:function() {
        //遍历所有section,并调用section的初始化工作(包括页面元素的检验,注册按钮事件等)
    }
   
    registerSection:function() {
        this.addCommonSection();
        this.addCustomSection();//子页面重载此方法,加入子页面的内容。
    }
.......
}
注:页面中使用了一个JS VALIDATION的框架,基本原理是页面加载时有一个ValidationManager,对于某个控件加入检验的话,就直接注册一个Validation到ValidationManager即可。
调用检验时,直接用validationManager的valiateAll。
3.后台V,C层设计
     VO,PO:定义CommonCriteria,CommonDTO,CommonSearchResult,CommonJavaBean。
        子页面中涉及到的对象都继承以上类。
    service层定义CommonService处理一些公用的逻辑。比如查询,校验时间等。
    DAO层定义通用查询的sql。用JAVA泛型处理CommonJavaBean

 

在这里分享一下自己的一些理念和作法。希望大家喷饭,扔砖。也希望大家也能分享自己的一些经验。

 

你可能感兴趣的:(模板模式)