CN106155662A - 一种Web页面事件处理方法、系统及页面控制器 - Google Patents

Abstract

本申请公开了一种Web页面事件处理方法、系统及页面控制器，Web页面包括多个页面对象模块，每个页面对象模块包括页面控制器，该方法包括：页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听；在所述事件监听器监听到所述事件触发器产生的触发信息时，由所述事件监听器执行相应动作。由于本申请中具有通信关系的页面对象模块是通过对应的事件触发器和事件监听器进行通信，事件监听器只有在检测到对应的事件触发器产生的触发信息时，才会执行相应动作，因此无论二者所在的页面对象模块谁先加载谁后加载，均不影响正常通信。

Description

一种Web页面事件处理方法、系统及页面控制器

技术领域

本申请涉及软件技术领域，更具体地说，涉及一种Web页面事件处理方法、系统及页面控制器。

背景技术

经典的MVC(Model View Controller，模型-视图-控制器)框架如图1所示，Web页面中不同页面对象模块Module之间的相互通信是通过Controller集合控制的，Controller集合需要按照特定顺序将Web页面中所有的页面对象模块全部加载进来，然后处理页面对象模块之间的event事件后控制分发。

在进行页面对象模块加载时，各个页面对象模块的加载顺序必须固定，否则将会造成页面无响应或者直接报错的情况，影响页面对象模块之间的正常通信。举例如图2所示，文字模块、图片模块和分页模块必须依次加载，文字模块加载后页面中会显示文字框，并由文字控制器控制文字框内显示的内容；图片模块加载后页面中会显示图片框，并由图片控制器控制图片框内显示的图片；分页模块加载后会显示分页图标，并由分页控制器控制执行分页操作，分页控制器会控制文字控制器和图片控制器在分页后的新页面中的文字框和图片框中显示新的内容。而假设分页模块首先进行加载，而后加载文字模块和图片模块，则分页模块加载后由分页控制器控制进行分页操作，此时由于文字模块和图片模块还未加载，因而分页控制器无法找到文字控制器和图片控制器，因而会造成页面无响应或者直接报错，影响正常通信。

发明内容

有鉴于此，本申请提供了一种Web页面事件处理方法、系统及页面控制器，用于解决现有利用Controller集合控制不同Module相互通信的方式中，在页面对象模块未按顺序加载时可能出现页面无响应或报错的问题。

为了实现上述目的，现提出的方案如下：

一种Web页面事件处理方法，所述Web页面包括多个页面对象模块，每个所述页面对象模块包括页面控制器，所述方法包括：

页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听；

在所述事件监听器监听到所述事件触发器产生的触发信息时，由所述事件监听器执行相应动作。

优选地，当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，所述页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听具体包括：

所述页面控制器利用所述事件监听器在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述事件触发器响应用户操作所产生并发往所述存储器的信息。

优选地，还包括：

所述页面控制器中与所述事件监听器对应的事件销毁器在检测到所述事件监听器执行动作的次数达到阈值时，删除所述事件监听器与所述事件触发器间的对应关系。

一种Web页面事件处理方法，所述Web页面包括多个页面对象模块，每个所述页面对象模块包括页面控制器，所述方法包括：

页面控制器利用预置的事件触发器响应用户操作以产生触发信息，所述触发信息用于触发其它页面控制器内与所述事件触发器对应的事件监听器执行相应动作。

优选地，当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，该方法还包括：

所述事件触发器将所述触发信息发往预置于浏览器窗口内的存储器。

一种页面控制器，应用于Web页面的页面对象模块中，其包括：

事件触发器，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

优选地，所述事件监听器包括：

第一事件监听器子单元，用于当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述其它页面控制器内与本事件监听器对应的事件触发器响应用户操作所产生并发往所述存储器的信息。

优选地，还包括：

事件销毁器，用于在检测到所述事件监听器执行相应动作的次数达到阈值时，删除已有的所述事件监听器与事件触发器间的对应关系。

一种Web页面事件处理系统，包括多个页面对象模块，每个所述页面对象模块包括页面控制器，其中，每个所述页面控制器包括：

事件触发器，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

优选地，还包括位于浏览器窗口内的存储器，用于在所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，接收所述页面控制器内的事件触发器发送的所述触发信息。

从上述的技术方案可以看出，本申请实施例提供的Web页面事件处理方法，针对包含多个页面对象模块的Web页面，每个页面对象模块包括页面控制器，页面控制器包括事件触发器和/或事件监听器，任意页面控制器内的事件触发器响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作。由于本申请中具有通信关系的页面对象模块是通过对应的事件触发器和事件监听器进行通信，事件监听器只有在检测到对应的事件触发器产生的触发信息时，才会执行相应动作，因此无论二者所在的页面对象模块谁先加载谁后加载，均不影响正常通信。

