MVVM架构初解读

发布于 2015-10-08 20:41 类别: tech

MVVM，全称 Model- View- ViewModel （对于这种缩写，从它的全称开始分部分了解可能更容易帮助理解）。这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出，它是MVC模式的衍生物（不要问MVC是什么，翻大学课本去），MVVM模式的关注点在能够支持事件驱动的UI开发平台。是前端的重要架构。 MVVM目前比较成熟的框架有KnockoutJS,Kendo MVVM和Knockback.js，后续会有一些KnockoutJS的介绍。 View层： View是指应用中和用户直接交互的部分，也就是页面元素的展示，在web开发中通常使用html+css+javascript实现。

Alt text

Model层：业务信息本身，与任何前段操作无关；不格式化数据或者影响数据在浏览器中的展现，往往是通过ajax从服务器端获取的数据。以view的展示图为例，本例的model为：

    {
        userName:”wj”,
        password:”1234”，
        sex:”0”  //0男1女
        birthday: 1997-7-17
    }

model往往是服务器端直接读取的数据对象，该数据对象不经过加工，在非MVVM的框架中开发人员需要使用javascript并调用dom的方法将model的数据显示在view中。

View Model层：纯粹用于描述数据内容，页面操作的数据模型。 以性别为例，完成model到view数据的格式化。

{
    sexDescription : function(sex){
         return gender == 1 ? "男" : "女";
            }
}

数据格式化

以KnockoutJS数据绑定实现MVVC开发模式的分层

KnockoutJS是一个轻量级的MVVM JavaScript实现框架，接下来就调用他的接口完成model-view层的数据绑定。 view层：

<body onload="init()">
        <input type="text" data-bind="value:userName()"/><br/>
        <input type="text" data-bind="value:password()"/><br/>
        <input type="text" data-bind="value:getSex(sex())"/><br/>
        <input type="text" data-bind="value:getBirthday(birthday())"/>
  </body>

model层：

function User(userInfor){
        //建立一个私有变量，使用ko来监控属性
        //ko.observable()函数返回的是一个函数，意义是通知ko来监视model层的某个属性
        this.userName = ko.observable(userInfor.userName);
        this.password = ko.observable(userInfor.password);
        this.sex = ko.observable(userInfor.sex);
        this.birthday = ko.observable(userInfor.birthday);
        this.getSex = function(s){
            if(s == "0"){
                return "男";
            }
            return "女";
        };
        this.getBirthday = function(b){
            return b.split("-")[0]+"年"+b.split("-")[1]+"月"+b.split("-")[2]+"日";
        };
    }

控制层:

function init(){
    debugger;
    var user = getUser();
    var u= new User(user);
    //通知ko绑定viewmodel层
    ko.applyBindings(u);
}
function getUser(){
    var user = {
    "userName" : "wj",
    "password" :"123",
    "sex":"1",
    "birthday":"1994-07-17"
    };
    return user;
}

数据格式化场景

Model层的数据是没有经过加工的业务信息，但业务数据需要经过信息加工才能显示，例如如下场景，加工的过程其实就是在编写格式化数据。

Alt text Alt text

  • 性别字段需要从0/1格式加工为男/女
  • 生日需要从yyyy-mm-dd格式加工为yyyy年mm月dd日，这种加工叫做数据的格式化。

数据格式化方式

定义格式化函数 视图模型对象中可以直接定义格式化函数，并可带参数。 格式化函数返回格式化输出的字符串。 语法：

<span data-bind="text:getBirthday(birthday)"></span><br/>

HTML元素显示格式化输出 元素绑定到视图模型的格式化函数，而不是它们的属性。 可以将属性作为参数传递到格式化函数中。

在大型软件、复杂的后台管理程序中，一个页面对应的程序很多，可以按照如下层次分层。 调度层：接受服务器返回参数，调度MV层完成业务逻辑展示 MV层：视图模型层，重构Model层数据、绑定view层关系、设定触发函数。 * View层：展示的html文件。

Html 前端，MVVM