前端知识点(四):MVC模型、MVP模型、MVVM模型

1.MVC模型

(1)概念

mvc是模型-视图-控制器,model用于管理数据,view用于渲染视图展现界面,controller用于处理交互

前端知识点(四):MVC模型、MVP模型、MVVM模型_第1张图片

视图可以直接访问模型,所以视图里面会包含模型信息,mvc关注的是模型不变,所以在mvc中,模型不依赖视图,但是视图依赖模型

(2)通信(原理)

模型层改变时,视图层直接随之改变,视图层传送数据到控制层,控制层接收数据、编写业务逻辑更新模型层,从而再次更新视图。如此反复。

(3)特点

优点:抽离出controller,模块化程度高,新增编辑功能,只需要添加一个controller

缺点:测试困难,view无法组件化

2.MVP模型

(1)概念

mvp是模型-视图-提供者,建立在在MVC基础上

前端知识点(四):MVC模型、MVP模型、MVVM模型_第2张图片

(2)特点

优点:视图与模型完全分离。一个presenter(提供者)可以用于多个视图,可以做单元测试

缺点:提供者和视图的耦合度太高,一旦视图发生大改变,提供者随之改变

(3)通信(原理)

建立在MVC模型基础上,用presenter(提供者)取代controller(控制器),通信方向发生改变,视图和模型不在直接通信,视图与提供者双向通信,模型和提供者双向通信。

3.MVVM模型

mvvm是模型-视图-视图模型 ,建立在MVP模型上,将提供者Presenter改成了ViewModel视图模型。

前端知识点(四):MVC模型、MVP模型、MVVM模型_第3张图片

(2)特点

优点:简化测试,提高可维护性

缺点:不适合简单的图形界面,太复杂的视图模型维护成本高,数据没办法断点调试。

 (3)通信(原理)

vm是模型和视图的桥梁,当模块层数据改变时,vm会检测到变化并通知视图层做相应修改。

你可能感兴趣的:(前端知识点,前端,javascript,ui)