一种可快速模块化配置的WEB界面构建方法.pdf

本发明公开了一种可快速模块化配置的WEB界面构建方法。该方法以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。与现有技术相比，本发明的可快速模块化配置的WEB界面构建方法可快速实现内容丰富、业务逻辑复杂、交互频繁的Web界面构建、重组、交互，具有很好的推广应用价值。

1.  一种可快速模块化配置的WEB界面构建方法，其特征在于：以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。

2.  根据权利要求1所述的可快速模块化配置的WEB界面构建方法，其特征在于，该方法的具体实现步骤为：
A、设计各系统各Web界面需要的模块化元素，并以Tag的形式表示；
B、不同的Web界面依据需要引用相应的Tag标签；
C、各Web界面设立事件广播通道，所述广播通道用于当界面元素放生变化时向广播站发送消息；
D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素发出相应响应。

3.  根据权利要求2所述的可快速模块化配置的WEB界面构建方法，其特征在于，设置有广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。

4.  根据权利要求2所述的可快速模块化配置的WEB界面构建方法，其特征在于，具体交互方法为：
当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序；
注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自做出相应改变。

一种可快速模块化配置的WEB界面构建方法
 
技术领域
本发明涉及一种Web界面构建方法，具体地说是一种可快速模块化配置的WEB界面构建方法。
背景技术
随着internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到WEB上来。与此相对应的是交互操作的复杂性越来越高，Web界面展现和交互也越来越丰富。
在多种情况下，各种元素往往需要进行互动，但是，由于其中有些元素归属于不同的界面区块，因此，直接互相操作会造成较高的耦合，后续维护成本也很高，并且当逻辑关系较复杂时容易出现程序错误。
发明内容
本发明的技术任务是针对上述现有技术的不足，提供一种结合Java Tag技术，基于Tag和Javascript EDA（事件驱动架构）的可快速模块化配置的WEB界面构建方法。
本发明的技术任务是按以下方式实现的：一种可快速模块化配置的WEB界面构建方法，其特点是以Tag技术构建可重用的界面元素，采用虚拟事件的方式，利用事件驱动机制发送和监听事件，使产品Web界面快速构建，并可以使不同Web界面间快速交互。其中Tag提供模块化元素，EDA提供交互解耦，支持产品界面快速重组定制，通过控制模块代码可直接增减界面组件及改变其特性。
上述方法的具体实现步骤为：
A、设计各系统各Web界面需要的模块化元素，并以Tag的形式表示；
B、不同的Web界面依据需要引用相应的Tag标签；
C、各Web界面设立事件广播通道，所述广播通道用于当界面元素放生变化时向广播站发送消息；
D、各Web界面设立事件监听通道，所述监听通道用于监听广播站广播的消息，以促使界面元素做出相应改变。
为了更好的实现上述方法，还可以设置广播站，所述广播站用于接收所有界面元素发生变化时发送的消息，并把这些消息全部广播出去。
上述方法中不同元素之间的交互方法为：
当一个元素发生改变时，委托事件代理触发一个虚拟事件，事件中包含这次改变的类型、名称、变量信息，触发事件后结束该元素的处理程序；注册其他界面元素监听事件代理，当上述元素触发的虚拟事件发生时，其他界面元素各自作出相应改变。
例如，假设某界面元素A发生改变时，需要若干其他界面元素B1、B2等作出相应改变：
a．A发生改变时，委托事件代理触发一个虚拟的事件，事件中包含这次改变的类型、名称、变量等信息。触发事件后结束A的处理程序。
b．注册其他界面元素监听事件代理，当A触发的虚拟事件发生时，这些界面元素各自做出相应改变。
本发明的可快速模块化配置的WEB界面构建方法与现有技术相比具有以下突出的有益效果：
（一）可快速构建内容丰富的不同Web界面；
（二）降低程序代码的耦合度，提高代码的重复利用度，但是又能使相关Web界面快速交互；
（三）降低逻辑复杂的程序代码的错误率，减低维护成本。
附图说明
附图1是本发明方法中Web界面快速重组与交互的流程图，
其中，
1.Tag1、Tag2、Tag3 是构成Web界面的元素模块；
2.Web界面A、Web界面B1、Web界面B2、Web界面B3是产品不同的Web界面；
3.元素A1、元素A2是构成Web界面A的模块化元素；
4.元素B1是构成Web界面B1的模块化元素之一；
5.元素B2是构成Web界面B2的模块化元素之一；
6.元素B3是构成Web界面B3的模块化元素之一。
具体实施方式
参照说明书附图以具体实施例对本发明的可快速模块化配置的WEB界面构建方法作以下详细地说明。
实施例：
本发明可快速模块化配置的WEB界面构建方法的实现包括以下步骤：
通过Tag实现界面元素模块化，不同的Web界面引用不同的界面元素实现Web界面的快速重组与交互。
1.创建Tag标签
Funcpub.tag
lsmenupanels.tag
favpanel.tag
searchpanel.tag
topfloatbar.tag
2.Web界面引入Tag
<mainbody:funcpub />
<mainbody:lsmenupanels />
<mainbody:favpanel />
<mainbody:searchpanel />
<mainbody:topfloatbar />
3.建立广播通道，发送消息
$eh_mf.launchevt("funcOpenRequested",iconsrc);
$eh_mb.launchevt("menubuttonclick",mf_nav);
$eh_md.launchevt("userChangedDate","wdate");
4.建立监听通道，监听虚拟事件，并快速响应
$eh_mf.catchevt("funcOpenRequested",function(e){
    $("#url").show();
    $("#mbody_funcpub").show();
    var funcName = $("#mainfunc_funcName").val();
    var funcIcon = $("#mainfunc_funcIcon").val();
    var funcType = $("#mainfunc_funcType").val();   
});。
如附图所示，Web界面快速重组与交互的流程如下：
当Web界面A中的元素A1、元素A2发生改变时，向广播站发送改变消息1、消息2；广播站再把消息1、消息2广播出去；Web界面B1、Web界面B2、Web界面3同时监听广播站发出的消息，当Web界面B1监听到与自己相关的消息1、消息2时，界面元素B1依据消息内容做出相应的快速响应，同时Web界面B2、Web界面B3也分别监听到与自己相关的消息1、消息2，界面元素B2、界面元素B3依据消息内容做出相应的快速响应。