CN110543341A - 一种快速透出web页面模块的方法及装置 - Google Patents

Abstract

本发明公开了一种快速透出web页面模块的方法及装置。所公开的快速透出web页面模块的方法，包括：接收与待快速透出的web页面模块相关的关键字；基于关键字在web页面中搜索和快速透出待快速透出的web页面模块，其中，每个web页面包括至少一个web页面模块，每个待快速透出的web页面模块包括至少一个组件。所公开的技术方案可以快速搜索需要的页面信息模块，并将这些页面信息模块显示到浏览器的最前面、最直观的位置。

Description

一种快速透出web页面模块的方法及装置

技术领域

本发明涉及web应用和开发领域，尤其涉及一种快速透出web页面模块的方法及装置。

背景技术

随着使用React、vue或者其他框架开发web应用的盛行，组件化开发的思想越来越普遍。然而，如果页面的模块(包括至少一个组件)或其包括的组件越来越多，信息量越来越大，要查找的模块就会分散在页面中不易被找到。

另外，例如，对于每次只能在客户端或浏览器中显示一个页面的单页面形式的web应用，要查找的模块可能在多个页面中的一个页面中，这个页面可能不是顶部页面，因此会出现多页面路由的情况。

图1示例性地示出了单页面应用中的3个不同的页面结构。图1所示的单页面应用包括3个不同的页面(A页面、B页面和C页面，对应3个不同的路由A、B、C)，每个页面下都有4个模块。在现有技术中，在当前的顶部页面是A页面(即，A路由)的情况下，是无法实现对于C页面(即，C路由)中的各个模块(例如，C1-C4模块)的快速查找和显示(即，快速透出)的。

尽管在面向浏览器的应用中，由于功能和模块可能比面向客户端的应用拆分得更加明显，因此，可以通过React Router来管理页面路由，这样会使路由管理和查找更加方便。然而，如果用户要找到某个页面的某个模块，仍然需要通过多次转路由的方式来进行多次查找，不能通过简单的全局搜索来一次性地查找和显示所需要的模块。

因此，需要提出一种新的技术方案，以快速搜索需要的页面信息模块，并将这些页面信息模块显示到浏览器的最前面、最直观的位置。

发明内容

根据本发明的快速透出web页面模块的方法，包括：

接收与待快速透出的web页面模块相关的关键字；

基于关键字在web页面中搜索和快速透出待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个待快速透出的web页面模块包括至少一个组件。

根据本发明的快速透出web页面模块的方法，在接收与待快速透出的web页面模块相关的关键字的步骤之前，还包括：

建立关键字与待快速透出的web页面模块之间的映射关系。

根据本发明的快速透出web页面模块的方法，在接收与待快速透出的web页面模块相关的关键字的步骤之前，还包括：

接收用户用于输入关键字的触发操作；

向用户显示用于输入关键字的全局搜索输入框。

根据本发明的快速透出web页面模块的方法，在基于关键字在web页面中搜索和快速透出待快速透出的web页面模块的步骤之前，还包括：

将至少一个组件实现为可以独立渲染的纯UI组件；

使用容器组件来实现用于首次请求、获取待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染待快速透出的web页面模块所需的内外部环境数据。

根据本发明的快速透出web页面模块的方法，其建立关键字与待快速透出的web页面模块之间的映射关系的步骤包括：

使用装饰器来建立关键字与待快速透出的web页面模块之间的映射关系。

根据本发明的快速透出web页面模块的装置，包括：

关键字接收模块，用于接收与待快速透出的web页面模块相关的关键字；

快速透出模块，用于基于关键字在web页面中搜索和快速透出待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个待快速透出的web页面模块包括至少一个组件。

根据本发明的快速透出web页面模块的装置，还包括：

映射模块，用于建立关键字与待快速透出的web页面模块之间的映射关系。

根据本发明的快速透出web页面模块的装置，还包括：

用户输入触发模块，用于接收用户用于输入关键字的触发操作；

输入框显示模块，用于向用户显示用于输入关键字的全局搜索输入框。

根据本发明的快速透出web页面模块的装置，还包括：

纯UI组件实现模块，用于将至少一个组件实现为可以独立渲染的纯UI组件；

容器组件实现模块，用于实现用于首次请求、获取待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染待快速透出的web页面模块所需的内外部环境数据。