进一步，由于本申请不限定页面对象模块的加载顺序，因此页面上的各页面对象模块也无需同时全部加载，其可以随意的分批次加载，也可以完成正常的通信。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为经典的MVC框架示意图；

图2为本申请示例的一种基于现有MVC框架的页面对象模块加载方式示意图；

图3为本申请实施例公开的一种Web页面事件处理方法流程图；

图4为本申请实施例公开的一种MVC框架示意图；

图5为本申请实施例示例的一种不同页面对象模块加载方式示意图；

图6为本申请实施例公开的另一种MVC框架示意图；

图7为本申请实施例公开的另一种Web页面事件处理方法流程图；

图8为本申请实施例公开的又一种MVC框架示意图；

图9为本申请实施例公开的一种页面控制器的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供了一种Web页面事件处理方法，其中Web页面包括多个页面对象模块，每个所述页面对象模块均包含有页面控制器，一般一个页面对象模块只包含一个页面控制器，具体地处理方法参见图3，图3为本申请实施例公开的一种Web页面事件处理方法流程图。

如图3所示，该方法包括：

步骤S300、页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听；

具体地，每一个页面控制器内均设置有事件触发器和事件监听器。我们预先为事件触发器和事件监听器之间绑定了对应关系，这里需要说明的是，同一页面控制器内的事件触发器和事件监听器不进行对应关系的绑定。例如，页面控制器1内包含事件触发器A和事件监听器B，页面控制器2内包含事件触发器C和事件监听器D。我们将事件触发器A与事件监听器D绑定对应关系，将事件触发器C和事件监听器B绑定对应关系。这里，绑定对应关系的意思为：绑定对应关系的事件触发器在响应用户操作后会触发对应的事件监听器产生动作。例如，事件触发器A与事件监听器D绑定了对应关系，则如果事件触发器A响应了用户的操作，那么会触发事件监听器D产生动作。

步骤S310、在所述事件监听器监听到所述事件触发器产生的触发信息时，由所述事件监听器执行相应动作。

需要说明的是，一个页面控制器可以同时包含事件触发器和事件监听器，当然也可以仅包含事件监听器。如果一个页面控制器需要对外暴露事件，则该页面控制器需要设置有事件触发器，以响应用户的操作而产生触发信息。当然，如果一个页面控制器需要对外暴露多个事件，其可以设置多个事件触发器，用于响应用户不同的操作而产生不同的触发信息。同理，如果一个页面控制器需要监听另一个页面控制器对外暴露的事件，则该页面控制器需要设置一个事件监听器，以监听对应事件触发器产生的触发信息。可以理解的是，一个页面控制器可以同时具备多个事件监听器，分别监听不同事件触发器产生的触发信息。

进一步需要说明的是，一个事件触发器可以与多个事件监听器绑定对应关系。

本申请实施例提供的Web页面事件处理方法，针对包含多个页面对象模块的Web页面，每个页面对象模块包括页面控制器，页面控制器包括事件触发器和/或事件监听器，任意页面控制器内的事件触发器响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作。由于本申请中具有通信关系的页面对象模块是通过对应的事件触发器和事件监听器进行通信，事件监听器只有在检测到对应的事件触发器产生的触发信息时，才会执行相应动作，因此无论二者所在的页面对象模块谁先加载谁后加载，均不影响正常通信。

进一步，由于本申请不限定页面对象模块的加载顺序，因此页面上的各页面对象模块也无需同时全部加载，其可以随意的分批次加载，也可以完成正常的通信。

为了便于理解本申请的方案，本实施例通过下述具体实例进行说明。

参见图4，图4为本申请实施例公开的一种MVC框架示意图。

如图4所示，某一Web页面由页面对象模块Module1和页面对象模块Module2组成。在Module1中对应设置有Controller1，在Module2中对应设置有Controller2。Controller1中设置有事件触发器Trigger2及事件监听器Listen1，Controller2中设置有事件触发器Trigger1及事件监听器Listen2。其中，Trigger1与Listen1预先绑定了关系，Trigger2与Listen2预先绑定了关系。当用户的操作触发了Trigger2时，Trigger2产生触发信息，此时与Trigger2具备绑定关系的Listen2监听到Trigger2产生的触发信息，触发Listen2执行预置的动作1。而若用户的操作触发了Trigger1时，Trigger1产生触发信息，此时与Trigger1具备绑定关系的Listen1监听到Trigger1产生的触发信息，触发Listen1执行预置的动作2。

