大数跨境

MVVM架构在Kanzi项目开发中的应用

MVVM架构在Kanzi项目开发中的应用 怿星科技
2020-01-03
3
导读:为了应对客户日益复杂的需求变化,在软件项目的开发过程中,需要采用某种架构思想,来降低代码间的耦合程度。

为了应对客户日益复杂的需求变化,在软件项目的开发过程中,需要采用某种架构思想,来降低代码间的耦合程度。这样,即使界面或交互设计发生了变化,也不需要重新编写业务逻辑端的代码。


比较典型的一种架构思想就是我们熟知的MVC架构,它将业务逻辑、数据、界面三者相互分离,达到代码解耦与复用的目的。那么,什么又是MVVM架构呢?



什么是MVVM


MVVM是Model-View-ViewModel的简写,是一种软件架构模式,它本质上就是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化,让我们将视图UI (Kanzi)和业务逻辑分开。当然这些事ViewModel已经帮我们做了,它可以取出Model的数据同时帮忙处理 View中由于需要展示内容而涉及的业务逻辑。



View是用户在屏幕上看到的结构、布局和外观(UI)。

ViewModel把View层需要的数据暴露出来,并对View层的数据绑定、事件绑定负责,也就是处理View层的具体业务逻辑。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在ViewModel中,绑定器在视图和数据绑定器之间进行通信。

Model是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。



Kanzi中的MVVM



上图是Kanzi开发工具(View),我们可以根据需求,在KanziStudio中进行相关界面的开发,然后通过事先定义好的Data Source接口,将View中的数据与Application Logic互相绑定。

我们以音乐播放功能为例,从界面、数据源接口以及代码逻辑三个部分来呈现Kanzi中的MVVM思想。


  • KanziStudio部分




如图所示,我们实现了一个音乐播放功能的界面部分,结构比较简单,主要分为按键和歌曲详情两个部分。按键部分(View的输入),通过点击上一首/下一首/播放按钮,向代码(ViewModel)发送相关消息,代码对消息进行处理,将处理后的相关信息(歌曲详情)反馈给界面。在这里就有一个问题,业务逻辑部分要以怎样的形式去对UI界面进行修改呢?难道是直接在Kanzi中找节点设置属性吗?直接设置属性的话,找节点会不会很麻烦?UI界面和业务逻辑是不是又耦合在一起了?幸运的是,Kanzi为我们提供了DataSource来解决上述问题。


  • DataSource部分


这部分是MVVM架构中的Model部分,在我们的例子中DataSourse扮演一个什么角色呢?没错,那就是为代码提供一个相对简单清晰的、能对UI界面进行修改的数据源接口,而这部分工作是在KanziStudio中进行的,主要是通过绑定来实现与DataSourse的连接。





  • 代码逻辑部分


介绍完DataSource后,接下来就是代码逻辑部分。还记得我们之前在KanziStudio部分中谈到的问题吗?现在我们有了DataSource,问题自然就迎刃而解了。有了明确的DataSource接口,代码调用起来会很简单。



我们直接通过DataSource给出的setter接口来为UI界面设置修改相关信息,不需要去Kanzi工程中找节点,是不是非常方便呢?值得一提的是,通过这种方式,我们的业务逻辑已经与UI界面完全解耦合了,甚至是可以用于其他软件,UI仅仅是负责显示功能。


代码运行结果如下:



MVVM架构优点


看到这里你是不是对MVVM的理解更加深刻了呢?同时也了解了Kanzi中DataSource的作用。在文章的最后,对MVVM架构进行总结一下。


①低耦合
视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

立开发
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

③可重用性
可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

④可测试
界面素来是比较难于测试的,测试可以针对ViewModel来写。

此优秀的软件架构,大家是不是已经迫不及待、跃跃欲试了呢?赶快打开Kanzi软件,亲自尝试一下吧!



相关精彩推荐
Kanzi Studio的混融原理与透明效果
Kanzi实现模糊效果原理及方式
干货 | 如何使用Kanzi Studio插件高效实现Localization多国语言本地化
干货贴:解锁Kanzi 3D渲染
Kanzi三维高模实时渲染
使用Kanzi和Kanzi-Lite 技术开发的HMI设计效果
八一八Kanzi与Android这对好基友
Kanzi Connect 多屏互联
Kanzi之文字一二事




【声明】内容源于网络
0
0
怿星科技
让智能汽车研发更高效!
内容 428
粉丝 0
怿星科技 让智能汽车研发更高效!
总阅读993
粉丝0
内容428