根据本发明的快速透出web页面模块的装置，其映射模块还用于：

使用装饰器来建立关键字与待快速透出的web页面模块之间的映射关系。

根据本发明的上述技术方案，可以快速搜索需要的页面信息模块，并将这些页面信息模块显示到浏览器的最前面、最直观的位置。

附图说明

并入到说明书中并且构成说明书的一部分的附图示出了本发明的实施例，并且与相关的文字描述一起用于解释本发明的原理。在这些附图中，类似的附图标记用于表示类似的要素。下面描述中的附图是本发明的一些实施例，而不是全部实施例。对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，可以根据这些附图获得其他的附图。

图1示例性地示出了单页面应用中的3个不同的页面结构。

图2示例性地示出了根据本发明的快速透出web页面模块的方法的示意流程图。

图3示例性地示出了用于实现根据本发明的快速透出web页面模块的方法中的步骤S212和S214的方法的示意图。

图4示例性地示出了包括用于实现根据本发明的快速透出web页面模块的方法中的步骤S206、S202、S204的方法的示意图。

图5示例性地示出了根据本发明的快速透出web页面模块的装置的示意框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

图2示例性地示出了根据本发明的快速透出web页面模块的方法的示意流程图。

如图2的实线框所示，根据本发明的快速透出web页面模块的方法，包括：

步骤S202：接收与待快速透出的(即，待查找和显示的)web页面模块相关的关键字；

步骤S204：基于关键字在web页面中搜索和快速透出待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个待快速透出的web页面模块包括至少一个组件。

可选地，如图2的虚线框所示，根据本发明的快速透出web页面模块的方法，在步骤S202之前，还包括：

步骤S206：建立关键字与待快速透出的web页面模块之间的映射关系。

可选地，如图2的虚线框所示，根据本发明的快速透出web页面模块的方法，在步骤S202之前，还包括：

步骤S208：接收用户用于输入关键字的触发操作；

步骤S210：向用户显示用于输入关键字的全局搜索输入框。

可选地，如图2的虚线框所示，根据本发明的快速透出web页面模块的方法，在步骤S204之前，还包括：

步骤S212：将上述至少一个组件实现为可以独立渲染的纯UI组件；

步骤S214：使用容器组件来实现用于首次请求、获取待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染待快速透出的web页面模块(即，上述至少一个可以独立渲染的纯UI组件)所需的内外部环境数据。

执行上述步骤S212和步骤S214是为了获得以下技术效果：

保持页面的完整性、以及各个路由下的各个模块的原始顺序。

而且，由于每个模块都是进入页面后先获取数据再进行渲染的，所以需要通过步骤S212来保证在任何地方(例如，浏览器上的任何显示位置)都能将模块及其对应的数据(即，上述内外部环境数据)成功结合并进行渲染。

因此，上述步骤S212和步骤S214实际上解决了数据模块化和依赖关系的问题。

图3示例性地示出了用于实现根据本发明的快速透出web页面模块的方法中的步骤S212和S214的方法的示意图。

以图3所示的A页面为例，在现有技术中，A1模块在A页面中的数据需要进入路由之后去请求，针对请求所返回的数据(即，图3中的“模块需要的交互数据”(现有技术))被分发给各个模块(即，A1-A4模块)，所以现有技术依赖的是A页面的实时数据请求及返回数据。因此，模块显示时要依赖于实时请求获得的数据。

然而，如上文所述，根据本发明的方法采用上述步骤S212和步骤S214来解决数据模块化和依赖关系的问题。

更具体地，这里的处理方式可以是：

A页面的每个模块外层都包裹一层数据容器组件A container(在图3中未示出，例如，可以是用户自定义类的一个实例)，该容器组件用来存储待分发的数据(即，图3中所示的“存储的内外部环境数据”)。即，如果进入A1模块发现没有(已经存储的内外部环境)数据，(例如，A1模块首次请求数据)就会触发容器组件去请求数据，然后存储起来供其他模块(例如，非首次请求数据)使用。这样的话，不管什么时候什么地点只要带有容器组件都会保证有数据，用于在后续步骤中实现渲染(对应于步骤S204中的“快速透出”)。

可选地，根据本发明的快速透出web页面模块的方法，步骤S206包括(在图2中未示出)：