进一步参见图5，图5示例了一种不同页面对象模块加载方式示意图。

对比图2和图5可知，基于本申请提供的Web页面事件处理机制，本实施例中可以先加载文字模块，再加载分页模块，最后加载图片模块。当然，除此之外三个模块还可以任意顺序进行加载。当首先加载了文字模块后，文字模块内的文字监听器处于持续监听状态，其监听的触发信息为“翻页”，在监听到该触发信息后会执行换文字操作，也即在页面的文字框内更换文字内容。当分页模块加载之后，其内的分页触发器接收用户操作产生触发信息：翻页。此时，该触发信息被文字监听器所监控到，立即更换页面上文字框内的信息。最后，当图片模块加载后，其内的图片监听器监听到分页触发器已经产生的“翻页”触发信息，进而执行换图片操作，此时页面上会显示图片框，并在图片框内显示翻页后所展示的图片。

需要说明的是，上述实施例所介绍的方案均是针对两个页面对象模块位于同一Web页面的情况。如果相互通信的两个页面对象模块位于浏览器中同一窗口的不同Web页面中，则需要在浏览器窗口内增设存储器。进而上述步骤S300的过程具体为：

所述页面控制器利用所述事件监听器在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述事件触发器响应用户操作所产生并发往所述存储器的信息。

也即，响应用户操作的事件触发器将产生的触发信息发往存储器，该触发信息标识了该事件触发器已经响应了用户的操作。当窗口切换至另一个Web页面(切换至的Web页面为与上述产生触发信息的事件触发器具备绑定关系的事件监听器，所在的页面控制器所处的页面对象模块所在的页面)时，事件监听器查询存储器中是否存在与其具备绑定关系的事件触发器产生的触发信息，并在查找到后执行相应动作。

参见图6，图6为本申请实施例公开的另一种MVC框架示意图。

对比图4和图6可知，本实施例中增加了页面对象模块Module3和页面对象模块Module4，Module1和Module2属于第一Web页面，Module3和Module4属于第二Web页面。

其中，Trigger1与Listen1预先绑定了关系；第一Web页面的Module1中的Trigger2以及第二Web页面的Module3中的Trigger2均与Listen2预先绑定了关系；第一Web页面的Module2中的Trigger3以及第二Web页面的Module4中的Trigger3均与Listen3预先绑定了关系；Trigger4与Listen4预先绑定了关系。

在第一Web页面的Module2中的Trigger3响应了用户的操作时，其会向存储器Storage发送触发信息，该触发信息标识了Trigger3已经响应了用户的操作。当窗口切换至第二Web页面时，第二Web页面的Module3中的Listen3检测到Storage中有触发信息，则触发Listen3执行绑定的动作。

本实施例提供的不同Web页面间的事件处理方法，同一窗口下的两个Web页面之间进行通信时，无需再向服务器发送请求来获取页面的改变响应，减少了对服务器的请求，有效的降低了服务器压力。

参见图7，在本申请的另一个实施例中，上述Web页面事件处理方法还可以包括：

步骤S320、所述页面控制器中与所述事件监听器对应的事件销毁器在检测到所述事件监听器执行动作的次数达到阈值时，删除所述事件监听器与所述事件触发器间的对应关系。

具体实施时，如图8所示，可以设置与事件监听器对应的事件销毁器(图8中为Listen1设置了Destroy1)，事件销毁器统计事件监听器执行的次数，当达到阈值时删除预先绑定的事件监听器与事件触发器之间的关系，从而控制事件执行次数。

需要解释的是，上述步骤S300-步骤S320均是以包含事件监听器的页面控制器的角度论述的。接下来，以包含事件触发器的页面控制器的角度对本申请的方案进行介绍：

页面控制器利用预置的事件触发器响应用户操作以产生触发信息，所述触发信息用于触发其它页面控制器内与所述事件触发器对应的事件监听器执行相应动作。

进一步，当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，该方案还可以包括：

所述事件触发器将所述触发信息发往预置于浏览器窗口内的存储器。

下面对本申请实施例提供的页面控制器进行描述，下文描述的页面控制器与上文描述的Web页面事件处理方法可相互对应参照。

页面控制器，应用于Web页面的页面对象模块中，参见图9，页面控制器9可以包括：

事件触发器91，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器92，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

其中，所述事件监听器92可以包括：

第一事件监听器子单元，用于当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述其它页面控制器内与本事件监听器对应的事件触发器响应用户操作所产生并发往所述存储器的信息。

本申请实施例公开的页面控制器还可以包括：

