CN113656027A - 一种基于mvvm架构实现可视化设计模型的方法 - Google Patents

Abstract

本申请公开了一种基于MVVM架构实现可视化设计模型的方法，其涉及软件开发技术领域，包括如下步骤：基于Vue2.X构建底层框架，在所述底层框架中构建MVVM模式框架，所述MVVM模式框架包括数据显示层、数据处理层和数据模型层；所述数据处理层从所述数据模型层获取数据对象；基于组件设计于所述数据显示层构建可视化设计模型；所述数据显示层获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面；根据原生的JavaScript事件判断所述数据显示层中的用户指令；基于所述用户指令更新所述显示界面。本申请具有开发出的软件具有丰富元素集成的同时还具有较为流畅的加载效果。

Description

一种基于MVVM架构实现可视化设计模型的方法

技术领域

本申请涉及软件开发技术领域，尤其是涉及一种基于MVVM架构实现可视化设计模型的方法。

背景技术

软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程，是一项包括需求捕捉、需求分析、设计、实现和测试的系统工程。软件一般是用某种程序设计语言来实现的，通常采用软件开发工具可以进行，软件设计思路和方法的一般过程，包括设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试。

传统开发技术所开发的软件，需要用户使用命令行进行操作和运行，因此用户的操作和使用门槛较高，难以满足大部分用户的使用需求。相关技术中的软件开发，可以构建供用户更为直观地操作软件的图形界面，并建立底层代码与图形界面之间的映射联系，使得开发出的应用或软件降低了使用门槛，方便用户的使用。

针对上述中的相关技术，发明人认为存在有以下缺陷：在软件开发中为了满足对用户界面的开发与呈现，往往需要进行较丰富的图层设计，而在图层设计的丰富过程中会使得用户界面与底层代码之间的交互越来越繁琐，最终导致软件在使用过程中页面加载优化较差、加载速度较慢。

发明内容

为了改善开发的软件在使用过程中页面加载优化较差、加载速度较慢的缺陷，本申请提供一种基于MVVM架构实现可视化设计模型的方法。

一种基于MVVM架构实现可视化设计模型的方法，包括如下步骤：

基于Vue2.X构建底层框架，在所述底层框架中构建MVVM模式框架，所述MVVM模式框架包括数据显示层、数据处理层和数据模型层；

所述数据处理层从所述数据模型层获取数据对象；

基于组件设计于所述数据显示层构建可视化设计模型；

所述数据显示层获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面；

基于事件触发机制判断所述数据显示层中的用户指令；

基于所述用户指令更新所述显示界面。

通过采用上述技术方案，构建MVVM模式框架，数据显示层通过组件设计可以构建可视化设计模型，可视化设计模型中可以通过多元素的图层设计进行显示界面的设计，而显示界面所映射的底层代码则是数据处理层由数据模型层处理获取的数据对象，当用户在数据显示层进行操作时，数据处理层将会基于事件触发机制判断用户指令的具体内容，根据用户指令内容进行相应的响应并最终更新数据显示层的显示界面。通过数据处理层和事件触发机制的设置可以实现用户进行页面切换等操作的快速相应，并迅速更改底层的数据对象，再将新的数据对象映射于数据显示层，从而提升了软件使用时的加载速度。

可选的，基于MVVM架构实现可视化设计模型的方法，还包括如下步骤：

通过API接口构建所述数据显示层、所述数据处理层和所述数据模型层之间的数据通道。

通过采用上述技术方案，由于MVVM模式架构中的数据显示层、数据处理层和数据模型层之间具有低耦性，通过API接口构建各个层级之间的数据通道可以进一步降低各层级之间的耦合程度，并提高组成单元的内聚性，从而提高整体框架的维护性和扩展性。

可选的，数据处理层从所述数据模型层获取数据对象，包括如下步骤：

在所述数据处理层中创建值转换器；

所述数据处理层获取所述数据模型层中的数据模型；

所述数据处理层通过所述值转换器将所述数据模型转换为数据对象。

通过采用上述技术方案，通过在数据处理层创建值转换器，可以把数据模型层中获取的数据模型转换成数据对象，便于对数据的轻松管理和呈现。

可选的，基于组件设计于所述数据显示层构建可视化设计模型，包括如下步骤：

