[0001] 本申请要求 2018年 5月 4日递交、 发明名称为“实现页面功能复用的方法及装置 ” 的中国专利申请 CN201810420048.6的优先权， 在此通过引用将其全部内容合并 于此。

[0002] 本申请涉及计算机技术领域， 尤其涉及一种实现页面功能复用的方法及装置 。

背景技术

[0003] 随着互联网的迅速发展， 互联网应用为用户提供的功能越来越丰富， 相应地， 互联网应用所包含的页面随之增加， 以为用户实现丰富的功能。

[0004] 对于互联网应用而言， 各页面可能存在相同的页面功能， 也可能存在不同的页 面功能。

[0005] 发明人意识到： 在互联网应用的各页面中部署各自的页面功能 ， 由于各页面之 间不存在页面功能复用， 导致互联网应用开发过于复杂， 不利于提高开发效率 ， 进而浪费过多的开发成本。

发明概述

技术问题

问题的解决方案

技术解决方案

[0006] 为了解决上述技术问题， 本申请的一个目的在于提供一种实现页面功能 复用的 方法及装置。

[0007] 其中， 本申请所采用的技术方案为：

[0008] 一方面， 一种实现页面功能复用的方法， 包括： 根据互联网应用所提供页面功 能进行组件封装， 得到多个系统组件， 每一个系统组件对应所述互联网应用提 供的一种页面功能； 通过触发进行的互联网应用登录操作为所述互 联网应用进 行页面加载， 并为加载的页面构建浮动框架； 根据所加载页面所具有的页面功 育 B， 在所述浮动框架中动态嵌入对应于页面功能的 系统组件。 [0009] 另一方面， 一种实现页面功能复用的装置， 包括： 组件封装模块， 配置为根据 互联网应用所提供页面功能进行组件封装， 得到多个系统组件， 每一个系统组 件对应所述互联网应用提供的一种页面功能； 页面加载模块， 配置为通过触发 进行的互联网应用登录操作为所述互联网应用 进行页面加载， 并为加载的页面 构建浮动框架； 组件嵌入模块， 配置为根据所加载页面所具有的页面功能， 在 所述浮动框架中动态嵌入对应于页面功能的系 统组件。

[0010] 另一方面， 一种实现页面功能复用的装置， 包括处理器及存储器， 所述存储器 上存储有计算机可读指令， 所述计算机可读指令被所述处理器执行时实现 如上 所述的实现页面功能复用的方法。

[0011] 另一方面， 一种计算机可读存储介质， 其上存储有计算机程序， 所述计算机程 序被处理器执行时实现如上所述的实现页面功 能复用的方法。

[0012] 在上述技术方案中， 不同页面如果存在相同的页面功能， 由于每一种页面功能 对应一个系统组件， 故而被动态嵌入至为不同页面所构建浮动框架 中的系统组 件是相同的， 由此实现了页面功能复用， 进而降低了互联网应用的开发复杂度 ， 有利于提高开发效率， 从而节省了开发成本。

[0013] 应当理解的是， 以上的一般描述和后文的细节描述仅是示例性 和解释性的， 并 不能限制本申请。

发明的有益效果

对附图的简要说明

附图说明

[0014] 此处的附图被并入说明书中并构成本说明书的 一部分， 示出了符合本申请的实 施例， 并于说明书一起用于解释本申请的原理。

[0015] 图 1是根据一示例性实施例示出的一种实现页面� �能复用的装置的硬件结构框 图。

[0016] 图 2是根据一示例性实施例示出的一种实现页面� �能复用的方法的流程图。

[0017] 图 3是根据一示例性实施例示出的另一种实现页� �功能复用的方法的流程图。

[0018] 图 4是图 3对应实施例中步骤 430在一个实施例的流程图。

[0019] 图 5是图 4对应实施例中步骤 431在一个实施例的流程图。 [0020] 图 6是图 4对应实施例中步骤 435在一个实施例的流程图。

[0021] 图 7是图 4对应实施例中步骤 433在一个实施例的流程图。

[0022] 图 8是一应用场景中一种实现页面功能复用的方� �所涉及的 common路由层的具 体实现示意图。

[0023] 图 9是根据一示例性实施例示出的一种实现页面� �能复用的装置的框图。

