MVC

MVC 是Model-View-Controller的缩写

主要目的是对代码解耦. 把混合在一起的代码拆分成 3 部分;

让html中不存在任何逻辑代码, 没有JavaScript代码痕迹.

以原生 HTML 为例：

• Model: 数据模型层

早期前端: 弱化的Model. 不关注 Model 层, 数据都是从 服务器 请求下来, 直接使用即可. 2.现在前端: 使用 WebStorage, 框架中的Vuex, Redux等管理数据 在TypeScript语言中, 新增了数据类型声明特征, 才让 Model 在前端变得尤为重要.

• View: 视图层

书写普通的html. 不掺杂任何 JS 代码. 例如:<button id="tedu">Tedu</button> 注意: 此按钮 没有 onclick 的事件写法.

• Controller: 控制器层

控制 HTML 的具体行为, 具体为script代码范围, 例如 为id="tedu"的按钮添加事件的写法:

1.var btn = document.getElementById("tedu");
2.btn.onclick = function(){alert(123456)}

MVVM

MVVM 是Model-View-ViewModel的简写。它本质上就是 MVC 的改进版。它本质上就是 MVC 的改进版。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。 以 `

以Vue 为例：

• Model: 数据模型层

script 部分的 data 属性, 专门管理数据

• View: 视图层

即template 中的代码, 负责 UI 的构建

• ViewModel: 视图模型层

new Vue({}) 部分. 自动管理数据和视图. 重点是双向数据绑定功能, 实现了 数据变化视图自动变更. 视图变化,数据自动联动.