美文网首页web前端Web前端之路前端开发那些事
JavaScript中的MVC,MVP和MVVM模式剖析

JavaScript中的MVC,MVP和MVVM模式剖析

作者: 娜姐聊前端 | 来源:发表于2017-02-25 17:30 被阅读203次

    JavaScript的UI设计模式,主流上可以分为MVC,MVP和MVVM,本文主要剖析这三种模式的异同。

    首先要了解缩写字母都具体代表什么:

    • MVC : Model - View - Controller
    • MVP : Model - View - Presenter
    • MVVM: Model - View - View Model

    1. 共同点

    三种模式都含有Model层和View层,其职责基本相似。

    Model

    其包含了描述业务逻辑和数据的对象,同时,它定义了一些针对数据的业务规则(数据如何被改变,如何被操作等等)。

    View

    其描绘的是UI组件,比如CSS,HTML等等。它仅仅负责展示从控制器得到的数据,也就是Model到UI的变换过程。

    2. 不同点

    下面针对三个模式的控制器(或类控制器)的角度,来分析不同之处。
    (注:示例图片来自网络)

    1). MCV
    mvc.png

    Contorller
    它直接面对User,接受用户操作。然后把用户提供的数据转为具体的Model,Model再把最终的结果展示在View层。一旦UI上触发事件操作,Controller再次接受输入,如此循环......
    Controller是View和Model之间的协调者。

    在MVC模式中,除了Controller可以访问Model,View也允许直接访问Model(Model不依赖View,但是View依赖Model)。因此,View中可能含有一些业务逻辑,导致View的可重用性降低。

    2). MVP
    mvp.png

    Presenter
    它负责处理View上各类UI事件。如图所示,View直接面对User,通过View,Presenter接受输入原数据,然后交给Model处理,再把最终结果展示在View上。
    Presenter与View通过定义好的接口交互,是一种低耦合模式。

    MVP与MVC最大的不同,在于Model和View完全隔离开,两者必须通过Presenter进行通信。因此,主要业务处理都放在了Presenter层,View层变得比较薄弱。
    MVP模式下,表现层和数据层分开,方便单元测试。

    3).MVVP
    mvvm.png

    View Model
    它暴露了一系列的方法,命令,或者属性,用于帮助维护View状态,操纵Model数据并最终作用在View上。
    支持View和ViewModel的双向数据绑定。

    MVVM是MVP的演化版本,在概念上真正将页面和数据逻辑分开。
    它最大的特点就是双向绑定(data-binding):View改变,ViewModel自动更新;ViewModel更新,Model同步改变。反之亦然。
    一般,ViewModel中的属性都实现了一些监听器/观察器,用于View或者Model的同步刷新。
    大多数情况,MVVM模式需要依赖具体的平台或者技术实现,比如Vue.js。

    小结

    MVP和MVVM都实现了View和Model的完全隔离,这样方便前端采用“前后端分离”方式开发(UI层开发和Model层数据开发可同步进行,并支持Model层单元测试)。这方面,MVC做不到。
    MVVM可以说是MVP的增强版。


    微信公众号:

    相关文章

      网友评论

      本文标题:JavaScript中的MVC,MVP和MVVM模式剖析

      本文链接:https://www.haomeiwen.com/subject/gcqnwttx.html