美文网首页
前端表现与数据分离之模式

前端表现与数据分离之模式

作者: hello_water | 来源:发表于2017-03-14 15:21 被阅读1227次

    MVC模式:

    MVC

    分为三层:

    视图(View):用户界面。

    控制器(Controller):业务逻辑

    模型(Model):数据保存

    通信逻辑是:

    1.View发送指令(DOM事件)

    2.Controller处理业务,触发数据更新

    3.Model将新数据更新到View

    这属于单向通信,缺陷是当有变化的时候需要维护三个对象和三个交互。

    用户可以向 View发送指令(DOM 事件),再由 View直接要求 Model 改变状态。

    用户也可以直接向 Controller发送指令(改变 URL 触发 hashChange 事件,不是先触动DOM事件),再由 Controller发送给 View

    MVP模式:

    将 Controller 改名为 Presenter,同时改变了通信方向。

    MVP

    1.各部分通信都是双向的。

    2.隔绝了View和Model之间的通信,都是通过Presenter传递。减少在需求变化中维护对象的数量。

    3.View非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

    MVP定义了Presenter和View之间的接口,让一些可以根据已有的接口协议去各自分别独立开发,以此去解决界面需求变化频繁的问题。通常View与Presenter是一对一的,但复杂的View可能绑定多个Presenter来处理逻辑。

    MVP中的V和P,V是被动的,而P则控制着对V请求的处理,view仅将用户的(事件)请求提交到P,它并不参与对用户请求的处理,如果在这个过程中P要V参与(如:显示实时的数据等)也是P将要展现的数据PUSH到V,对于处理的结果的呈现也是同样的处理方式。所以V和P之间是通过DOM事件入口进行交互。

    MVVM模式:

    将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。

    MVVM

    但是MVVM中的View和ViewModel之间没有接口,是使用数据绑定的形式进行双向交互。数据绑定可以认为是Observer模式或者Pbulic/Subscribe模式。

    MVVM模式不仅简化了业务与界面的依赖,还优化了数据频繁更新的解决方案,是一种更有效的解决模式。(低耦合、方便独立开发,可重用、易测试)

    参考资料:

    MVC MVP和MVVM的图示

    MVC,MVP,MVVM浅析

    相关文章

      网友评论

          本文标题:前端表现与数据分离之模式

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