[0024] 图 10是根据一示例性实施例示出的一种实现页面� ��能复用的装置的结构框图。

[0025] 通过上述附图， 已示出本申请明确的实施例， 后文中将有更详细的描述， 这些 附图和文字描述并不是为了通过任何方式限制 本申请构思的范围， 而是通过参 考特定实施例为本领域技术人员说明本申请的 概念。

发明实施例

本发明的实施方式

[0026] 这里将详细地对示例性实施例执行说明， 其示例表示在附图中。 下面的描述涉 及附图时， 除非另有表示， 不同附图中的相同数字表示相同或相似的要素 。 以 下示例性实施例中所描述的实施方式并不代表 与本申请相一致的所有实施方式 。 相反， 它们仅是与如所附权利要求书中所详述的、 本申请的一些方面相一致 的装置和方法的例子。

[0027] 图 1是根据一示例性实施例示出的一种实现页面� �能复用的装置的硬件结构框 图。 需要说明的是， 该装置只是一个适配于本申请的示例， 不能认为是提供了 对本申请的使用范围的任何限制。 该装置也不能解释为需要依赖于或者必须具 有图 1中示出的示例性的装置 200中的一个或者多个组件。

[0028] 该装置 200的硬件结构可因配置或者性能的不同而产生 较大的差异， 如图 1所示 ， 装置 200包括： 电源 210、 接口 230、 至少一存储器 250、 以及至少一中央处理 器 (CPU, Central Processing Units) 270。

[0029] 其中， 电源 210用于为装置 200上的各硬件设备提供工作电压。

[0030] 接口 230包括至少一有线或无线网络接口 231、 至少一串并转换接口 233、 至少 一输入输出接口 235以及至少一 USB接口 237等， 用于与外部设备通信。

[0031] 存储器 250作为资源存储的载体， 可以是只读存储器、 随机存储器、 磁盘或者 光盘等， 其上所存储的资源包括操作系统 251、 应用程序 253及数据 255等， 存储 方式可以是短暂存储或者永久存储。 其中， 操作系统 251用于管理与控制装置 20 0上的各硬件设备以及应用程序 253， 以实现中央处理器 270对海量数据 255的计 算与处理， 其可以是 Windows ServerTM、 Mac OS

XTM、 UnixTM、 LinuxTM、 FreeBSDTM等。 应用程序 253是基于操作系统 251之 上完成至少一项特定工作的计算机程序， 其可以包括至少一模块 （图 1中未示出 ） ， 每个模块都可以分别包含有对装置 200的一系列计算机可读指令。 数据 255 可以是存储于磁盘中的照片、 图片等。

[0032] 中央处理器 270可以包括一个或多个以上的处理器， 并设置为通过总线与存储 器 250通信， 用于运算与处理存储器 250中的海量数据 255。

[0033] 如上面所详细描述的， 适用本申请的装置 200将通过中央处理器 270读取存储器 250中存储的一系列计算机可读指令的形式来完 成实现页面功能复用的方法。

[0034] 此外， 通过硬件电路或者硬件电路结合软件也能同样 实现本申请， 因此， 实现 本申请并不限于任何特定硬件电路、 软件以及两者的组合。

[0035] 请参阅图 2, 在一示例性实施例中， 一种实现页面功能复用的方法适用于实现 页面功能复用的装置， 该装置的结构可以如图 1所示。

[0036] 该种实现页面功能复用的方法可以由实现页面 功能复用的装置执行， 可以包括 以下步骤：

[0037] 步骤 310, 根据互联网应用所提供页面功能进行组件封装 ， 得到多个系统组件

[0038] 如前所述， 对于互联网应用而言， 各页面可能存在相同的页面功能， 也可能存 在不同的页面功能。

[0039] 以保险营销应用为例， 至少包含保单销售页面和保单售后页面， 保单销售页面 包括软电话拨打、 保单录入、 保单校验、 保单销售结果提交等页面功能， 保单 售后页面包括软电话拨打、 保单跟踪、 保单缴费、 保单维护结果提交等页面功 育 B。 其中， 软电话拨打功能即属于保单销售页面和保单售 后页面共同存在的相 同页面功能。

