第四十六课:MVC和MVVM的开发区别

版权声明: https://blog.csdn.net/weixin_41979981/article/details/80223097

实现MVC的目的就是为了让M和V相分离。前端的MVC无法做到View和Model的相分离,而MVVM可以。

我们先来看一个用MVC模式开发的经典例子:(一定要深入了解这种开发的思想,而不是看懂代码)$(function(){
//基本的Todo模型,
var Todo = Backbone.Model.extend({
// 设置模型的默认属性
defaults: {
content: “empty todo…”,
done: false
},
//确保每一个模型的content都不为空
initialize: function() {
if (!this.get(“content”)) {
this.set({“content”: this.defaults.content});
}
},
// 将模型的done属性值置为反,比如,之前的done如果为true,那么调用toggle方法后,就会被置为false
toggle: function() {
this.save({done: !this.get(“done”)});
},
//删除模型中的数据
clear: function() {
this.destroy();
}
});
//Todo的一个集合,数据通过localStorage存储在本地。
var TodoList = Backbone.Collection.extend({
// 设置Collection的模型为Todo
model: Todo,
//存储到本地,在todos-backbone的命名空间中
localStorage: new Store(“todos-backbone”),
done: function() {
return this.filter(function(todo){ return todo.get(‘done’); }); //如果模型的done属性为true,就返回此模型
},
nextOrder: function() { //得到当前集合中最后一个模型的order属性值,然后加1.
if (!this.length) return 1;
return this.last().get(‘order’) + 1;
},
//Backbone内置函数,根据todo对象的order属性值进行排列
comparator: function(todo) {
return todo.get(‘order’);
}
});
// 创建一个全局的Todos的collection对象
var Todos = new TodoList;

var TodoView = Backbone.View.extend({
//下面这个标签的作用是,把template模板中获取到的html代码放到这标签中。
tagName: “li”,
// 一个Todo模型显示在页面上的模板
template: _.template($(‘#item-template’).html()),

// 为每一个Todo模型在页面上的视图绑定事件
events: {
  "click .check"              : "toggleDone",   //点击每一个todo模型的视图时,就会改变此模型done属性值

    “dblclick label.todo-content” : “edit”, //双击此视图时,就可以编辑里面的内容
    “click span.todo-destroy” : “clear”,
“keypress .todo-input” : “updateOnEnter”, //在视图的内容中按下按键,就会执行undateOnEnter方法
“blur .todo-input” : “close” //可以通过按下enter按键保存,也可以通过鼠标失去焦点保存
},

//初始化设置了TodoView和Todo的一对一引用,这里我们可以把todoview看作是todo在页面上的映射。
initialize: function() {
  _.bindAll(this, 'render', 'close', 'remove');
  this.model.bind('change', this.render);   //model只要一改变,就会马上在视图上显示
},
// 渲染todo模型中的数据到 item-template 中,把生成的html添加到view的el元素中。
render: function() {
  $(this.el).html(this.template(this.model.toJSON()));return this;
},
// 改变模型的done属性值
toggleDone: function() {
  this.model.toggle();
},

    edit: function() {
      (this.el).addClass(“editing”);              this.input.focus();          },  // 关闭编辑界面,并把修改内容保存到后台,这里会保存在localStorage中      close: function() {        this.model.save({content: this.input.val()});(this.el).removeClass(“editing”);
},
// 按下回车之后,才关闭编辑界面
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},
// 移除对应条目,以及对应的数据对象
clear: function() {
this.model.clear();
}
}
var AppView = Backbone.View.extend({
//绑定页面上主要的DOM节点
el: (“#todoapp”),      // 在页面底部显示的统计数据模板      statsTemplate: _.template((‘#stats-template’).html()),
// 绑定dom节点上的事件
events: {
“keypress #new-todo”: “createOnEnter”, //按下enter键,就会新建一个todo模型,显示在页面中”click .todo-clear a”: “clearCompleted”, //删除模型的done为true的view
“click .mark-all-done”: “toggleAllComplete” //如果点击全部完成的元素,那么就把所有的model的done设置为此元素的状态,此元素选上,就设置为true,不选上,就设置为false
},
//在初始化过程中,绑定事件到Todos上,当任务列表改变时会触发对应的事件。最后把存在localStorage中的数据取出来。
initialize: function() {
//下面这个是underscore库中的方法,用来绑定方法到目前的这个对象中,是为了在以后运行环境中调用这些方法的时候是在这个this上下文执行。
_.bindAll(this, ‘addOne’, ‘addAll’, ‘render’, ‘toggleAllComplete’);

  this.input = this.$("#new-todo");
  this.allCheckbox = this.$(".mark-all-done")[0];

  Todos.bind('add',     this.addOne);   //给集合绑定事件
  Todos.bind('reset',   this.addAll);   //取到数据后,就会执行addAll方法
  Todos.bind('all',     this.render);    //执行完addAll方法后,就会执行render方法,因为,集合取到数据时,会触发reset方法和all方法,但是reset方法会先执行。all事件的意思就是,只要Todos有改变,就会触发此事件

  Todos.fetch();    //从服务器请求数据,由于此集合有localStorage属性,就说明,它是从本地的取数据
},
render: function() {
  var done = Todos.done().length;    //从本地取到的todo模型中,有多少个的done属性是true。

this.(‘#todo-stats’).html(this.statsTemplate({          total:      Todos.length,          done:       done        }));        //如果全部完成了,就把页面上的checkbox勾上,如果没有,就不用勾上        this.allCheckbox.checked = (done===Todos.length);      },      addOne: function(todo) {        var view = new TodoView({model: todo});    //针对每一个todo模型,我们新建一个todoView视图,这样就实现了一个模型todo对应一个视图tudoview。        this.(“#todo-list”).append(view.render().el); //并把每一个模型对应的视图添加到页面中
},
addAll: function() {
Todos.each(this.addOne); // 对集合中的每一个模型todo,调用addOne方法。
},
//生成一个新Todo的所有属性的字典
newAttributes: function() {
return {
content: this.input.val(),
order: Todos.nextOrder(),
done: false
};
},
createOnEnter: function(e) {
if (e.keyCode != 13) return;
Todos.create(this.newAttributes()); //在集合中创建一个todo模型之后会添加到集合中,这时会触发集合的add事件。在视图appview就会新建这个model的view显示在页面上
this.input.val(”);
},
// 去掉model的done属性值为true的view
clearCompleted: function() {
_.each(Todos.done(), function(todo){ todo.clear(); });
return false;
},//处理页面点击标记全部完成按钮
//处理逻辑:如果标记全部按钮已选,则所有都完成,如果未选,则所有的都未完成。
toggleAllComplete: function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) { todo.save({‘done’: done}); });
}

});
var App = new AppView; //新建一个视图
});

