弹框组件配置化调用方法、装置、设备和存储介质与流程

本发明涉及计算机，特别是涉及一种弹框组件配置化调用方法、装置、设备和存储介质。

背景技术：

1、在前端开发中，弹框组件是一种常见的交互元素，用于展示信息、填写表单，增删改查操作等。传统弹框组件的创建方式往往是需要在当前业务页面中编写大量的页面结构和逻辑代码，使得独立于业务的弹框内容与原有业务页面的混合在一起。

2、这种方式使得页面代码变得复杂和难以维护，从而可能带来以下几个开发中难以避免的问题：(1)代码可读性下降：当弹框组件的代码直接与业务页面代码混合在一起时，页面结构复杂，一个页面可能同时包含业务逻辑、弹框的html结构、css样式以及javascript逻辑，整个页面的代码量会显著增加，开发者很难在其中快速找到特定的功能或组件代码，很难快速定位到某个特定功能或组件的代码段，缺乏结构化和清晰的组织，会导致开发者在阅读和维护代码时效率低下。(2)维护成本高：在修改某个功能时，可能会不小心影响到其他不相关的部分，这增加了修复bug和添加新功能的难度，提高了维护成本。(3)复用性差：在其他页面需要相同的弹框时，需要重复编写相同的代码，这不仅增加了工作量，还容易导致代码的重复和不一致，即使某个功能或组件在多个地方被使用，也需要重复编写相同的代码，降低了代码的可重用性。

技术实现思路

1、基于此，有必要针对上述技术问题，提供一种弹框组件配置化调用方法、装置、设备和存储介质。

2、一种弹框组件配置化调用方法，所述方法包括：

3、根据预先设置的参数对象编写弹框组件；

4、通过定义构造函数编写中间件；所述构造函数用于根据所述参数对象动态生成弹框组件实例；所述弹框组件实例包括属性和方法；所述属性包括弹框样式配置项、业务组件和传递给子组件的参数；所述方法包括包含弹框打开方法和弹框关闭方法；

5、在触发打开弹框操作时，利用预先定义的通用函数调用所述中间件，利用所述中间件接收所述参数对象并进行处理，动态生成对应的弹框组件实例，利用弹框打开方法传入所述业务组件和所述业务数据，将业务组件和业务数据结合并挂载到所述弹框组件实例上，生成弹框html结构并显示到当前页面。

6、在其中一个实施例中，还包括：所述弹框打开方法还用于接收业务数据，将业务数据传入所述业务组件中。

7、在其中一个实施例中，还包括：所述弹框关闭方法用于销毁弹框组件实例。

8、在其中一个实施例中，还包括：所述参数对象包括弹框常量参数：所述弹框常量参数包括元素插入的位置、生命周期的回调函数、自定义数据对象以及弹框的标题、样式、动画和ui组件的属性。

9、在其中一个实施例中，还包括：根据预先设置的参数对象构建弹框空框架，并将需要通过弹框展示的业务组件编写到独立的文件中。

10、在其中一个实施例中，还包括：在弹框组件实例的创建到销毁的过程中定义生命周期函数，将生命周期钩子与参数对象中相应配置对象绑定。

11、在其中一个实施例中，还包括：在触发关闭弹框操作时，调用所述弹框关闭方法，触发弹框打开方法的.then回调机制，执行弹框关闭后的自定义事件。

12、一种弹框组件配置化调用装置，所述装置包括：

13、弹框组件编写模块，用于根据预先设置的参数对象编写弹框组件；

14、中间件编写模块，用于通过定义构造函数编写中间件；所述构造函数用于根据所述参数对象动态生成弹框组件实例；所述弹框组件实例包括属性和方法；所述属性包括弹框样式配置项、业务组件和传递给子组件的参数；所述方法包括包含弹框打开方法和弹框关闭方法；

15、弹框生成模块，用于在触发打开弹框操作时，利用预先定义的通用函数调用所述中间件，利用所述中间件接收所述参数对象并进行处理，动态生成对应的弹框组件实例，利用弹框打开方法传入所述业务组件和业务数据，将业务组件和业务数据结合并挂载到所述弹框组件实例上，生成弹框html结构并显示到当前页面。

