CN106293972A - 单页应用页面通讯方法和装置 - Google Patents

Abstract

本发明涉及一种单页应用页面通讯方法，所述方法包括：接收子页面的事件注册请求；根据所述事件注册请求注册所述事件注册请求对应的事件；向所有子页面发送注册的所述事件的事件广播，并向响应于所述事件广播的子页面注入所述事件方法以使所述子页面对注入的所述事件方法进行监听，能够简化页面通讯流程、提高页面处理事件能力。

Description

单页应用页面通讯方法和装置

技术领域

本发明涉及单页应用技术领域，特别是涉及一种单页应用页面通讯方法和装置。

背景技术

单页应用指基于web的系统和应用，单页应用中由一个页面来控制所有子页面的展现形式，所有子页面之间具有关联关系，当单页应用中事件状态变化时与该事件相关的所有子页面均应进行事件状态的更新。

传统技术中，页面之间实现上述的关联关系采用的通讯方法为：采用接口回调的方式，即在子页面A中实现一个接口方法，然后注册到B中，子页面B在满足某个页面操作的时候，调用子页面A中的方法，以达到更新子页面A中的状态或数据功能，完成消息的传递，采用上述接口回调的方式，当子页面之间关系复杂的时候，一个事件需要进行多次注册，产生较多的DOM操作，导致页面性能较低。

发明内容

基于此，有必要针对上述的问题，提供一种能够简化页面通讯流程、提高页面处理事件能力的单页应用页面通讯方法和装置。

一种单页应用页面通讯方法，所述方法包括：

接收子页面的事件注册请求；

根据所述事件注册请求注册所述事件注册请求对应的事件；

向所有子页面发送注册的所述事件的事件广播，并向响应于所述事件广播的子页面注入所述事件方法以使所述子页面对注入的所述事件方法进行监听。

在一个实施例中，所述根据所述事件注册请求注册所述事件注册请求对应的事件的步骤包括：

提取所述事件注册请求中携带的事件标识；

将提取的所述事件标识添加到evnts全局对象中以注册所述事件标识；

所述方法还包括：

根据所述事件标识向所述子页面获取对应的事件方法，并关联所述事件标识与获取的所述事件方法。

一种单页应用中页面通讯方法，所述方法包括：

接收共享抽象类发出的事件广播，所述事件广播的对象为已注册的事件；

接收所述事件广播对应的事件的事件方法；

监听主页面中是否有对所述事件方法的触发操作，若有，则按照所述事件方法进行执行所述事件。

在一个实施例中，所述共享抽象类中存储有子页面生命周期限定信息；

所述方法还包括：

按照所述生命周期限定信息构建子页面。

在一个实施例中，所述子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。

一种单页应用页面通讯装置，所述装置包括：

事件注册请求模块，用于接收子页面的事件注册请求；

事件注册模块，用于根据所述事件注册请求注册所述事件注册请求对应的事件；

事件广播模块，用于向所有子页面发送注册的所述事件的事件广播，并向响应于所述事件广播的子页面注入所述事件方法以使所述子页面对注入的所述事件方法进行监听。

在一个实施例中，所述事件注册模块还用于提取所述事件注册请求中携带的事件标识；将提取的所述事件标识添加到evnts全局对象中以注册所述事件标识；

所述装置还包括：事件方法获取模块，用于根据所述事件标识向所述子页面获取对应的事件方法，并关联所述事件标识与获取的所述事件方法。

一种单页应用中页面通讯装置，所述装置包括：

事件广播接收模块，用于接收共享抽象类发出的事件广播，所述事件广播的对象为已注册的事件；

事件方法获取模块，用于获取所述事件广播对应的事件的事件方法；

事件监听模块，用于监听主页面中是否有对所述事件方法的触发操作，若有，则按照所述事件方法进行执行所述事件。

在一个实施例中，所述共享抽象类中存储有子页面生命周期限定信息；

所述装置还包括：

子页面构建模块，用于按照所述生命周期限定信息构建子页面。

在一个实施例中，所述子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。

