让前端飞前端开发那些事程序员

聊一聊基本的MVVM设计思想

2018-05-22  本文已影响103人  Srtian

一、为什么我们需要MVVM

在写界面时,我们经常会碰到一些功能,需要数据生成页面,然后页面通过输入控件收集的数据的改变,经过改变后再次更新页面。就比如一个数组和一个页面上的列表,我们通常会需要这个数组与列表相对应,当数组改变时,页面中的列表可以发生改变。而当列表发生改变时,数组可以通过输入控件,将数据进行改变然后再渲染页面上的列表。

整个这个过程,说起来很绕口,其实归纳来看,就在做两件事:

既然已经将它们的操作过程归纳起来了,那么如果我们引入一种绑定关系,通过一系列的配置过程后,使得以后的每次数据发生变更时,页面也会发生相应的更新;而页面上的操作也会自动更新到数据。这会让我们开发变得更为方便,有老婆孩子的可以省下时间去陪老裴孩子,没老婆孩子的可以省下时间去打游戏(没错,我就是后者,泪奔~)。而MVVM就是提供了这么一套配置,为我们建立了数据和界面的关联关系。

二、 MVVM的构成

MVVM的全名是Model-View-ViewModel,它的基本思路就是这样:

imageimage

它分为三部分:

2.1 Model

model很好理解,就是指数据层,是纯净的数据。对于前端来说,model往往是一个简单的对象。比如这样:

{
    name: "srtian",
    age: 22,
    like: {
        sports: ["football", "run"],
        music: "You're Beautiful"
    }
}

简单来说,数据层就是我们要渲染后呈现给用户的数据,数据层本身是可变的,且不用承担逻辑操作和计算的功能。

2.2 View

View也很简单,就是指视图层,也就是直接呈现给用户的那部分,对前端就是HTML。比如上面的数据层,它所对应的视图层可能是这样的:

<div>
  <p>
    <b>name: </b>
    <span>srtian</span>
  </p>
  <p>
    <b>age: </b>
    <span>22</span>
  </p>
  <ul>
    <li>football</li>
    <li>run/li>
  </ul>
  <ul>
    <li>You're Beautiful</li>
  </ul>
</div>

当然视图层并不是固定的,而是可变的,我们可以随意的添加元素。而这在MVVM中并不会改变数据层,而是改变了视图层呈现数据的方式。同时需要注意的是,视图层应该和数据层完成分离。

2.3 ViewModel

既然视图层应该和数据层相分离,那么我们就需要设计一种结构,让他们建立起某种联系,Vue官网上的这张图就很好的解释了ViewModel的作用:

imageimage

抛开ViewModel本身带有的一些属性外,ViewModel本身其实主要是做了两件事:

三、小结

综上所述,我们知道了MVVM所包含的Model,View,ViewModel三层,在实践的时候,主要包含几个要点:

参考资料:
https://zhuanlan.zhihu.com/p/24475845

上一篇下一篇

猜你喜欢

热点阅读