对于angular 中MVC 和 MVVM 的一些个人理解

首先我们先从字面上理解一下 MVC  :

M----> model 模型层(一般用于数据存储,存储一些业务逻辑),也就是我们说的数据模型。

V-----> view 视图层(界面),用来展示数据。

C-----> controller 控制层(管理),调度业务逻辑,联系数据和模板之间工作的逻辑代码。


MVC 是一种设计思想:

要了解这种思想,我们先来了解一下web 开发经历的几个阶段:

web 开发经服务器只读文件发送的时代, 然后经历了在服务器端拼接字符串生成html发送的时代,接着经历了分布式任务交给浏览器执行的时代,需求会不断的变化, 自然引入了模板, 也就有了分离的思想.
所以我们很自觉的将数据分离出来, 模板就是试图, 中间的逻辑代码就是控制器.

接下来我们可以这样理解MVC:

所谓的MVC就是 我们把网页代码按照视图 ,数据模型 和 控制器的方式进行分离;视图控制网页格式,数据模型控制数据,控制器就是联系数据和模板之间如何工作的逻辑代码。


MVC的处理过程:首先控制器接受用户的请求,调用相应的模型来进行业务处理,并返回数据给控制器。控制器调用相应的视图来显示处理的结果。并通过视图呈现给用户。


view发送指令到controller--->controller完成逻辑之后,要求model改变状态--->model将新的数据发送到view,用户得到反馈。


MVC所有的通信都是单向的;


MVVM是MVC的变种和进阶,我们从字面上了解一下MVVM :

M----> model 模型层(一般用于数据存储,存储一些业务逻辑),也就是我们说的数据模型。

V-----> view 视图层(界面),用来展示数据。

VM--> ViewModel(视图模型) 也就是$scope。


在实际应用中,更多的是进行页面交互,而最后一次性向服务器提交处理(弱化了MVC中控制器的功能),增强了视图与模型的使用,因此将此称之为MVVM.


以前有人说过一句话:任何一个不能做的事情只要在中间加一层就可以实现了--我们在model 和 view 中间添加了一层ViewModel。


看图理解MVVM:

### MVCMVVM模式的区别及各自适用场景 #### 1. 模式定义 MVC(Model-View-Controller)是一种经典的软件架构模式,将应用程序分为三个主要部分:模型(Model)、视图(View)控制器(Controller)。这种分离使得开发人员可以专注于各自的职责[^1]。 MVVM(Model-View-ViewModel)是MVC的改进版本,引入了视图模型(ViewModel)作为连接视图模型的桥梁,支持数据绑定命令绑定,从而减少了直接操作DOM的需求[^3]。 #### 2. 核心区别 - **数据流**: - 在MVC中,数据通过控制器从模型流向视图,通常需要手动更新视图以反映模型的变化[^1]。 - MVVM采用双向数据绑定机制,视图模型之间的同步由框架自动完成,减少手动干预[^3]。 - **职责划分**: - MVC中的控制器负责处理用户输入并更新模型或视图的状态。 - MVVM中的视图模型充当模型视图之间的中介层,包含业务逻辑状态管理,使视图更加独立[^3]。 - **复杂性**: - MVC结构简单,适合小型项目或对性能要求较高的场景。 - MVVM增加了视图模型层,虽然提高了开发效率,但可能增加代码复杂度,适合大型前端应用或需要频繁交互的场景[^3]。 #### 3. 适用场景 - **MVC**: - 适用于后端驱动的应用程序,尤其是需要严格控制数据流动的场景[^1]。 - 当项目规模较小或团队熟悉传统架构时,MVC是一个稳定的选择[^2]。 - **MVVM**: - 适用于现代前端框架(如Vue、Angular),尤其是在需要实现复杂用户界面动态数据交互的场景中[^3]。 - 对于需要快速开发且注重用户体验的应用,MVVM能够显著提高开发效率[^2]。 #### 4. 示例代码对比 以下分别展示了MVCMVVM模式的基本实现方式: ##### MVC示例 ```javascript // Model class UserModel { constructor(name) { this.name = name; } } // View class UserView { constructor(controller) { this.controller = controller; } render(user) { console.log(`User Name: ${user.name}`); } } // Controller class UserController { constructor(model, view) { this.model = model; this.view = view; } updateName(newName) { this.model.name = newName; this.view.render(this.model); } } const userModel = new UserModel("John"); const userView = new UserView(); const userController = new UserController(userModel, userView); userController.updateName("Doe"); // 输出: User Name: Doe ``` ##### MVVM示例 ```javascript // ViewModel class UserViewModel { constructor() { this.name = "John"; this.bindView(); } bindView() { const inputElement = document.getElementById("nameInput"); const outputElement = document.getElementById("nameOutput"); inputElement.addEventListener("input", (event) => { this.name = event.target.value; outputElement.textContent = this.name; }); } } new UserViewModel(); ``` ### 结论 MVCMVVM各有优劣,选择合适的模式取决于项目的具体需求技术栈。MVC适合传统的Web应用开发,而MVVM更适合现代前端框架的动态交互场景[^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值