上述单页应用页面通讯方法和装置，通过共享的抽象类，获取子页面的事件注册请求进行事件的注册，并以事件广播的形式将注册的事件广播给子页面，以使子页面对广播的事件进行监听，当满足事件触发条件时，执行事件方法完成事件状态和数据的更新，子页面无需向需要通讯的其他子页面进行逐一注册，以共享抽象类为桥梁，且通过广播的方式进行完成页面之间的通讯，简化了页面通讯流程，提高了通讯的效率，进而提高了页面处理事件能力。

附图说明

图1为一个实施例中单页应用页面通讯方法的流程图；

图2为一个实施例中单页应用页面通讯方法的原理图；

图3为一个实施例中根据事件注册请求注册对应的事件步骤所涉及的流程图；

图4为另一个实施例中单页应用页面通讯方法的流程图；

图5为一个实施例中单页应用页面通讯装置的结构框图；

图6为另一个实施例中单页应用页面通讯装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在一个实施例中，如图1所示，提供了一种单页应用页面通讯方法，该方法包括如下步骤：

步骤S102：接收子页面的事件注册请求。

步骤S104：根据所述事件注册请求注册所述事件注册请求对应的事件。

具体的，一个单页应用中包括多个子页面，由于单页应用中所有操作和状态管理全部发生在一个页面上，这里将操作和管理发生的页面叫做主页面。

页面中能够通过页面事件来触发具体的页面功能。例如通过键盘按钮的状态触发文档修改的功能。

本实施例中，创建一个共享抽象类UIAbstractView，该抽象类能够与所有子页面通信，共享抽象类中事件方法可被所有子页面共享。

其中，类是面向对象程序设计中的概念，是面向对象编程的基础。UIAbstractView是一个抽象类，用于封装子类中所需要的公用方法，以及制定子VIEW的约束。

每个子页面均可向共享抽象类中进行事件的注册。例如注册的事件为文档修改。具体的，子页面向共享抽象类发送事件注册请求，该事件注册请求中携带有事件标识，共享抽象类接收子页面发送的事件注册请求，提取请求中的事件标识，进而进行事件标识的存储，完成事件的注册。

下面为events中添加事件，也就是注册事件的代码实现：

this.events＝_.extend({},UIAbstractView.Events)；