定义组件规范；

根据所述组件规范构建多个组件模块；

组合多个所述组件模块形成可视化设计模型。

通过采用上述技术方案，在数据显示层的设计层面采用组件设计，使得构建出的可视化设计模型具有较好的重用性、灵活性和扩展性。

可选的，所述组件模块包括可拖拽式组件模块、可排序式组件模块和响应式组件模块。

通过采用上述技术方案，通过多种形式的组件模块的组合，有利于对可视化设计模型进行拓展，并丰富可视化设计模型中的元素。

可选的，获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面，包括如下步骤：

通过所述API接口获取Json格式的数据对象；

构建Json解析模式；

基于所述Json解析模式将所述Json格式的数据对象解析为显示界面。

通过采用上述技术方案，由于通过API接口所获取的数据对象难以直接转换为显示界面，因此需要采用Json解析模式作为数据交换工具，将Json格式的数据对象进行转换。

可选的，基于事件触发机制判断所述数据显示层中的用户指令，包括如下步骤：

获取所述数据显示层中的用户动作；

基于所述用户动作触发所述事件触发机制，所述事件触发机制为原生的JavaScript事件；

对所述JavaScript事件进行算法运算，得到运算结果；

基于所述运算结果判断用户指令。

通过采用上述技术方案，当用户在数据显示层中进行操作产生用户动作后，将会触发数据处理层中原生的JavaScript事件，且不同的用户动作将会触发不同的JavaScript事件，以达到对用户动作快速精准的响应，若用户动作较为复杂，则JavaScript事件触发后将需要进行算法运算，最后通过运算结果可以判断出用户动作所包含的用户指令，再根据用户指令进行下一步动作。

可选的，对所述JavaScript事件进行算法运算，包括如下步骤：

构建数据函数库；

通过调用所述数据函数库中的算法函数对所述JavaScript事件进行算法运算。

通过采用上述技术方案，通过数据函数库的构建，可以基于不同的JavaScript事件调用不同的算法函数进行运算，从而可以快速将用户动作进行解析运算得到用户指令。

可选的，所述数据函数库为Math库。

通过采用上述技术方案，Math库中包含大部分的数学函数和数学运算方式，有利于辅助对JavaScript事件进行算法运算。

可选的，基于所述用户指令更新所述显示界面，包括如下步骤：

所述数据处理层通过所述API接口获取所述用户指令，并基于所述用户指令更新所述数据对象，得到新数据对象；

所述数据显示层获取所述新数据对象，并通过所述Json解析模式解析所述新数据对象，得到新显示界面；

将所述显示界面更新为所述新显示界面。

通过采用上述技术方案，数据处理层根据用户指令更新数据对象得到新数据对象，并将新数据对象同步至数据模型层中，同时数据显示层将新数据对象进行重新解析得到新显示界面，并将新显示界面更新替换原有的显示界面，即可完成对用户动作的反馈。

综上所述，本申请包括以下至少一种有益技术效果：

1.构建MVVM模式框架，数据显示层通过组件设计可以构建可视化设计模型，可视化设计模型中可以通过多元素的图层设计进行显示界面的设计，而显示界面所映射的底层代码则是数据处理层由数据模型层处理获取的数据对象，当用户在数据显示层进行操作时，数据处理层将会基于事件触发机制判断用户指令的具体内容，根据用户指令内容进行相应的响应并最终更新数据显示层的显示界面。通过数据处理层和事件触发机制的设置可以实现用户进行页面切换等操作的快速相应，并迅速更改底层的数据对象，再将新的数据对象映射于数据显示层，从而提升了软件使用时的加载速度。

2.当用户在数据显示层中进行操作产生用户动作后，将会触发数据处理层中原生的JavaScript事件，且不同的用户动作将会触发不同的JavaScript事件，以达到对用户动作快速精准的响应，若用户动作较为复杂，则JavaScript事件触发后将需要进行算法运算，最后通过运算结果可以判断出用户动作所包含的用户指令，再根据用户指令进行下一步动作。

附图说明

图1是本申请其中一实施例的基于MVVM架构实现可视化设计模型的方法的结构示意图。

图2是本申请其中一实施例的基于MVVM架构实现可视化设计模型的方法的流程示意图。

