QML MVC：应用程序架构最佳实践和设计模式

QML不仅用于视图部分实现。也处理与数据相关的任务和应用程序逻辑。因此，为此类QML驱动的应用程序考虑一个干净的应用程序体系结构和组件结构就变得非常重要。我们希望保持代码的清洁，可维护和可扩展。

为什么要关心分离关注点？

QML的简便性和灵活性可能导致问题。使用信号和属性绑定时，简单的值更改可能会影响许多组件。依赖于其他属性的属性会自动更新。他们处理信号并更新其值。甚至可以在多个QML Item中实现：  

 

 现在看起来并不复杂。但是想象一下，我们添加了一些具有不同属性和交叉依赖性的新组件：

所有项目之间的连接方式不同。您不再可以确定地说单个属性更改可能对直接或间接连接的组件产生什么影响。在最坏的情况下，这可能导致循环依赖性或循环。如果遇到此类问题，则表明组件体系结构不良。

随着项目的增长，这个问题变得越来越大。因此，每个组件应具有干净的界面，并且仅管理自己的数据。这就是关注点分离的含义。

MVC，MVVM或Flux（React Native）等设计模式

不良的组件体系结构可能会迅速导致不良的副作用或数据损坏。想象一下，许多信号触发和事件处理程序以未知顺序运行。您在应用程序不同部分的代码似乎会随机更改数据或使用重复的代码更改数据。这是调试，维护或重构的噩梦。

对于大多数设计模式，黄金法则是：将显示数据（视图）的代码与读取或修改数据（模型）的代码分开。

QML中的模型视图分离

Felgo应用程序的每个内容视图通常都由一个页面组成。Page类型是一种视图控制器，它为用户提供并显示数据。通过引入DataModel组件，我们可以将数据处理从视图中移开： 

 

DataModel是应用程序数据的中央存储。页面只能使用DataModel访问应用程序数据。它以对您的用例和视图有意义的方式来管理数据。对于不同的视图和用例，可以使用多个DataModel组件。

对于应用程序逻辑，您还将在视图或模型中添加许多功能和信号处理程序。如果处理不当，则会导致许多分散的代码分散在视图项中。一旦您的应用程序变得更加复杂，维护代码干净和可测试的难度也就增加了。很难决定在哪里执行哪个操作，并且不可避免地会在页面之间散布重复的代码。

使用上述架构，模型和页面之间的数据流是双向的。这意味着页面不仅显示模型数据，还可以直接写入模型。像React Native这样的现代应用程序框架使用了不同的方法。例如，Facebook设计的Flux架构支持单向数据流。

创建干净的数据流：受Flux启发的QML架构

使用Flux，每个用户交互都会通过中央调度程序传播操作。调度程序将操作转发到保存应用程序数据和业务逻辑的各种存储：

您可以在Ben Lau的文章中了解有关QML这种模式的相当复杂的实现的更多信息：带有Flux的修订版QML应用程序体系结构指南 

很难说复杂解决方案的开销是否值得付出努力。对于大多数移动应用程序项目，具有相同优势的更轻松的实现就足够了。

QML中用于模型视图控制器分离的简单类流量示例

为了创建单向数据流，我们还可以利用QML的内置信号机制。我们可以确保不同组件之间的松散耦合。您可以在本指南中找到适用于此模式的基本示例架构：使用QML在Qt App中分离模型，视图和逻辑代码 

它引入了一个Logic组件来将动作从Pages调度到DataModel：

在QML中进行大量工作会很快导致不可读和零散的代码。有了干净的组件体系结构和明确的职责，您可以避免这种情况。使用上述架构有助于提供一致的应用程序结构，从而简化测试和重构。