[0040] 为了后续页面功能复用得以实现， 本实施例中， 首先通过组件封装获得多个系 统组件， 使得每一个系统组件对应互联网应用提供的一 种页面功能。 [0041] 具体而言， 根据互联网应用所提供的页面功能将该页面功 能所涉及的数据进行 封装， 由此得到多个系统组件， 也可以理解为， 系统组件是页面功能所涉及数 据的集合。

[0042] 由上可知， 对于同一个页面所具有的多种页面功能而言， 将封装得到多个不同 的系统组件， 而针对不同页面之间存在的相同页面功能， 仅封装得到一个共同 的系统组件。

[0043] 步骤 330, 通过触发进行的互联网应用登录操作为互联网 应用进行页面加载， 并为加载的页面构建浮动框架。

[0044] 也就是说， 不同的互联网登录操作将使得互联网应用加载 不同的页面， 并最终 在互联网应用中显示出不同的页面。

[0045] 仍以保险营销应用为例， 销售人员登录时， 为保险营销应用加载保单销售页面 ， 即保险营销应用的显示页面中显示保单销售页 面； 或者， 售后人员登录时， 为保险营销应用加载保单售后页面， 即保险营销应用的显示页面中显示保单售 后页面。

[0046] 具体地， 互联网应用为用户提供一个登录入口， 当用户希望登录互联网应用时 ， 便能够在该登录入口触发相应的互联网登录操 作。

[0047] 随着互联网登录操作的触发进行， 互联网应用将获取到用户相关的登录信息， 该登录信息包括但不限于用户登录账号、 登录密码、 登录组别等等， 进而根据 用户相关的登录信息进行相应页面的加载。 例如， 如果用户的登录组别为销售 人员， 则为保险营销应用加载保单销售页面。

[0048] 可选地， 本实施例中， 互联网应用进行页面显示是通过浮动框架 （ifmme框架 ） 实现的， 为此， 针对互联网应用所加载的页面， 将进行浮动框架的构建， 使 得所加载页面可基于该浮动框架在互联网应用 中进行浮动显示。

[0049] 步骤 350, 根据所加载页面所具有的页面功能， 在浮动框架中动态嵌入对应于 页面功能的系统组件。

[0050] 在完成浮动框架构建之后， 便能够基于该浮动框架在互联网应用中进行页 面的 浮动显示。

[0051] 具体地， 根据所加载页面所具有的页面功能确定对应的 系统组件， 将对应的系 统组件嵌入为该页面构建的浮动框架中， 由于系统组件视为页面功能所涉及数 据的集合， 因此， 系统组件嵌入浮动框架， 实质上是根据对应页面功能所涉及 的数据进行页面基于浮动框架的浮动显示， 进而使得用户通过在线访问浮动显 示的页面而享受到互联网应用所提供的功能。

[0052] 可选地， 动态嵌入， 是指系统组件的嵌入将随着页面功能的变化而 相应地变化 ， 例如， 页面的某一个页面功能被删减， 则该某一个页面功能所对应的系统组 件将相应地由为该页面所构建的浮动框架中删 除， 以此增强页面功能设置的灵 活性。

[0053] 通过如上所述的过程， 实现了页面功能的复用， 进而降低了互联网应用的开发 复杂度， 有利于提高开发效率， 从而节省了开发成本。

[0054] 在一应用场景中， 针对保险营销应用所提供的软电话拨打功能、 保单校验功能 分别获得软电话拨打组件、 保单校验组件。

[0055] 由此， 假设保单销售页面包括软电话拨打功能和保单 校验功能， 则为保单销售 页面所构建的浮动框架中将嵌入软电话拨打组 件和保单校验组件。

[0056] 假设保单售后页面包括软电话拨打功能， 则为保单售后页面所构建的浮动框架 中嵌入软电话拨打组件。

[0057] 由上可知， 软电话拨打组件可以分别嵌入在为保单销售页 面和保单售后页面所 构建的浮动框架中， 进而实现了软电话拨打功能的复用。

[0058] 请参阅图 3， 在一示例性实施例中， 如上所述的方法还可以包括以下步骤：

[0059] 步骤 410, 针对互联网应用所加载的多个页面， 进行多个浮动框架的树形结构 连接， 构建主浮动框架。

