实现业务编排的前端组件快速处理方法、系统及计算机存储介质技术方案

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

【技术实现步骤摘要】
实现业务编排的前端组件快速处理方法、系统及计算机存储介质


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

技术介绍

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

技术实现思路

[0003]针对现有技术中存在的上述缺陷，本专利技术的目的是，提供一种实现业务编排的前端组件快速处理方法和系统，以解决原有的前端框架在组件代码变动需要重新进行编译带来的性能消耗和时间周期较长的问题。
[0004]本专利技术的第一方面，提供了一种实现业务编排的前端组件快速处理方法，其包括：在前端框架内部注入数据模型引擎，所述数据模型引擎与前端框架进行了侵入式的代码绑定，并通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。
[0005]进一步地，对所述组件的操作包括如下中的一种或几种：
>[0006]修改组件实例数据或内容；
[0007]监听各组件内部事件以管理组件之间的数据通信；
[0008]从服务端获取远程数据，对页面进行组件渲染；
[0009]对页面中各组件进行排列渲染；
[0010]动态替换脚本代码实现在线调试。
[0011]进一步地，获取页面的组件实例包括：将页面的各渲染组件按照编号、类型、名称进行统计归类，一个页面形成一个options配置数组，通过所述配置数组中的编号、类型或名称，以选择对应的组件及组件实例。
[0012]进一步地，管理组件之间的数据通信包括：监听各组件内部数据是否发生变化，在某组件内部发出消息事件时，传递给所述数据模型引擎，所述数据模型引擎接收某组件内部发出事件并触发其它关联组件实例的数据更新，其它关联组件对更新的组件实例添加事件接受方法，完成消息事件的更新。
[0013]进一步地，所述组件的排列包括：组件的创建、删除、前后排序。
[0014]进一步地，从服务端获取远程数据，对页面进行组件渲染的过程包括：通过数据模型引擎传递请求参数，选取对应的组件实例，将接口数据直接赋值给组件实例内的字段，实现页面组件的渲染。
[0015]进一步地，所述的前端页面框架包括react、vue、angular。
[0016]本专利技术的另一方面，提供了一种前端组件动态扩展的系统，该系统包括：数据模型引擎，所述数据模型引擎提前注入在前端框架内部并与前端框架内部的代码进行了侵入式的绑定，通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。
[0017]进一步地，所述数据模型引擎包括：组件选择器、事件管理器和数据请求库，其中，所述组件选择器用于根据组件的数据格式快速获取组件实例，所述事件管理器用于监听管理页面中各组件间的数据通信，所述数据请求库用于和服务的进行数据交互。
[0018]本专利技术的第三专利技术，还提供了一种计算机可读存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现前述第一方面任一项所述方法的操作步骤。
[0019]与现有技术相比，本专利技术所述的一种实现业务编排的前端组件快速处理方法和系统，达到了如下技术效果：
[0020]1、本专利技术设置了一个数据模型引擎，由于vue、react等前端框架需要编译后才可以在浏览器端运行，而此引擎通过提前注入到vue、react等前端框架内部，对外提供了一个无需编译就可以通过原生JavaScript来直接访问vue和react组件的内部及操作的方式，通过这个方式，能够很方便快捷的通过动态替换脚本代码实现在线调试，且免编译，并可跨框架使用。
[0021]2、本专利技术的数据模型引擎通过组件选择器能够快速获取组件实例，以实现对组件的进一步操作，不需要像之前需要通过获取组件DOM结构再转换成实例；通过事件管理器，实现了组件间的消息传递，方便页面中不同组件间的事件通信；通过数据请求库实现了与服务端的快捷通信；通过数据模型引擎的组件排列器，可实现页面中组件的创建、删除、前后排序的功能。
附图说明
[0022]图1是本专利技术实施例中的数据模型引擎的基础架构图。
[0023]图2是本专利技术实施例中的组件间通信的示意图。
[0024]图3是本专利技术实施例中的数据模型引擎跨框架使用的原理图。
具体实施方式
[0025]下面详细描述本专利技术的实施例，所述实施例的示例在附图中示出。其中，下面通过参考附图描述的实施例是示例性的，旨在用于解释本专利技术，而不能理解为对本专利技术的限制。
[0026]本专利技术的实施例一公开了一种实现业务编排的前端组件快速处理方法，该方法通过在前端框架内部注入数据模型引擎(ViewModelEngine，简称Vme)，该数据模型引擎利用了javascript注入的思想，在组件渲染成功后挂载到了统一的容器上，如挂载到网页中的DOM节点，比如DIV节点，来统一维护和编排这些组件实例，这样，可以通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。其中，可以应用的前
端框架包括react、vue、angular，以及其它应用程序的前端页面框架。vme的本质是仿照DOM的思路，在vue和react等框架之上封装出来的一个通用抽象访问层，vme通过和框架代码一些侵入式的绑定，可以更方便的通过api来访问框架内部。
[0027]由于vue、react等前端框架需要编译后才可以在浏览器端运行，而此引擎通过提前注入到vue、react等前端框架内部，对外提供了一个无需编译就可以通过原生JavaScript来直接访问vue和react组件的内部以及操作的方式，不依赖框架本身，可以跨框架而用，通过这个方式，能够很方便快捷的通过动态替换脚本代码来实现在线调试而无需增加编译开销，同时，也能降低开发人员的门槛，即便只熟悉最基本的JavaScript语法即可开发。
[0028]为了方便获取组件实例，本专利技术将组件抽象成一个统一的数据格式，将页面的各渲染组件按照组件的编号、组件的类型、组件的名称，还可以包括组件的其它额外配置数据，进行统计归类，一个页面具有多个节点，形成一个options配置数组，options配置数组包括组件的编号、名称、类型等在内的json形式的配置信息，其中，组件的类型表示这个组件属于什么品类，比如是按钮、表格、表单等，一个标准的U本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种实现业务编排的前端组件快速处理方法，其特征在于，所述方法包括：在前端框架内部注入数据模型引擎，所述数据模型引擎与前端框架进行了侵入式的代码绑定，并通过原生JavaScript语法直接访问前端框架内部，获取页面的组件实例并对组件进行操作。2.根据权利要求1所述的前端组件快速处理方法，其特征在于，对所述组件的操作包括如下中的一种或几种：修改组件实例数据或内容；监听各组件内部事件以管理组件之间的数据通信；从服务端获取远程数据，对页面进行组件渲染；对页面中各组件进行排列渲染；动态替换脚本代码实现在线调试。3.根据权利要求2所述的前端组件快速处理方法，其特征在于，获取页面的组件实例包括：将页面的各渲染组件按照编号、类型、名称进行统计归类，一个页面形成一个options配置数组，通过所述配置数组中的编号、类型或名称，以选择对应的组件及组件实例。4.根据权利要求2所述的前端组件快速处理方法，其特征在于，管理组件之间的数据通信包括：监听各组件内部数据是否发生变化，在某组件内部发出消息事件时，传递给所述数据模型引擎，所述数据模型引擎接收某组件内部发出事件并触发其它关联组件实例的数据更新，其它关联组件对更新的组件实例添加事件接受方法，完成消息事件的更新。5.根据权利要求2或3所述的前端组件快速处理方法，其特征在...

【专利技术属性】
技术研发人员：陈波，杨成颖，李成，孙迁，
申请(专利权)人：深圳市云网万店科技有限公司，
类型：发明
国别省市：