图3是本申请其中一实施例的从数据模型层获取数据对象的流程示意图。

图4是本申请其中一实施例的基于组件设计构建可视化设计模型的流程示意图。

图5是本申请其中一实施例的将数据对象解析为显示界面的流程示意图。

图6是本申请其中一实施例的基于事件触发机制判断用户指令的流程示意图。

图7是本申请其中一实施例的基于用户指令更新显示界面的流程示意图。

具体实施方式

以下结合附图1-7对本申请作进一步详细说明。

本申请实施例公开了一种基于MVVM架构实现可视化设计模型的方法。

参照图1、图2，基于MVVM架构实现可视化设计模型的方法，包括如下具体步骤：

101，基于Vue2.X构建底层框架，在所述底层框架中构建MVVM模式框架。

其中，基于Vue2.X构建的底层框架是一种用户界面上渐进式的前端框架，可以提供响应式（Reactive）和组件化（Composable）的视图组件，且可以实现数据的双向数据绑定。而MVVM模式框架包括用于展现在用户面前的数据展示层、进行数据处理转换的数据处理层和包含底层数据对象和数据逻辑的数据模型层。由于双向数据绑定的关系，可以实现数据的自动化处理，当数据处理层中的数据发生改变时，数据显示层所展示出的显示界面也将作出相应改变。

102，通过API接口构建所述数据显示层、所述数据处理层和所述数据模型层之间的数据通道。

其中，API接口是一种预先定义的接口，可以对不同组成部分的衔接进行约定，运用于操作系统中可以支持用户与操作系统之间的交互。如图1所示，API接口实现了数据显示层、数据处理层和数据模型层之间的数据交互。由于MVVM模式架构中的数据显示层、数据处理层和数据模型层之间具有低耦性，通过API接口构建各个层级之间的数据通道可以进一步降低各层级之间的耦合程度，并提高组成单元的内聚性，从而提高整体框架的维护性和扩展性。

103，所述数据处理层从所述数据模型层获取数据对象。

其中，数据模型层具有很好的可复用性，可以统一管理需要使用的数据对象。

104，基于组件设计于所述数据显示层构建可视化设计模型。

其中，组件设计使得可视化设计模型中包含若干不同性能的组件，以满足数据显示层进行多元素的拓展设计。

105，所述数据显示层获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面。

其中，为了实现用户在数据显示层进行可视化操作，需要将数据对象可视化，解析转换为显示界面再呈现于数据显示层中。

106，基于事件触发机制判断所述数据显示层中的用户指令。

其中，当用户在数据显示层中进行了操作动作后将会产生用户动作，不同的用户动作将会对应不同的事件触发机制，再根据对事件触发机制的处理判断用户动作中的用户指令，从而实现对用户动作的快速响应处理。

107，基于所述用户指令更新所述显示界面。

其中，用户指令改变底层数据，由于双向数据绑定的关系，底层数据的改变将会使得显示界面进行同步改变。

本实施例的实施原理为：

构建MVVM模式框架，数据显示层通过组件设计可以构建可视化设计模型，可视化设计模型中可以通过多元素的图层设计进行显示界面的设计，而显示界面所映射的底层代码则是数据处理层由数据模型层处理获取的数据对象，当用户在数据显示层进行操作时，数据处理层将会基于事件触发机制判断用户指令的具体内容，根据用户指令内容进行相应的响应并最终更新数据显示层的显示界面。通过数据处理层和事件触发机制的设置可以实现用户进行页面切换等操作的快速相应，并迅速更改底层的数据对象，再将新的数据对象映射于数据显示层，从而提升了软件使用时的加载速度。

数据处理层作为专门的对象用于进行业务逻辑处理，并架构于数据显示层与数据模型层之间，通过事件触发机制等方式对用户动作进行快速响应，各层级之间数据绑定，有利于开发解耦，可以将数据处理层和数据显示层分开进行开发，还有利于对数据模型层的测试与维护。

在图1所示实施例的步骤103中，将数据模型层中的数据模型转换为显示界面的视图，需要先经过数据处理层的转换处理，具体步骤通过图3所示实施例进行详细说明。

参照图3，数据处理层从所述数据模型层获取数据对象，包括如下具体步骤：