[0060] 可以理解， 对于同一页面来说， 动态嵌入在为同一页面所构建的浮动框架中的 各系统组件之间可以相互通信， 即实现相同域通信， 而对于不同页面而言， 由 于存在跨域问题， 则动态嵌入在为各页面所分别构建的浮动框架 中的各系统组 件不能彼此访问， 即存在无法跨域通信的问题

[0061] 为此， 本实施例中， 针对为互联网应用所加载多个页面而分别构建 的多个浮动 框架， 将为该多个浮动框架构建公共的主浮动框架。

[0062] 具体地， 主浮动框架， 由多个浮动框架通过树形结构连接形成。 换而言之， 树 形结构中， 主浮动框架视为父节点， 而多个浮动框架分别为子节点。 而对于页 面显示过程来说， 通过主浮动框架进行主页面显示的同时， 还可以通过浮动框 架将构建其的页面浮动于主页面之外显示。

[0063] 步骤 430, 通过构建的主浮动框架为动态嵌入在各浮动框 架中的系统组件提供 数据传输功能。

[0064] 如上所述， 主浮动框架和各浮动框架存在父节点与子节点 的树形结构关系， 由 此， 各浮动框架中的系统组件之间便能够基于该树 形结构关系进行数据传输。

[0065] 也就是说， 即使各系统组件之间并不知道对方在树形结构 中的具体位置， 但是 各系统组件所在的浮动框架均与主浮动框架之 间连接， 即各系统组件知道主浮 动框架在树形结构中的具体位置， 进而便能够以主浮动框架作为中间节点， 将 不知道对方具体位置的系统组件之间相互连接 在一起， 由此实现跨域通信。

[0066] 在一实施例的具体实现中， 主浮动框架为 common路由层。

[0067] 相应地， 如图 4所示， 步骤 430可以包括以下步骤：

[0068] 步骤 431 为发送系统组件向 common路由层发起数据传输请求。

[0069] 发送系统组件， 是指需要发送数据的系统组件。 相应地， 接收系统组件， 是指 进行数据接收的系统组件。

[0070] 如前所述， 由于发送系统组件和接收系统组件可能并不属 于为同一个页面所构 建的浮动框架， 进而不能彼此访问， 存在跨域通信问题， 即发送系统组件虽然 知道需要向接收系统组件发送数据， 但是并不清楚怎么将数据传输至接收系统 组件。

[0071] 为此， 发送系统组件将向 common路由层发起数据传输请求， 以请求 common路 由层为其进行数据转发。 其中， 数据传输请求指示了发送系统组件需要进行数 据传输的接收系统组件。

[0072] 需要说明的是， 无论是发送系统组件， 还是接收系统组件， 都是通过 ID进行唯 一标识的， 例如， ID A唯一地标识系统组件 A

[0073] 步骤 433 按照数据传输请求指示的接收系统组件， 获取接收系统组件在 comm on路由层中的路由位置。

[0074] 如前所述， 数据传输请求用于指示接收系统组件， 则对于 common路由层而言 ， 在接收到数据传输请求之后， 便能够获知发送系统组件需要将数据传输至哪 一个接收系统组件。

[0075] 为了将数据传输至数据传输请求指示的接收系 统组件， common路由层还需要 获知该接收系统组件在 common路由层中的路由位置。

[0076] common路由层是由各浮动框架进行树形结构连接 形成的， 而系统组件被动态 嵌入在浮动框架中， 因此， 在形成 common路由层时， 各系统组件都会在 commo n路由层中注册自身相对于 common路由层的路由位置， 以此形成 common路由层 的注册表。

[0077] 简言之， common路由层通过注册表存储了动态嵌入浮动框 架的系统组件在 com mon路由层中的路由位置。

[0078] 相应地， common路由层所在的路由位置也将存储于各系统 组件中， 以便于各 系统组件能够根据该路由位置向 common路由层发起数据传输请求。

[0079] 由上可知， 在获知接收系统组件之后， common路由层将通过注册表进一步地 获知该接收系统组件在 common路由层中的路由位置。

[0080] 如图 7所示， 在一实施例的具体实现中， 步骤 433可以包括以下步骤：

