【瑞模网】简单介绍前端MVC/MVVM模式特点及区别

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的显示会自动改变）。