201，在所述数据处理层中创建值转换器。

其中，值转换器可以将数据从一种类型更改为另一种类型。

202，所述数据处理层获取所述数据模型层中的数据模型。

203，所述数据处理层通过所述值转换器将所述数据模型转换为数据对象。

其中，数据模型是数据特征的抽象，因此需要通过值转换器将数据模型转换为便于处理的数据对象。

本实施例的实施原理为：

通过在数据处理层创建的值转换器，可以把数据模型转换成数据对象，便于对数据的轻松管理和呈现。

在图1所示实施例的步骤104中，为了便于用户在数据显示层上的操作使用，并突出整个数据显示层中的高内聚性和低耦合性，采用组件设计的思路在数据显示层中的设计层面进行设计，具体通过图4所示实施例进行详细说明。

参照图4，基于组件设计于所述数据显示层构建可视化设计模型，包括如下具体步骤：

301，定义组件规范。

其中，通过组件规范的定义，有利于各个组件所构建出的可视化设计模型具有良好的视觉一致性。

302，根据所述组件规范构建多个组件模块。

其中，由于预先定义了组件规范，因此多个组件模块能够在数据显示层中保持视觉的一致性，在数据处理层中可以保持功能的一致性。

303，组合多个所述组件模块形成可视化设计模型。

本实施例的实施原理为：

在数据显示层的设计层面采用组件设计，并通过组件规范进行约束，使得构建出的可视化设计模型具有较好的重用性、灵活性和扩展性。

在图1所示实施例的步骤105中，由于数据显示层、数据处理层和数据模型层之间通过API接口进行数据交换，因此数据显示层通过API接口获取到数据模型层中的数据对象为Json格式，还需要进行解析才能转换为显示界面，具体通过图5所示实施例进行详细说明。

参照图5，获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面，包括如下具体步骤：

401，通过所述API接口获取Json格式的数据对象。

其中，通过API接口获取到的仅仅是一个Json格式的数据对象，还需要进行进一步解析才能获取数据信息。

402，构建Json解析模式。

其中，Json是一种数据格式也是一种数据交换语言，通过构建Json解析模式可以对Json格式的数据对象进行解析。

403，基于所述Json解析模式将所述Json格式的数据对象解析为显示界面。

其中，通过Json解析模式将Json格式的数据对象解析出数据信息，再将解析出的数据信息转换为展现给用户的显示界面。

本实施例的实施原理为：

由于通过API接口所获取的数据对象难以直接转换为显示界面，因此需要采用Json解析模式作为数据交换工具，将Json格式的数据对象解析出数据信息，再将数据信息进行转换，转换为显示界面。

在图1所示实施例的步骤106中，用户在数据显示层进行操作时将会产生用户动作，需要快速准确的响应用户动作并对用户动作进行运算解析，获取用户动作所传达的用户指令，具体通过图6所示实施例进行详细说明。

参照图6，基于事件触发机制判断所述数据显示层中的用户指令，包括如下具体步骤：

501，获取所述数据显示层中的用户动作。

其中，当用户于数据显示层中进行操作时，实时捕捉具体的用户动作。

502，基于所述用户动作触发所述事件触发机制，所述事件触发机制为原生的JavaScript事件。

其中，根据用户在数据显示层中的用户动作，数据显示层中的每个元素都可以触发JavaScript事件，基于用户动作可以预先对不同的JavaScript事件的属性进行定义，使得用户进行不同的用户动作时，可以触发用户动作所对应的JavaScript事件。

503，构建数据函数库。

其中，数据函数库为Math库，其包含运算公式和算法函数，可以辅助JavaScript事件进行算法运算。

504，通过调用所述数据函数库中的算法函数对所述JavaScript事件进行算法运算，得到运算结果。

505，基于所述运算结果判断用户指令。

本实施例的实施原理为：

当用户在数据显示层中进行操作产生用户动作后，将会触发数据处理层中原生的JavaScript事件，且不同的用户动作将会触发不同的JavaScript事件，以达到对用户动作快速精准的响应，若用户动作较为复杂，则JavaScript事件触发后将需要进行算法运算；通过Math库的构建，可以基于不同的JavaScript事件调用不同的算法函数进行运算，从而可以快速将用户动作进行解析运算得到用户指令最后通过运算结果可以判断出用户动作所包含的用户指令，再根据用户指令进行下一步动作。