16、一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

17、根据预先设置的参数对象编写弹框组件；

18、通过定义构造函数编写中间件；所述构造函数用于根据所述参数对象动态生成弹框组件实例；所述弹框组件实例包括属性和方法；所述属性包括弹框样式配置项、业务组件和传递给子组件的参数；所述方法包括包含弹框打开方法和弹框关闭方法；

19、在触发打开弹框操作时，利用预先定义的通用函数调用所述中间件，利用所述中间件接收所述参数对象并进行处理，动态生成对应的弹框组件实例，利用弹框打开方法传入所述业务组件和业务数据，将业务组件和业务数据结合并挂载到所述弹框组件实例上，生成弹框html结构并显示到当前页面。

20、一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

21、根据预先设置的参数对象编写弹框组件；

22、通过定义构造函数编写中间件；所述构造函数用于根据所述参数对象动态生成弹框组件实例；所述弹框组件实例包括属性和方法；所述属性包括弹框样式配置项、业务组件和传递给子组件的参数；所述方法包括包含弹框打开方法和弹框关闭方法；

23、在触发打开弹框操作时，利用预先定义的通用函数调用所述中间件，利用所述中间件接收所述参数对象并进行处理，动态生成对应的弹框组件实例，利用弹框打开方法传入所述业务组件和业务数据，将业务组件和业务数据结合并挂载到所述弹框组件实例上，生成弹框html结构并显示到当前页面。

24、上述弹框组件配置化调用方法、装置、设备和存储介质，通过中间件的形式使用高阶组件封装不限于弹框组件的通用逻辑，使弹框与当前页面的业务关系进行完全解耦来实现模块化管理组件，从而简化弹框组件调用方式、提高代码复用性、提高弹框组件可扩展性，提供一种简单、高效、灵活的配置化调用方式，通过定义通用函数，通用函数可接收自定义组件和一系列配置参数作为输入，自定义组件可以是原生业务组件，也可以是ui组件，根据这些参数动态生成(虚拟)组件实例并按需调用后产生真实html节点显示到界面上。本发明方法使得开发者无需为每个弹框编写独立的框架代码，通过简单的配置即可实现多样化的弹框显示和业务功能需求。

技术特征：

1.一种弹框组件配置化调用方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述弹框打开方法还用于接收业务数据，将业务数据传入所述业务组件中。

3.根据权利要求1所述的方法，其特征在于，所述弹框关闭方法用于销毁弹框组件实例。

4.根据权利要求1所述的方法，其特征在于，所述参数对象包括弹框常量参数：所述弹框常量参数包括元素插入的位置、生命周期的回调函数、自定义数据对象以及弹框的标题、样式、动画和ui组件的属性。

5.根据权利要求1所述的方法，其特征在于，所述根据预先设置的参数对象编写弹框组件包括：

6.根据权利要求1-5任一项所述的方法，其特征在于，在弹框组件实例的创建到销毁的过程中定义生命周期函数，将生命周期钩子与参数对象中相应配置对象绑定。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

8.一种弹框组件配置化调用装置，其特征在于，所述装置包括：

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

技术总结
本发明涉及一种弹框组件配置化调用方法、装置、设备和存储介质。方法包括：根据参数对象编写弹框组件；通过定义构造函数编写中间件；构造函数用于根据参数对象动态生成弹框组件实例；弹框组件实例包括属性和方法；属性包括弹框样式配置项、业务组件和传递给子组件的参数；方法包括包含弹框打开方法和弹框关闭方法；触发打开弹框操作时，利用预先定义的通用函数调用中间件，利用中间件接收参数对象并进行处理，动态生成对应的弹框组件实例，利用弹框打开方法传入业务组件和业务数据，并结合挂载到弹框组件实例上，生成弹框HTML结构并显示到当前页面。采用本方法能够简化弹框组件调用方式、提高代码复用性、提高弹框组件可扩展性。

技术研发人员：马涛,屠旭明
受保护的技术使用者：中电信数智科技有限公司
技术研发日：
技术公布日：2024/12/19