MVC:
M:Model,数据模型层 数据保存;
V:View,视图层 用户界面;
C:Controller,控制器 业务逻辑;
控制器的作用是控制M层的数据再V层进行显示
三个模块的通信方式是单向通信:view传送指令到Controller, Controller完成业务逻辑后,要求model改变状态,model将新的数据传送到View,用户得到反馈。
MVC需要手动操作使view拿到model里的数据; 比如$(div).html(“内容”)。(model层改变数据的时候,我们需要手动的更改dom)
MVP
MVVM
优点:无需手动进行操作,一旦model的数据改变, view即可自动拿到model的更新数据
MVVM有mvc和mvp演变不及时的问题
它解决了mvc反馈不及时的问题,或者实现了自动同步的功能
viewmodel将view和model进行了双向绑定
vue的双向绑定原理:
(1)vue在创建vm 的时候,会将数据配置在实例中,然后通过Object.definePorperty方法对数据进行操作,为数据动态的添加了getter 与setter方法,当我, 获取数据的时候,将会触发getter方法;当我们设置数据的时候,将会触发setter方法,从而进一步触发vm的watcher方法,数据改变完成,vm则会触发视图的更新操作
(2)vue中通过数据劫持&发布订阅模式:通过Object.defineProperty对所有的数据进行了数据劫持, 当数据发生变化的时候,触发了自身的setter方法,然后发布消息给订阅者,触发其响应的监听回调。
MVC
在项目中,我们的控制器一般定义成一个类,让类去进行管理。
function Controller(){ //定义类的时候首字母要大写
this.init( ) //初始化方法
}
Controller.prototype={
init(){ //init本身不是一个函数,需要将其绑定在构造函数的原型对象上,创建一个init方法
}
}
原函数为function时,this.render()中的this只能指向该函数内部,改成箭头函数后,this.就可以指向addEvent(),因为箭头函数内部无this指向