编排与配置可复用的交互框架构建方法及系统技术方案

本申请提供一种编排与配置可复用的交互框架构建方法及系统，所述方法包括：根据项目中需要使用的组件进行全局注册；编写所述项目中各页面的配置文件并导出；根据所述各页面的配置文件加载配置内容；根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。示页面。示页面。

【技术实现步骤摘要】
编排与配置可复用的交互框架构建方法及系统


[0001]本申请涉及浏览器网页应用领域，具体而言，涉及一种编排与配置可复用的交互框架构建方法及系统。

技术介绍

[0002]在现有的常规前端工程中，一个工程通常只包含一个应用项目，而组件复用的常规的做法是，把这些组件抽离放到一个公用的目录中，然后在需要使用这些组件时，从页面中去引用它们，页面和组件是直接耦合，图1示出现有的一个前端项目中组件被多页面复用示意图。
[0003]而对于多页面的网页端来说，组件的引用会更复杂。以基于软件运营服务（SaaS，Software as a Service）的直播网页端为例，通常包括一个PC直播发起端、一个PC直播观看端和一个WAP直播观看端：因为很多组件三端复用，如果也采用组件复用方式，公用组件会被放在更上一层的目录中，在多个端的应用项目的多个页面中去引用，也就意味着，增加或删除一个组件，需要同时去这三端的应用项目的页面中进行处理，于是，复杂度明显提高，维护成本增加。图2示出现有的常规的多前端项目中多组件被多页面复用结构示例图。一个组件被多个应用中的多页面引用。如果一个应用涉及到几十上百个组件，会大大增加复杂度，产生操作不够灵活，维护困难的问题。
[0004]因此，需要提出一种编排与配置可复用的交互框架构建方法及系统，解决多项目多页面与多组件直接耦合，导致结构复杂、维护不方便的问题。
[0005]在所述
技术介绍
部分公开的上述信息仅用于加强对本申请的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。

技术实现思路

[0006]为了解决上述问题，本申请提出一种编排与配置可复用的交互框架构建方法及系统。
[0007]根据本申请的第一方面，提出一种编排与配置可复用的交互框架构建方法，包括：根据项目中需要使用的组件进行全局注册；编写所述项目中各页面的配置文件并导出；根据所述各页面的配置文件加载配置内容；根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。
[0008]根据一些实施例，所述配置文件中的内容包括多个键值对。
[0009]根据一些实施例，所述方法还包括：在各组件中全局混入标识码；所述键值对中的键与所述标识码对应，所述键值对中的值包括类注解和数组，其中：所述类注解与所述各页面中需要使用的组件分别对应；
所述数组包括该类注解对应的组件下的子组件。
[0010]根据一些实施例，所述根据所述各页面的配置文件加载配置内容，包括：导入所述配置文件。
[0011]根据一些实施例，所述根据所述各页面的配置文件加载配置内容，包括：从根节点递归遍历所述数组，获得该组件的树形结构；所述根节点为所述标识码；编译所述树形结构，获得所述页面的所述配置内容。
[0012]根据一些实施例，所述根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面，包括：根据所述配置文件增加页面子属性，使得各页面与所述配置内容建立联系；使用路由的全局导航守卫方法拦截处理；加载不同的页面配置。
[0013]根据本申请的第二方面，提出一种编排与配置可复用的交互框架构建系统，包括：全局注册单元，用于根据项目中需要使用的组件进行全局注册；文件配置单元，用于编写所述项目中各页面的配置文件并导出；配置内容加载单元，用于根据所述各页面的配置文件加载配置内容；配置展示单元，用于根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。
[0014]根据一些实施例，所述系统还包括全局混入单元，用于在各组件中全局混入标识码；所述配置文件中的内容包括多个键值对，键与所述标识码对应，值包括类注解和数组；所述配置内容加载单元还用于：从根节点递归遍历所述数组，获得该组件的树形结构；所述根节点为所述标识码；编译所述树形结构，获得所述页面的所述配置内容。
[0015]根据一些实施例，所述配置内容加载单元还用于导入所述配置文件。
[0016]根据一些实施例，所述配置展示单元还用于：根据所述配置文件增加页面子属性，使得各页面与所述配置内容建立联系；使用路由的全局导航守卫方法拦截处理；加载不同的页面配置。
[0017]本申请提出一种编排与配置可复用的交互框架构建方法及系统，通过设置页面的配置文件中与组件的对应信息，在页面编排与配置时只需要根据识别码即可实现加载页面配置，在后期修改时也只需要找到对应页面的配置文件进行修改，简化流程，使得编排与配置页面具有较高的灵活度，降低页面中各组件之间的耦合度，降低维护难度应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。
附图说明
[0018]通过参照附图详细描述其示例实施例，本申请的上述和其它目标、特征及优点将变得更加显而易见。下面描述的附图仅仅是本申请的一些实施例，而不是对本申请的限制。
[0019]图1示出现有的一个前端项目中组件被多页面复用示意图；图2示出现有的常规的多前端项目中多组件被多页面复用结构示例图；图3示出一示例性实施例的编排与配置可复用的交互框架构建方法流程图；图4示出一示例性实施例的编排与配置可复用的交互框架构建系统示意图。
具体实施方式
[0020]现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本申请将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。
[0021]所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有这些特定细节中的一个或更多，或者可以采用其它的方式、组元、材料、装置等。在这些情况下，将不详细示出或描述公知结构、方法、装置、实现、材料或者操作。
[0022]附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
[0023]本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。
[0024]本领域技术人员可以理解，附图只是示例实施例的示意图，附图中的模块或流程并不一定是实施本申请所必须的，因此不能用于限制本申请的保护范围。
[0025]图3示出一示例性实施例的编排与配置可复用的交互框架构建方法流程图。...

【技术保护点】

【技术特征摘要】
1.一种编排与配置可复用的交互框架构建方法，其特征在于，包括：根据项目中需要使用的组件进行全局注册；编写所述项目中各页面的配置文件并导出；根据所述各页面的配置文件加载配置内容；根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。2.如权利要求1所述的编排与配置可复用的交互框架构建方法，其特征在于，所述配置文件中的内容包括多个键值对。3.如权利要求2所述的编排与配置可复用的交互框架构建方法，其特征在于，所述方法还包括：在各组件中全局混入标识码；所述键值对中的键与所述标识码对应，所述键值对中的值包括类注解和数组，其中：所述类注解与所述各页面中需要使用的组件分别对应；所述数组包括该类注解对应的组件下的子组件。4.如权利要求1所述的编排与配置可复用的交互框架构建方法，其特征在于，所述根据所述各页面的配置文件加载配置内容，包括：导入所述配置文件。5.如权利要求3所述的编排与配置可复用的交互框架构建方法，其特征在于，所述根据所述各页面的配置文件加载配置内容，包括：从根节点递归遍历所述数组，获得该组件的树形结构；所述根节点为所述标识码；编译所述树形结构，获得所述页面的所述配置内容。6.如权利要求1所述的编排与配置可复用的交互框架构建方法，其特征在于，所述根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面，包括：根...

【专利技术属性】
技术研发人员：杨新元，邵永凯，
申请(专利权)人：北京微吼时代科技有限公司，
类型：发明
国别省市：