this.documentView＝new DocumentView({

events:this.events

发起事件注册的子页面中提供注册事件的事件方法，事件方法为用于实现事件的方法，例如，如果注册的事件为文档修改，则事件方法则为实现文档修改的方法。共享抽象类可根据提取的事件标识获取注册子页面中的事件方法，并将事件方法和事件标识关联存储。

步骤S106：向所有子页面进行事件标识对应的事件的广播，并向响应于广播的子页面注入事件方法以使子页面对注入的事件方法进行监听。

具体的，共享抽象类将注册的事件向单页应用中所有的子页面进行广播，子页面接收到共享抽象类的事件广播，并获取广播的事件的事件标识，子页面可通过自身的页面内容判断广播的事件标识是否与自身内容相关，如果是，则向共享抽象类进行相关事件反馈，共享抽象类将把对应的事件方法注入到子页面中。

其中，共享抽象类对事件进行广播是指同时向子页面传达事件信息，例如传达事件的标识和事件方法。

每个事件方法都预先设定有触发条件，注入事件方法的子页面将监听是否产生该事件方法的触发条件，当监测到满足该事件方法的触发条件时，执行事件方法完成事件状态和数据的更新，进而完成信息的传递。

下面为事件触发的代码实现：

var DocumentView＝UIAbstractView.extend({

initialize:function(options){this.events＝options.events；},

onEdit:function(){this.events.trigger('documentEdit')。

如图2所示，单页应用中包含有四个子页面，分别为子页面A、子页面B、子页面C和子页面D，还包含有能够与这四个子页面进行通信的共享抽象类。子页面A中带有实现事件1的事件方法，子页面A首先到共享抽象类中进行事件1的注册，共享抽象类将事件1注册完成后，向子页面A、子页面B、子页面C和子页面D进行事件1的广播，假设子页面B、子页面C和子页面D中的内容均与事件1具有关联，共享抽象类将事件1方法注入到子页面B、子页面C和子页面D中，子页面A、子页面B、子页面C和子页面D对该事件1方法进行监听，当监测到满足该事件1方法的触发条件时，执行事件方法完成事件状态和数据的更新。

本实施例中，通过共享的抽象类，获取子页面的事件注册请求，进行事件的注册，并以事件广播的形式将注册的事件广播给子页面，以使子页面对广播的事件进行监听，当满足事件触发条件时，执行事件方法完成事件状态和数据的更新，进而完成信息的传递，子页面无需向需要通讯的其他子页面进行逐一注册，以共享抽象类为桥梁，且通过广播的方式进行完成页面之间的通讯，简化了页面通讯流程，提高了通讯的效率，进而提高了页面处理事件能力。

在一个实施例中，如图3所示，步骤S104：根据所述事件注册请求注册所述事件注册请求对应的事件的步骤包括：

步骤S202：提取事件注册请求中携带的事件标识。

步骤S204：将提取的事件标识写入evnts对象中，以注册事件标识。

单页应用页面通讯方法还包括如下步骤：

步骤S206：根据事件标识向子页面获取对应的事件方法，关联事件标识与事件方法。

具体的，子页面发送的注册请求中携带事件标识，共享抽象类将事件标识添加到全局对象evnts。注册完成后，共享抽象类即可对注册的事件进行事件广播。

在一个实施例中，子页面通过共享抽象类的广播可获取到事件的触发条件，并进行事件触发条件的监听，当监听到有能够触发该触发条件的触发操作时，向共享抽象类中获取该触发条件对应的事件方法，并执行该事件方法以更新事件数据。在另一个实施例中，子页面通过共享抽象类的广播获取事件方法，共享抽象类在进行广播同时即完成事件方法的注入，子页面监听到触发操作时，直接执行该事件方法。

本实施例中，共享抽象类中获取注册的子页面中的事件方法，其他子页面可直接利用共享抽象类中的方法完成事件处理，事件方法在共享抽象类中被所有子页面共享，相比于传统的通过接口回调的方式(接口回调是一种双向调用模式，也就是说，被调用方在接口被调用时也会调用对方的接口)。本实施例的事件方法共享使子页面之间的通信就变成了实例的操作而不是DOM(文档对象模型Document Object Model的简称)操作，提高了通讯的效率，进而提高了页面处理事件能力。

在一个实施例中，如图4所示，还提供了一种单页应用中页面通讯方法，该方法可应用在子页面中，具体包括如下步骤：

步骤S302：接收共享抽象类发出的事件广播，所述事件广播的对象为已注册的事件。

具体的，在共享抽象类进行广播的事件为注册的事件，也就是，子页面首先需要进行事件的注册。单页应用中包括多个子页面，每个子页面都可以进行所拥有事件的注册，至少有一个事件注册后，共享抽象类才可以进行事件的广播。共享抽象类可同时对多个事件进行广播。

步骤S306：接收事件广播对应的事件的事件方法。

步骤S306：监听主页面中是否有对事件方法的触发操作，若有，则按照事件方法进行执行事件。

子页面可通过共享抽象类的事件广播获取到广播的事件对应的事件方法。

在一个实施例中，子页面可通过共享抽象类的事件广播获取到事件方法的触发条件，当子页面监听到满足该触发条件的触发操作时，才从共享抽象类中获取事件方法，并按照事件方法执行事件，以进行数据更新。

在一个实施例中，共享抽象类中存储有子页面生命周期限定信息；

单页应用页面通信方法还包括：按照生命周期限定信息构建子页面。

在一个实施例中子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。

本实施例中，共享抽象类中存储有子页面生命周期限定信息，按照该子页面限定进行子页面的构建，以保证各子页面之间的通讯规则，各子页面内部形成约束，方便统一化，维护简单，降低重构的风险。

在一个实施例中，如图5所示，提供了一种单页应用页面通讯装置，该装置包括：

事件注册请求模块402，用于接收子页面的事件注册请求。

事件注册模块404，用于根据事件注册请求注册事件注册请求对应的事件。

事件广播模块406，用于向所有子页面发送注册的事件的事件广播，并向响应于事件广播的子页面注入事件方法以使子页面对注入的事件方法进行监听。

在一个实施例中，事件注册模块402还用于提取事件注册请求中携带的事件标识；将提取的事件标识添加到evnts全局对象中以注册事件标识。

单页应用页面通讯装置还包括：

事件方法获取模块用于根据事件标识向子页面获取对应的事件方法，关联事件标识与事件方法。

在一个实施例中，如图6所示，一种单页应用中页面通讯装置，该装置包括：

事件广播接收模块602，用于接收共享抽象类发出的事件广播，其中事件广播为对注册的事件的广播。

事件方法获取模块604，用于获取事件广播对应的事件的事件方法。

事件监听模块606，用于监听主页面中是否有对事件方法的触发操作，若有，则按照事件方法进行执行事件。

在一个实施例中，共享抽象类中存储有子页面生命周期限定信息。

单页应用页面通讯装置还包括：

子页面构建模块，用于按照生命周期限定信息构建子页面。

在一个实施例中，子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，程序可存储于一计算机可读取存储介质中，如本发明实施例中，该程序可存储于计算机系统的存储介质中，并被该计算机系统中的至少一个处理器执行，以实现包括如上述各方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种单页应用页面通讯方法，所述方法包括：

接收子页面的事件注册请求；

根据所述事件注册请求注册所述事件注册请求对应的事件；

向所有子页面发送注册的所述事件的事件广播，并向响应于所述事件广播的子页面注入所述事件方法以使所述子页面对注入的所述事件方法进行监听。

2.根据权利要求1所述的方法，其特征在于，所述根据所述事件注册请求注册所述事件注册请求对应的事件的步骤包括：

提取所述事件注册请求中携带的事件标识；

将提取的所述事件标识添加到evnts全局对象中以注册所述事件标识；

所述方法还包括：

根据所述事件标识向所述子页面获取对应的事件方法，并关联所述事件标识与获取的所述事件方法。

3.一种单页应用中页面通讯方法，所述方法包括：

接收共享抽象类发出的事件广播；

接收所述事件广播对应的事件的事件方法；

监听主页面中是否有对所述事件方法的触发操作，若有，则按照所述事件方法进行执行所述事件。

4.根据权利要求3所述的方法，其特征在于，所述共享抽象类中存储有子页面生命周期限定信息；

所述方法还包括：按照所述生命周期限定信息构建子页面。

5.根据权利要求4所述的方法，其特征在于，所述子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。

6.一种单页应用页面通讯装置，其特征在于，所述装置包括：

事件注册请求模块，用于接收子页面的事件注册请求；

事件注册模块，用于根据所述事件注册请求注册所述事件注册请求对应的事件；

事件广播模块，用于向所有子页面发送注册的所述事件的事件广播，并向响应于所述事件广播的子页面注入所述事件方法以使所述子页面对注入的所述事件方法进行监听。

7.根据权利要求6所述的装置，其特征在于，所述事件注册模块还用于提取所述事件注册请求中携带的事件标识；将提取的所述事件标识添加到evnts全局对象中以注册所述事件标识；

所述装置还包括：

事件方法获取模块，用于根据所述事件标识向所述子页面获取对应的事件方法，并关联所述事件标识与获取的所述事件方法。

8.一种单页应用中页面通讯装置，其特征在于，所述装置包括：

事件广播接收模块，用于接收共享抽象类发出的事件广播，所述事件广播的对象为已注册的事件；

事件方法获取模块，用于获取所述事件广播对应的事件的事件方法；

事件监听模块，用于监听主页面中是否有对所述事件方法的触发操作，若有，则按照所述事件方法进行执行所述事件。

9.根据权利要求8所述的装置，其特征在于，所述共享抽象类中存储有子页面生命周期限定信息；

所述装置还包括：子页面构建模块，用于按照所述生命周期限定信息构建子页面。

10.根据权利要求4所述的装置，其特征在于，所述子页面生命周期限定信息限定的子页面生命周期为：创建-显示前事件处理-显示事件处理-显示后事件处理-隐藏事件处理-对象销毁事件处理。