使用装饰器来建立关键字与待快速透出的web页面模块之间的映射关系。

例如，图4示例性地示出了包括用于实现根据本发明的快速透出web页面模块的方法中的步骤S206、S202、S204的方法的示意图。

如图4所示，该示例方法通过两个部分或模块实现：装饰器(例如，图4中的“Alfred装饰器”)和UI组件(例如，图4中的“Alfred组件”)。

装饰器用于建立与待快速透出的模块相关的关键字(即，图4中的“keyword”)和待快速透出的模块自身(即，图4中的“模块”，包括至少一个UI组件，未示出)之间的映射关系。即，对应于图4所示的“Alfred装饰器”→“收集keyword”→“Alfred组件调用”→“收集模块映射”的操作步骤(即，上述步骤S206，包含了装饰器的使用)。

本领域技术人员需要了解的是，为了保证每个模块都是单一的页面逻辑，需要将该模块所涉及的所有数据请求、渲染、逻辑都独立地设置在该模块所包含的上述至少一个UI组件内(对应于上述步骤S214)。这样才能确保搜索到的每个模块是可以独立存在并能够被正常透出的。

可选地，在具体实现上述步骤S206时，可以采用以下方法：

(1)对每个模块进行抽离，用单独的类来管理，在类上配上装饰器(例如，Alfred装饰器)，用于设置关键字和模块键值(即，唯一标识)。

(2)收集的模块会置于全局，形成映射表，映射表中的每个表项中的关键字直接对应到(该模块的所有)组件的类(名称或标识)。

(3)调用Alfred装饰器组件，收集到关键字会形成Alfred(UI)组件里面的关键词搜索池。

可选地，在具体实现上述步骤S204(对应于图4所示的“搜索keyword”→“显示模块”的操作步骤)时，可以采用以下方法：

(1)通过关键字模糊匹配，可以找到关键字对应的所有Alfred(UI)组件。

(2)通过用户确定的keyword进行搜索，就可以找到Alfred(UI)组件对应的类，并来通过全局弹窗的方式显示(对应于上述步骤S208、S210、S202)。

本领域技术人员可以设想，由于采用了装饰器，上述技术方案不改变页面路由，不破坏原来的页面结构。

另外，还可以通过触发快捷键的方式来触发全局搜索框的显示(即，快速透出)。

更具体地，(对应于结合图2所述的上述步骤S208和S210)，例如，可以使用预先设置的快捷键，来触发(例如，类似于Alfred的)全局搜索框在浏览器上的显示，在用户输入指定的关键字(词、句)之后，全局调用(涉及上述指定关键词的相关模块所包含的所有)Alfred(UI)组件进行快速透出(显示)，最终实现了通过搜索快速找到涉及上述指定关键词的相关模块的技术效果。

图5示例性地示出了根据本发明的快速透出web页面模块的装置500的示意框图。

如图5的实线框所示，快速透出web页面模块的装置500包括：

关键字接收模块501，用于接收与待快速透出的web页面模块相关的关键字；

快速透出模块503，用于基于关键字在web页面中搜索和快速透出待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个待快速透出的web页面模块包括至少一个组件。

可选地，如图5的虚线框所示，快速透出web页面模块的装置500还包括：

映射模块505，用于建立关键字与待快速透出的web页面模块之间的映射关系。

可选地，如图5的虚线框所示，快速透出web页面模块的装置500还包括：

用户输入触发模块507，用于接收用户用于输入关键字的触发操作；

输入框显示模块509，用于向用户显示用于输入关键字的全局搜索输入框。

可选地，如图5的虚线框所示，快速透出web页面模块的装置500还包括：

纯UI组件实现模块511，用于将上述至少一个组件实现为可以独立渲染的纯UI组件；

容器组件实现模块513，用于使用容器组件来实现用于首次请求、获取待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染待快速透出的web页面模块(即，上述至少一个可以独立渲染的纯UI组件)所需的内外部环境数据。

可选地，映射模块505还用于：

使用装饰器来建立关键字与待快速透出的web页面模块之间的映射关系。