事件销毁器，用于在检测到所述事件监听器执行相应动作的次数达到阈值时，删除已有的所述事件监听器与事件触发器间的对应关系。

本申请实施例提供的页面控制器，通过事件触发器响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作，通过事件监听器监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，进而执行相应的动作。由于本申请中具有通信关系的页面对象模块是通过对应的事件触发器和事件监听器进行通信，事件监听器只有在检测到对应的事件触发器产生的触发信息时，才会执行相应动作，因此无论二者所在的页面对象模块谁先加载谁后加载，均不影响正常通信。

进一步，由于本申请不限定页面对象模块的加载顺序，因此页面上的各页面对象模块也无需同时全部加载，其可以随意的分批次加载，也可以完成正常的通信。

本申请实施例还提供了一种Web页面事件处理系统，其包括多个页面对象模块，每个所述页面对象模块包括页面控制器，其中，每个所述页面控制器包括：

事件触发器，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

进一步，如果考虑到相互通信的两个页面对象模块位于浏览器同一窗口的不同Web页面中，则本申请的Web页面事件处理系统还可以进一步包括：

位于浏览器窗口内的存储器，用于在所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，接收所述页面控制器内的事件触发器发送的所述触发信息。

本申请实施例提供的Web页面事件处理系统，包括多个页面对象模块，每个所述页面对象模块包括页面控制器，各页面控制器通过事件触发器响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作。由于本申请中具有通信关系的页面对象模块是通过对应的事件触发器和事件监听器进行通信，事件监听器只有在检测到对应的事件触发器产生的触发信息时，才会执行相应动作，因此无论二者所在的页面对象模块谁先加载谁后加载，均不影响正常通信。

进一步，由于本申请不限定页面对象模块的加载顺序，因此页面上的各页面对象模块也无需同时全部加载，其可以随意的分批次加载，也可以完成正常的通信。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种Web页面事件处理方法，所述Web页面包括多个页面对象模块，每个所述页面对象模块包括页面控制器，其特征在于，所述方法包括：

页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听；

在所述事件监听器监听到所述事件触发器产生的触发信息时，由所述事件监听器执行相应动作。

2.根据权利要求1所述的方法，其特征在于，当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，所述页面控制器利用预置的与其它页面控制器中的事件触发器对应的事件监听器，对所述事件触发器进行监听具体包括：

所述页面控制器利用所述事件监听器在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述事件触发器响应用户操作所产生并发往所述存储器的信息。

3.根据权利要求1或2所述的方法，其特征在于，还包括：

所述页面控制器中与所述事件监听器对应的事件销毁器在检测到所述事件监听器执行动作的次数达到阈值时，删除所述事件监听器与所述事件触发器间的对应关系。

4.一种Web页面事件处理方法，所述Web页面包括多个页面对象模块，每个所述页面对象模块包括页面控制器，其特征在于，所述方法包括：

页面控制器利用预置的事件触发器响应用户操作以产生触发信息，所述触发信息用于触发其它页面控制器内与所述事件触发器对应的事件监听器执行相应动作。

5.根据权利要求4所述的方法，其特征在于，当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，该方法还包括：

所述事件触发器将所述触发信息发往预置于浏览器窗口内的存储器。

6.一种页面控制器，应用于Web页面的页面对象模块中，其特征在于，所述页面控制器包括：

事件触发器，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

7.根据权利要求6所述的页面控制器，其特征在于，所述事件监听器包括：

第一事件监听器子单元，用于当所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，在预置于浏览器窗口内的存储器中监听是否存在触发信息，所述触发信息为所述其它页面控制器内与本事件监听器对应的事件触发器响应用户操作所产生并发往所述存储器的信息。

8.根据权利要求6或7所述的页面控制器，其特征在于，还包括：

事件销毁器，用于在检测到所述事件监听器执行相应动作的次数达到阈值时，删除已有的所述事件监听器与事件触发器间的对应关系。

9.一种Web页面事件处理系统，其特征在于，包括多个页面对象模块，每个所述页面对象模块包括页面控制器，其中，每个所述页面控制器包括：

事件触发器，用于响应用户操作产生触发信息，以触发其它页面控制器内与本事件触发器对应的事件监听器执行相应动作；

事件监听器，用于监听其它页面控制器内与本事件监听器对应的事件触发器是否产生触发信息，若是，则由所述事件监听器执行相应动作。

10.根据权利要求9所述的系统，其特征在于，还包括位于浏览器窗口内的存储器，用于在所述页面控制器所在的页面对象模块与所述其它页面控制器所在的页面对象模块位于浏览器中同一窗口的不同Web页面时，接收所述页面控制器内的事件触发器发送的所述触发信息。