微信小程序入门(二) MVVM架构 命令式编程和声明式编程

什么是MVVM?

MVVM是Model-View-ViewModel的缩写。MVVM是一种架构模式,并非一种框架,是一种思想,一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。
MVVM源于MVC(Model-View-Controller)模式,期间还演化出MVP(Model-View-Presenter)模式。MVVM的出现促进了GUI前端开发和后端开发逻辑的分离,提高了前端开发效率。
MVVM的核心数据驱动即ViewModel,ViewModel是View和Model的关系映射。在MVVM中View和Model是不可以直接进行通信的,它们之间存在这ViewModel这个中介。ViewModel类似中转站(Value Converter),负责转换Model中的数据对象,使得数据变得更加易于管理和使用。MVVM本质就是基于操作数据来操作视图进而操作DOM,借助于MVVM无需直接操作DOM,开发者只需完成包含声明绑定的视图模板,编写ViewModel中有业务,使得View完全实现自动化。当用户操作View,ViewModel感知到变化,然后通知Model发生相应改变,反之亦然。ViewModel向上与视图层View进行双向数据绑定,向下与Model通过接口请求进行数据交互,起到承上启下的作用。

Vue的MVVM和小程序MVVM对比

在这里插入图片描述

  • Model :一般存放数据
  • View:通过mustache语法绑定数据
  • Viewmodel:作为view和model 两个层次之间通信的桥梁

1.将model的数据通过data binding绑定到view上
2.View上产生的各种事件监听model修改数据。Dom listeners
在这里插入图片描述

小程序框架MINA框架与Vue框架类似。
MVVM架构将我们从命令式编程转移到声明式编程

//编程范式
//命令式编程:原生操作DOM
//声明式编程:Vue/React/Angular

命令式编程

在这里插入图片描述

声明式编程

在这里插入图片描述

参考文件:https://www.jianshu.com/p/423a214757ba

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章