MVC和MVVM

MVC

Input 被引导到 Controller.

Controller 决定渲染哪个 View, 并且生成 View 对应的 Model.

一个 Controller 可以从很多个 View 当中选择一个渲染.

View 没有他的 Controller 的信息.

业务逻辑存在于 Controller 当中.

当多个用户请求之间(基于 HTTP, 无状态的协议), 状态不能被维护的情况下, MVC 是有用的.

代码举例：

//创建一个Data类，来表示一个实体类型
var Data = Backbone.Model.extend({
    //定义每个Data类实例的默认值
    defaults: function () {
        return {
            name: ''
        }
    },
    //解析异步请求返回的结果，fetch方法与save方法都会调用它
    parse: function (res) {
        return res.data;
    }
});

//创建一个AppView类，来完成这个页面的所有UI功能
var AppView = Backbone.View.extend({
    //指定这个AppView的实例关联的DOM元素
    el: 'body',
    //指定这个AppView实例在做DOM更新时要采用的html模板
    template: _.template(document.body.innerHTML),
    //定义这个AppView内部要注册的一些事件，类似jquery的委托方式注册
    events: {
        'click #btn_save': 'save'
    },
    initialize: function () {
        //监听关联的model实例的change事件，只要model实例的属性发生变化，都会调用自身的render方法
        this.listenTo(this.model,'change', this.render);

        this.$input = $('#new_input');
    },
    render: function () {
        //根据model实例的内容重新渲染html
        this.$el.html(this.template(this.model.attributes));
        return this;
    },
    save: function(){
        var name = $.trim($input.val());
        if (!name) return;

        //直接调用model的save方法来与服务器进行同步
        this.model.save({name: name});
    }
});

//创建一个Data实例
var model = new Data();

//创建一个AppView的实例，并把它关联的model属性指定为上一步创建的Data实例
new AppView({
    model: model
});

//表示页面要编辑的数据的唯一标识，新增时为空，编辑时才有值
var id = (function () {
    //获取页面id，详细实现略
})();

if (id) {
    //编辑模式下设置id
    model.set('id', id);
    //通过fetch自动发送请求与后台同步
    model.fetch();
}

MVVM

Input 被引导到 View.

View 只知道 ViewModel, 不知道其他的信息.

ViewModel 只知道 Model, 不知道其他的信息.

View 从 ViewModel 获取数据, 而不是直接从 Model. 这通常通过数据绑定实现.

State 跟业务逻辑存在于 ViewModel.

ViewModel 可以被认为是 UI 的抽象表示.

State 可以在多个用户请求能被维护的情况下会很有用(比如 Silverlight, WPF 等).

一个ViewModel接口提供了两个东西：动作和数据。动作改变Model的下层（click listener，监听文字改变的listener等等），而数据则是Model的内容。

MVC

MVVM

猜你喜欢