MVC框架
MVC框架即Model View Controller,是模型Model-视图View-控制器Controller的缩写。
Model:模型,是应用程序中用于处理数据逻辑的部分,通常模型对象负责在数据库中存取数据。
View:视图,用户界面显示,通常视图是根据模型数据创建的。
controller:控制器,数据模型和视图之间通信的桥梁。控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
MVC思想:Controller负责将Model的数据用View显示出来。
MVC优点:
耦合度低(运用MVC的应用程序的三个部件是相互独立的,改变其中一个不会影响其他两个);
重用性高(多个视图可以使用同一个模型)
生命周期成本低
部署快(业务分工明确)
可维护性高
缺点:
不适合小型项目开发
视图与控制器联系过于紧密,妨碍了它们的独立重用
<!-- MVC框架 -->
<!-- View -->
<div>
<span id="count">0</span>
<button id="btn">+</button>
</div>
//controller
const btn=document.getElementById('btn');
btn.addEventListener('click', () => {
const counter = document.getElementById('count') //获取页面节点
// 调用模型
add(counter);
});
//model
function add(node){
console.log(node.innerText)
let count=parseInt(node.innerText)
//对数据的处理逻辑
curr=count+1
node.innerText=curr
}
MVVM架构
MVVM由Model,View,ViewModel三部分构成。
M(Model):数据模型(Vue的data)
V(View):视图,即UI,用来展示数据(Vue的el)
ViewModel:是一个对象,用来同步视图View和模型Model
双向绑定:View和Model之间没有直接联系,通过ViewModel进行交互(即双向数据绑定),View的变化可以引起Model的变化,Model的变化也可以引起View变化(类似于浅拷贝)。
通过双向数据绑定,View 和 Model 之间的同步工作完全是自动的,因此开发过程中不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
可以实现双向绑定的标签:Input,textarea,select标签等(可以输入或改变标签内容的标签)
MVVM优点:
低耦合
可重用性
双向数据绑定,它实现了View和Model的自动同步
Vue就是使用的MVVM框架。
MVVM与MVC的区别
MVVM和MVC都是一种设计思想。MVVM与MVC最大的区别就是:它实现了View和Model的自动同步(当Model属性改变时,不用手动操作Dom元素去改变View的显示。而是改变属性后,该属性对应View的显示会自动改变)。