浅谈MVVM模式和MVP模式——Vue.js向

释放双眼,带上耳机,听听看~!

浅谈MVVM模式和MVP模式——Vue.js向

传统前端开发的MVP模式

MVP开发模式的理解过程

  1. 首先代码分为三层:
    model层(数据层),
    presenter层(控制层/业务逻辑相关)
    view(视图层)

  2. MVP模式代码示例

    M层在上图代码中不太明显,分析P层和V层是如何通信:

    1. 当视图发生改变,点击提交按钮后,控制器中的代码会执行。
    2. 控制器负责所有的逻辑,控制器可以去调模型层,比如发起ajax请求,只是此处代码并没有数据。
    3. 控制器处理完业务逻辑之后,控制器会通过DOM操作再去改变视图。
    4. 结合MVP模式图示,容易理解。
  3. Presenter是最核心的层,它是视图层和模型层的中转站,但大量代码在操作DOM。

  4. MVP的缺陷:
    1. 大量的代码都在presenter层,model层相比下很边缘。
    2. presenter层中大量的代码都是在操作DOM。

当前流行的MVVP模式

图源自维基百科。MVVM的优点是有助于前端界面开发和后端逻辑的开发分离。其中VM视图模型是中介者,它负责从模型中转换数据对象,再呈现对象。从Vue.js的角度去看MVVM模式:

Vue框架设计同样有view层和model层,只是没有Presenter层,多了一层ViewModel。使用MVVM设计模式开发,我们不需要关注VM层,这是Vue.js内置的,只需要关注视图层和模型层。

  • Vue.js代码示例

vue代码中,没有任何DOM操作,代码中都是在写数据和写HTML也就是model层和view层。vue就是VM层。当视图层或者数据层发生改变时,VM层都会自动映射到对方。因此使用MVVM框架,最核心的层是数据层。

MVP和MVVM的直接比较

MVP面向DOM开发,MVVM面向数据开发。
MVVM让代码量更少

人已赞赏
站长资讯

Android 内存泄漏

2020-11-9 3:39:57

站长资讯

WebApi管理和性能测试工具WebApiBenchmarks

2020-11-9 3:39:59

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索