[0081] 步骤 4331， 从数据传输请求中提取用于标识接收系统组件 的 ID

[0082] 步骤 4333， 根据用于标识接收系统组件的 ID在 common路由层的注册表中进行 路由位置关联查找， 注册表存储了 ID与路由位置的关联关系。

[0083] 步骤 4335， 以关联查找到的路由位置作为 ID所标识的接收系统组件在 common 路由层中的路由位置。

[0084] 也就是说， 注册表的形成， 实质上是在用于标识接收系统组件的 ID与路由位置 之间建立了关联关系。 可以理解， ID不同， 其所标识的系统组件将有所区别， 进而使得此系统组件在 common路由层中的路由位置也各不相同。

[0085] 由此， 在获取到用于标识接收系统组件的 ID之后， 便可以通过注册表查找到与 此 ID具有关联关系的路由位置， 即可实现 ID所标识接收系统组件在 common路由 层中路由位置的确定。

[0086] 步骤 435 , 根据获取到的路由位置向接收系统组件发送数 据传输请求。

[0087] 在获得接收系统组件在 common路由层中的路由位置之后， 便能够在发送系统 组件与接收系统组件之间建立传输路由， 以通过该传输路由将数据传输请求由 发送系统组件传输至接收系统组件， 进而实现彼此的数据传输。

[0088] 通过上述过程， 利用 common路由层中的注册表， 实现了系统组件之间传输路 由的建立， 进而为系统组件之间的彼此访问提供了依据， 使得系统组件之间的 跨域通信得以实现。

[0089] 请参阅图 5， 在一示例性实施例中， 步骤 431可以包括以下步骤：

[0090] 步骤 4311， 按照指定格式对发送系统组件待传输数据进行 封装， 得到封装数据

[0091] 步骤 4313， 根据封装数据由指定 send接口发送数据传输请求至 common路由层

[0092] 具体而言， 数据传输请求是根据封装数据生成的， 即数据传输请求中携带了封 装数据。 其中， 封装数据是按照指定格式对待传输数据进行封 装得到的。

[0093] 在生成数据传输请求之后， 发送系统组件将通过指定 send接口将携带了封装数 据的数据传输请求发送至 common路由层。

[0094] 相应地， 如图 6所示， 步骤 435可以包括以下步骤：

[0095] 步骤 4351， 根据路由位置确定 common路由层中接收数据传输请求的接收系统 组件。

[0096] 步骤 4353， 控制接收系统组件通过指定 receive接口由 common路由层接收数据 传输请求。

[0097] 步骤 4355， 从数据传输请求中提取得到封装数据， 并按照指定格式对封装数据 进行解封装处理。

[0098] 其中， 指定 send接口和指定 receive接口是为各系统组件配置的统一标准接� �， 也可以理解为， 所有系统组件之间的数据传输， 均是通过指定 send接口和指定 re ceive接口进行的。

[0099] 相应地， 指定格式， 作为待传输数据封装的载体， 是根据统一标准接口进行配 置的， 即如果统一标准接口不同， 则为待传输数据配置的指定格式也有所区别 ， 在此不进行限定。

[0100] 对于接收系统组件而言， 在通过指定 receive接口接收到 common路由层转发的 数据传输请求时， 即接收到其中携带的封装数据， 进而便能够按照指定格式对 封装数据进行解封装处理。

[0101] 解封装处理， 实质是封装的逆过程， 都是遵循指定格式进行的。

[0102] 通过上述实施例的配合， 通过统一标准接口的配置， 使得系统组件之间的数据 传输得以实现， 并且有利于降低数据传输的复杂度， 从而实现高效的数据传输

[0103] 图 8是一应用场景中一种实现页面功能复用的方� �所涉及的 common路由层的具 体实现示意图。

[0104] 该应用场景中， 互联网应用为保险营销应用， 该保险营销应用包括保单销售页 面、 信息提醒页面和保单售后页面。 其中， 保单销售页面包括保单校验功能和 软电话拨打功能， 信息提醒页面包括保单校验功能和信息展示功 能， 保单售后 页面包括保单催费功能。

[0105] 基于上述， common路由层 701作为父节点， 分别与三个浮动框架 702、 703、 70 4所定义的子节点相互连接， 该三个浮动框架 702~704分别为保单销售页面、 信 息提醒页面和保单售后页面所构建。

