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

最新推荐文章于 2022-03-20 22:03:40 发布

iteye_4474

最新推荐文章于 2022-03-20 22:03:40 发布

阅读量116

点赞数

分类专栏：架构 WEB开发 JAVA 文章标签： ui java

本文链接：https://blog.csdn.net/iteye_4474/article/details/82277440

版权

WEB开发同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

JAVA

29 篇文章 0 订阅

订阅专栏

架构

21 篇文章 0 订阅

订阅专栏

产品升级。在现有产品中增加了一个新的模块，模块主要是把发票功能集成到现有的系统中。
我负责发票上的基础数据的操作，由于基础数据非常多，且每一个基础数据都要用一个页面去设置。
起初把一些业务意义相近，操作相近的功能集中起来，整合后还是出现了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