在图1所示实施例的步骤107中，获取到用户指令后需要根据用户指令对显示界面进行实时更新，以完成对用户指令的反馈，具体通过图7所示实施例进行详细说明：

参照图7，基于所述用户指令更新所述显示界面，包括如下具体步骤：

701，所述数据处理层通过所述API接口获取所述用户指令，并基于所述用户指令更新所述数据对象，得到新数据对象。

其中，用户指令改变底层数据，从而更新数据处理层和数据模型层中的数据对象。

702，所述数据显示层获取所述新数据对象，并通过所述Json解析模式解析所述新数据对象，得到新显示界面。

其中，由于数据处理层和数据显示层之间的双向数据绑定，当数据处理层的数据对象更新为新数据对象时，通过API接口的交互和Json解析模式的解析，将新数据对象转换为新显示界面。

703，将所述显示界面更新为所述新显示界面。

本实施例的实施原理为：

数据处理层根据用户指令更新数据对象得到新数据对象，并将新数据对象同步至数据模型层中，同时数据显示层将新数据对象进行重新解析得到新显示界面，并将新显示界面更新替换原有的显示界面，即可完成对用户动作的反馈。

以上均为本申请的较佳实施例，并非依此限制本申请的保护范围，故：凡依本申请的结构、形状、原理所做的等效变化，均应涵盖于本申请的保护范围之内。

Claims (10)

1.一种基于MVVM架构实现可视化设计模型的方法，其特征在于，包括如下步骤：

基于Vue2.X构建底层框架，在所述底层框架中构建MVVM模式框架，所述MVVM模式框架包括数据显示层、数据处理层和数据模型层；

所述数据处理层从所述数据模型层获取数据对象；

基于组件设计于所述数据显示层构建可视化设计模型；

所述数据显示层获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面；

基于事件触发机制判断所述数据显示层中的用户指令；

基于所述用户指令更新所述显示界面。

2.根据权利要求1所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，还包括如下步骤：

通过API接口构建所述数据显示层、所述数据处理层和所述数据模型层之间的数据通道。

3.根据权利要求1所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述数据处理层从所述数据模型层获取数据对象包括如下步骤：

在所述数据处理层中创建值转换器；

所述数据处理层获取所述数据模型层中的数据模型；

所述数据处理层通过所述值转换器将所述数据模型转换为数据对象。

4.根据权利要求1所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述基于组件设计于所述数据显示层构建可视化设计模型包括如下步骤：

定义组件规范；

根据所述组件规范构建多个组件模块；

组合多个所述组件模块形成可视化设计模型。

5.根据权利要求4所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于：

所述组件模块包括可拖拽式组件模块、可排序式组件模块和响应式组件模块。

6.根据权利要求2所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述获取所述数据对象，并将所述数据对象于所述可视化设计模型中解析为显示界面包括如下步骤：

通过所述API接口获取Json格式的数据对象；

构建Json解析模式；

基于所述Json解析模式将所述Json格式的数据对象解析为显示界面。

7.根据权利要求2所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述基于事件触发机制判断所述数据显示层中的用户指令包括如下步骤：

获取所述数据显示层中的用户动作；

基于所述用户动作触发所述事件触发机制，所述事件触发机制为原生的JavaScript事件；

对所述JavaScript事件进行算法运算，得到运算结果；

基于所述运算结果判断用户指令。

8.根据权利要求7所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述对所述JavaScript事件进行算法运算包括如下步骤：

构建数据函数库；

通过调用所述数据函数库中的算法函数对所述JavaScript事件进行算法运算。

9.根据权利要求8所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于：

所述数据函数库为Math库。

10.根据权利要求6所述的一种基于MVVM架构实现可视化设计模型的方法，其特征在于，所述基于所述用户指令更新所述显示界面包括如下步骤：

所述数据处理层通过所述API接口获取所述用户指令，并基于所述用户指令更新所述数据对象，得到新数据对象；

所述数据显示层获取所述新数据对象，并通过所述Json解析模式解析所述新数据对象，得到新显示界面；

将所述显示界面更新为所述新显示界面。

Images