[0106] 同时， 根据保单销售页面、 信息提醒页面和保单售后页面所分别具有的页 面功 育 L 将不同的系统组件 705~708嵌入相应的浮动框架。

[0107] 具体而言， 将保单校验组件 705和软电话拨打组件 706嵌入浮动框架 702， 将软 电话拨打组件 706和信息展示组件 707嵌入浮动框架 703， 将保单催费组件 708嵌 入浮动框架 704。

[0108] 就软电话拨打组件 706来说， 同时嵌入至浮动框架 702和浮动框架 703， 以此实 现了保单销售页面和信息提醒页面的页面功能 复用。

[0109] 对于保单校验组件 705和软电话拨打组件 706， 由于属于同一浮动框架 702， 彼 此之间可以直接访问， 即属于相同域通信。

[0110] 对于软电话拨打组件 706和保单催费组件 708， 因属于不同浮动框架， 彼此之间 属于跨域通信， 将通过 common路由层 701实现相互访问， 即软电话拨打组件 706 借由 common路由层 701查找到保单催费组件 708 , 进而将待传输数据传输至保单 催费组件 708。 [0111] 在本应用场景中， 各页面所具有的页面功能被拆分， 进而封装形成系统组件被 动态嵌入为页面所构建的浮动框架中， 并借助主浮动框架实现各系统组件之间 的无差别通信， 实现了页面功能的复用， 降低了互联网应用开发的复杂度， 进 而有利于提高开发效率， 以此有效地节省开发成本。

[0112] 下述为本申请装置实施例， 可以用于执行本申请所涉及的实现页面功能复 用的 方法。 对于本申请装置实施例中未披露的细节， 请参照本申请所涉及的实现页 面功能复用的方法的实施例。

[0113] 请参阅图 9 , 在一示例性实施例中， 一种实现页面功能复用的装置 900包括但不 限于： 组件封装模块 910、 页面加载模块 930和组件嵌入模块 950。

[0114] 其中， 组件封装模块 910用于根据互联网应用所提供页面功能进行组 件封装， 得到多个系统组件， 每一个系统组件对应互联网应用提供的一种页 面功能。

[0115] 页面加载模块 930用于通过触发进行的互联网应用登录操作为 互联网应用进行 页面加载， 并为加载的页面构建浮动框架。

[0116] 组件嵌入模块 950用于根据所加载页面所具有的页面功能， 在浮动框架中动态 嵌入对应于页面功能的系统组件。

[0117] 需要说明的是， 上述实施例所提供的实现页面功能复用的装置 在进行实现页面 功能复用的处理时， 仅以上述各功能模块的划分进行举例说明， 实际应用中， 可以根据需要而将上述功能分配由不同的功能 模块完成， 即实现页面功能复用 的装置的内部结构将划分为不同的功能模块， 以完成以上描述的全部或者部分 功能。

[0118] 另外， 上述实施例所提供的实现页面功能复用的装置 与实现页面功能复用的方 法的实施例属于同一构思， 其中各个模块执行操作的具体方式已经在方法 实施 例中进行了详细描述， 此处不再赘述。

[0119] 请参阅图 10， 在一示例性实施例中， 一种实现页面功能复用的装置 1000， 包括 处理器 1001及存储器 1004。 所述装置 1000还包括通信接口 1002和通信总线 1003 。 所述处理器 1001通过通信总线 1003读取所述存储器 1004中存储的计算机可读 指令。

[0120] 其中， 存储器 1004上存储有计算机可读指令， 该计算机可读指令被处理器 1001 执行时实现上述各实施例中的实现页面功能复 用的方法。

[0121] 在一示例性实施例中， 一种计算机可读存储介质， 其上存储有计算机程序， 该 计算机程序被处理器执行时实现上述各实施例 中的实现页面功能复用的方法。

[0122] 上述内容， 仅为本申请的较佳示例性实施例， 并非用于限制本申请的实施方案 ， 本领域普通技术人员根据本申请的主要构思和 精神， 可以十分方便地进行相 应的变通或修改， 故本申请的保护范围应以权利要求书所要求的 保护范围为准