mvc与mvvm设计模式

MVC与MVVM设计模式

一、MVC(Model- View-Controller)

• Model(模型)：负责保存应用数据、和后端交互同步应用数据，Model主要与业务数据有关、与应用内交互状态无关
• View(视图)：（html、css）负责构建和维护DOM元素，用户可以与View交互，读取、编辑Model
• Controller(控制器)：（js以及js控制/框架：react.js、angular……）是应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并向模型发送数据

view层是顶层，controller在view层之下，model在controller之下；
view指向controller。
control指向model，model 更改时 view 会得到提醒（这个情况是一个单向流）

二、MVP

controller 替换为 presenter。
presenter 与 view 平起平坐。
presenter 监听 view 和 model 的事件，作为中间人在他们之间调解两边的事件，辅助两边交流。

三、MVVM

mvvm是一种架构模式，用来简化用户界面的事件驱动程序设计。

(1). vue中的MVVM：

• View是dom
• Model是抽离出来的obj
• ViewModel是创建的vue对象实例

ViewModel通过数据绑定让Model中的数据实时的在dom中显示，再通过dom listener来监听dom事件，通过改变methods中的操作，从而改变obj中的数据.

1.View层：

• 视图层
• 在前端开发中，通常就是DOM层
• 主要作用是给用户展示各种信息

2.Model层：

• 数据层
• 数据可是固定的死数据，更多的来自于服务器，从网络上请求下来的数据
• 负责保存应用数据、和后端交互同步应用数据

3.ViewModel层：

• 视图模型层
• 是view和model沟通的桥梁，ViewModel与View双向绑定，用户在View修改数据或发出ajax等指令时，ViewModel会及时响应，实现了DOM Listener(DOM监听)，当dom发生一些事件时，可以监听到并在需要的情况下改变对应的数据接着向下推送数据给Model，Model和View没有直接关系
• 适合复杂的UI交互项目

Model：这一层或者有歧义。为了更好理解 Model 需要引入 Vuex，在有 Vuex 的情况下，Vuex 提供的数据就是 Model，这符合后端架构中 Model 包含业务逻辑的情况。但是在无 Vuex 的情况下，Model 应该就是 Vue 实例的 data 属性，也就是 JavaScript 数据对象本身。