[发明专利]实现业务编排的前端组件快速处理方法、系统及计算机存储介质

说明书

本发明属于软件技术开发领域，公开了一种实现业务编排的前端组件快速处理方法和系统，该方法包括：在前端框架内部注入数据模型引擎，所述数据模型引擎与前端框架进行了侵入式的代码绑定，并通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。本发明解决了原有的前端框架在组件代码变动需要重新进行编译带来的性能消耗和时间周期较长的问题，能够方便快捷的通过动态替换脚本代码实现在线调试，且免编译，并可跨框架使用。

技术领域

本发明属于软件技术开发领域，尤其是涉及一种实现业务编排的前端组件快速处理方法和系统。

背景技术

在当今时代，三代框架react、vue、angular的出现让前端迎来了数据驱动的热潮，同时也火爆了webpack等相关前端编译工具，每一次的代码变动都需要经过编译，让前端进入了一个新的体验，但当项目不断变大的时候，编译带来的性能消耗和等待时间也是不断变大的，有一些中小型项目大都数据层面是类似的，而随着低代码化(搭积木方式生成项目)的推进，除了UI组件层面的复用，还有一些需要对UI组件之间以及和服务端之间的业务进行编排的工作，这时候就需要一个中介来处理UI组件之间的联动，也就是组件到组件之间的数据传输，再者需要和服务端联动，以及如何从服务端获取、转换、传递给UI组件。

发明内容

针对现有技术中存在的上述缺陷，本发明的目的是，提供一种实现业务编排的前端组件快速处理方法和系统，以解决原有的前端框架在组件代码变动需要重新进行编译带来的性能消耗和时间周期较长的问题。

本发明的第一方面，提供了一种实现业务编排的前端组件快速处理方法，其包括：在前端框架内部注入数据模型引擎，所述数据模型引擎与前端框架进行了侵入式的代码绑定，并通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。

进一步地，对所述组件的操作包括如下中的一种或几种：

修改组件实例数据或内容；

监听各组件内部事件以管理组件之间的数据通信；

从服务端获取远程数据，对页面进行组件渲染；

对页面中各组件进行排列渲染；

动态替换脚本代码实现在线调试。

进一步地，获取页面的组件实例包括：将页面的各渲染组件按照编号、类型、名称进行统计归类，一个页面形成一个options配置数组，通过所述配置数组中的编号、类型或名称，以选择对应的组件及组件实例。

进一步地，管理组件之间的数据通信包括：监听各组件内部数据是否发生变化，在某组件内部发出消息事件时，传递给所述数据模型引擎，所述数据模型引擎接收某组件内部发出事件并触发其它关联组件实例的数据更新，其它关联组件对更新的组件实例添加事件接受方法，完成消息事件的更新。

进一步地，所述组件的排列包括：组件的创建、删除、前后排序。

进一步地，从服务端获取远程数据，对页面进行组件渲染的过程包括：通过数据模型引擎传递请求参数，选取对应的组件实例，将接口数据直接赋值给组件实例内的字段，实现页面组件的渲染。

进一步地，所述的前端页面框架包括react、vue、angular。

本发明的另一方面，提供了一种前端组件动态扩展的系统，该系统包括：数据模型引擎，所述数据模型引擎提前注入在前端框架内部并与前端框架内部的代码进行了侵入式的绑定，通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。

进一步地，所述数据模型引擎包括：组件选择器、事件管理器和数据请求库，其中，所述组件选择器用于根据组件的数据格式快速获取组件实例，所述事件管理器用于监听管理页面中各组件间的数据通信，所述数据请求库用于和服务的进行数据交互。