上面的这个例子中,总共定义了一个模型Todo,一个集合TodoList,一个视图TodoView,一个视图AppView,没有定义Router路由。

这里面AppView是一个父元素,它的每一个子元素就是一个TodeView。

TodoList集合中的每一个模型就是Todo。

AppView操作TodoList集合。TodeView操作Todo。

在TodeView中会给Todo模型绑定change事件,也就是说,只要Todo模型改变了,相对应的视图就会执行render,把改变的model呈现出来。

在AppView中会给TodoList集合绑定all事件,只要集合TodoList有变化,就会调用AppView视图中的render方法,把改变的TodoList呈现出来。

从Backbone的例子中可以看出,MVC中的V不仅仅只是显示数据,还包括绑定事件,调用模型的方法等等。

接下来,我们来看看使用MVVM实现的一个例子:Angular实现的

//添加ng-app指令到标签中,这个指令会告诉Angular处理整个HTML页面,也就是说ng-app指令标记了AngularJS脚本的作用域,开发者也可以在局部使用ng-app指令,如

,则AngularJS脚本仅在该
中运行。


//引入angular库


//ng-controller,一个指令,用于指定当前的模版对应的Controller为TestFormModule。ng-submit,一个指令,form表提交时需要做的事情,这里是调用save方法。
//ng-model,一个指令,用于指定input的值对应modeluser的userName变量。也就是说把此元素input绑定到一个叫user.userName的模型变量中
//把此元素input绑定到一个叫user.password的模型变量中



阅读更多
换一批

没有更多推荐了,返回首页