根据本发明的上述技术方案，通过(例如，Alfred)装饰器建立每个模块的关键字和自身组件之间的(映射)关系，在不破坏原来组件的业务逻辑的条件下，(例如，通过外加的容器组件来)快速实现模块(包含对应于各模块的Alfred(UI)组件)的显示。实现了针对复杂页面、多模块、多路由的情况，快速找到模块的技术方案。不管多少路由、不管多少模块，例如，都能通过全局搜索框来快速找到对应的模块信息。解决了(例如，基于React框架开发的单页面)web应用中存在的页面多、模块多而不便于查找和显示的问题，让用户可以快速查询模块并显示到(例如，浏览器的)最前面。

根据本发明的上述技术方案，可以快速搜索需要的页面信息模块，并将这些页面信息模块显示到浏览器的最前面、最直观的位置。即，根据本发明的上述技术方案，能够将本来散落在各个应用中的信息模块进行快速透出，既保留模块在原来路由下的完整性，又能作为信息模块快速搜索，出现在任何地方。

根据本发明的上述技术方案，具有以下优点：

(1)全局搜索：在应用的任何页面(位置)都可以找到想要找的模块。

(2)扩展性强：需要快速搜索的模块只需添加装饰器(例如，通过Alfred装饰器)即可注册。

(3)配置灵活：只需要针对Alfred(UI)组件做扩展就可以实现过滤条件的扩展。

上面描述的内容可以单独地或者以各种方式组合起来实施，而这些变型方式都在本发明的保护范围之内。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些组件或所有组件可以被实施为由处理器，如数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制。尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例的技术方案的精神和范围。

Claims (10)

1.一种快速透出web页面模块的方法，其特征在于，包括：

接收与待快速透出的web页面模块相关的关键字；

基于所述关键字在web页面中搜索和快速透出所述待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个所述待快速透出的web页面模块包括至少一个组件。

2.如权利要求1所述的快速透出web页面模块的方法，其特征在于，在所述接收与待快速透出的web页面模块相关的关键字的步骤之前，还包括：

建立所述关键字与所述待快速透出的web页面模块之间的映射关系。

3.如权利要求1或2所述的快速透出web页面模块的方法，其特征在于，在所述接收与待快速透出的web页面模块相关的关键字的步骤之前，还包括：

接收用户用于输入所述关键字的触发操作；

向用户显示用于输入所述关键字的全局搜索输入框。

4.如权利要求1或2所述的快速透出web页面模块的方法，其特征在于，在基于所述关键字在web页面中搜索和快速透出所述待快速透出的web页面模块的步骤之前，还包括：

将所述至少一个组件实现为可以独立渲染的纯UI组件；

使用容器组件来实现用于首次请求、获取所述待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染所述待快速透出的web页面模块所需的内外部环境数据。

5.如权利要求2所述的快速透出web页面模块的方法，其特征在于，所述建立所述关键字与所述待快速透出的web页面模块之间的映射关系的步骤包括：

使用装饰器来建立所述关键字与所述待快速透出的web页面模块之间的映射关系。

6.一种快速透出web页面模块的装置，其特征在于，包括：

关键字接收模块，用于接收与待快速透出的web页面模块相关的关键字；

快速透出模块，用于基于所述关键字在web页面中搜索和快速透出所述待快速透出的web页面模块，

其中，每个web页面包括至少一个web页面模块，每个所述待快速透出的web页面模块包括至少一个组件。

7.如权利要求6所述的快速透出web页面模块的装置，其特征在于，还包括：

映射模块，用于建立所述关键字与所述待快速透出的web页面模块之间的映射关系。

8.如权利要求6或7所述的快速透出web页面模块的装置，其特征在于，还包括：

用户输入触发模块，用于接收用户用于输入所述关键字的触发操作；

输入框显示模块，用于向用户显示用于输入所述关键字的全局搜索输入框。

9.如权利要求6或7所述的快速透出web页面模块的装置，其特征在于，还包括：

纯UI组件实现模块，用于将所述至少一个组件实现为可以独立渲染的纯UI组件；

容器组件实现模块，用于实现用于首次请求、获取所述待快速透出的web页面模块的内外部环境数据的接口，并且存储用于渲染所述待快速透出的web页面模块所需的内外部环境数据。

10.如权利要求7所述的快速透出web页面模块的装置，其特征在于，所述映射模块还用于：

使用装饰器来建立所述关键字与所述待快速透出的web页面模块之间的映射关系。