本技术涉及计算机，尤其涉及一种ui模块化调配系统及其搭建方法。
背景技术：
1、现有技术中，系统用户界面(user interface，ui)是指对软件的人机交互、操作逻辑、界面美观的整体设计。用户界面是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换；用户界面是介于用户与硬件而设计的彼此之间交互沟通的相关软件，目的在于使用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成之工作，用户界面定义广泛，包含了人机交互与图形用户接口，凡参与人类与机械的信息交流的领域都存在着用户界面。好的ui设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。目前对于用户界面的开发效率差，用户界面构建不够灵活，使得项目的开发速度和交付质量低下。
技术实现思路
1、本技术的一个目的是提供一种ui模块化调配系统及其搭建方法，通过选择和配置预先定义的模块来进行自动布局和响应式设计，从而渲染出与实际应用场景对应的实际的ui界面，不仅能够提高开发效率，还使得开发者能够更加高效、灵活地构建用户界面，加快了项目的开发速度和交付质量，从而有效地提高ui模块化调配系统的开发效率。
2、根据本技术的一个方面，提供了一种ui模块化调配系统，其中，该系统包括：模块配置器、模块渲染引擎、数据绑定和事件处理单元、状态管理单元、性能优化和监控单元，其中，
3、所述模块配置器用于允许开发者选择和配置模块并进行自动布局和响应式设计；
4、所述模块渲染引擎用于将配置的模块渲染成实际的ui界面；
5、所述数据绑定和事件处理单元用于将配置的模块的属性绑定到实际应用场景的数据源上，还负责处理用户在实际的ui界面上产生的交互事件，并将所述交互事件传递给相应的模块或组件来处理；
6、所述状态管理单元用于管理该系统的全局状态和配置的模块之间的状态的交互，并负责不同的模块之间的数据交互和通信；
7、性能优化和监控单元用于该系统的代码拆分、懒加载及缓存，并负责收集和分析该系统的运行数据。
8、进一步地，上述系统中，所述模块配置器用于：
9、通过提供的可视化的界面，允许开发者选择、调整模块的大小和位置并修改配置的模块的属性，并对配置的模块在不同的设计和屏幕尺寸上进行自动布局和响应式设计。
10、进一步地，上述系统中，所述模块渲染引擎用于：
11、分析配置的模块的配置信息，并将所述配置信息转换成实际的html、css和javascript代码，加载并渲染所述实际的html、css和javascript代码以形成实际的ui界面。
12、进一步地，上述系统中，所述状态管理单元用于：
13、通过状态管理库管理该系统的全局状态和配置的模块之间的状态的交互，以确保该系统和配置的模块的状态的一致性和可预测性；
14、协调不同的模块之间的数据交互和通信，以确保模块间的协同工作。
15、进一步地，上述系统中，该系统还包括：
16、模块库，用于集中存储和管理所有的模块的库，每个模块相互独立且可复用，每个模块包括至少一个ui组件，该ui组件为预设的标准组件或根据业务场景而定制的场景组件；
17、代码复用单元，用于将不同的ui组件划分为独立的模块，每个模块负责处理相应的用户界面元素或交互逻辑，以使开发者在不同的项目、页面或功能中重复使用该模块；
18、构建单元，用于根据实际应用场景调配一个或多个模块来构建与所述实际应用场景对应的用户界面；
19、维护单元，用于在出现问题或待修改模块的功能时，定位到对应的问题模块或待修改模块进行修复。
20、根据本技术的另一个方面，还提供了一种ui模块化调配系统的搭建方法，其中，该方法包括：
21、将实际应用场景对应的ui界面拆分为至少一个模块，各模块用于处理各自对应的单一功能；根据所述实际应用场景创建可复用的至少一个原子组件及其任意组合形成的组合组件，以构成所述实际应用场景对应的组件库，其中，每个模块由一个或多个组件组成；
22、对所述组件库内的组件的状态进行管理、组件间的数据进行传递并通过事件处理组件间的交互与通信；
23、将所述实际应用场景对应的源代码拆分为各模块对应的子代码，并对非关键性的模块或组件使用懒加载来进行延迟加载；
24、调用前端框架来支持所述实际应用场景对应的各模块及组件库的开发和搭建；
25、对所述实际应用场景对应的各模块进行打包和优化，并持续集成或部署各模块对应的子代码；
26、对所述实际应用场景对应的各模块和各组件分别进行单元测试、集成测试和审核测试，以形成所述实际应用场景对应的ui模块化调配系统。
27、进一步地，上述方法中，所述对所述组件库内的组件的状态进行管理、组件间的数据进行传递并通过事件处理组件间的交互与通信，包括：
28、使用状态管理工具redux或vuex来对所述组件库内的各组件的状态进行管理；
29、通过组件的属性，将数据从组件库中的父组件传递至对应的子组件；
30、通过事件处理组件间的交互与通信。
31、进一步地，上述方法中，所述前端框架包括react前端框架、vue前端框架和angular前端框架。
32、进一步地，上述方法中，所述对所述实际应用场景对应的各模块和各组件分别进行单元测试、集成测试和审核测试，以形成所述实际应用场景对应的ui模块化调配系统，包括：
33、对所述实际应用场景对应的各模块和各组件分别进行单元测试；
34、对所述实际应用场景的整个系统进行集成测试，以确保各模块之间的协同工作；
35、对所述实际应用场景的整个系统、各模块和各组件进行代码审查，以形成所述实际应用场景对应的ui模块化调配系统。
36、进一步地，上述方法中，所述方法还包括：
37、对搭建形成的所述实际应用场景对应的ui模块化调配系统进行监控和日志记录；
38、基于监控的结果和日志记录持续优化和迭代系统。
39、与现有技术相比，本技术提供的一种ui模块化调配系统，其中，该系统包括：模块配置器、模块渲染引擎、数据绑定和事件处理单元、状态管理单元、性能优化和监控单元，其中，所述模块配置器用于允许开发者选择和配置模块并进行自动布局和响应式设计；所述模块渲染引擎用于将配置的模块渲染成实际的ui界面；所述数据绑定和事件处理单元用于将配置的模块的属性绑定到实际应用场景的数据源上，还负责处理用户在实际的ui界面上产生的交互事件，并将所述交互事件传递给相应的模块或组件来处理；所述状态管理单元用于管理该系统的全局状态和配置的模块之间的状态的交互，并负责不同的模块之间的数据交互和通信；性能优化和监控单元用于该系统的代码拆分、懒加载及缓存，并负责收集和分析该系统的运行数据。通过选择和配置预先定义的模块来进行自动布局和响应式设计，从而渲染出与实际应用场景对应的实际的ui界面，不仅能够提高开发效率，还使得开发者能够更加高效、灵活地构建用户界面，加快了项目的开发速度和交付质量，从而有效地提高ui模块化调配系统的开发效率。
1.一种ui模块化调配系统，其中，该系统包括：模块配置器、模块渲染引擎、数据绑定和事件处理单元、状态管理单元、性能优化和监控单元，其中，
2.根据权利要求1所述的系统，其中，所述模块配置器用于：
3.根据权利要求1所述的系统，其中，所述模块渲染引擎用于：
4.根据权利要求1所述的系统，其中，所述状态管理单元用于：
5.根据权利要求1所述的系统，其中，该系统还包括：
6.一种ui模块化调配系统的搭建方法，其中，该方法包括：
7.根据权利要求6所述的方法，其中，所述对所述组件库内的组件的状态进行管理、组件间的数据进行传递并通过事件处理组件间的交互与通信，包括：
8.根据权利要求6所述的方法，其中，所述前端框架包括react前端框架、vue前端框架和angular前端框架。
9.根据权利要求所述的方法，其中，所述对所述实际应用场景对应的各模块和各组件分别进行单元测试、集成测试和审核测试，以形成所述实际应用场景对应的ui模块化调配系统，包括：
10.根据权利要求6所述的方法，其中，所述方法还包括：
