浅谈前端MVC与MVVC模式

最新推荐文章于 2024-03-25 20:41:40 发布
最新推荐文章于 2024-03-25 20:41:40 发布
阅读量6.5k 收藏 2
点赞数 2
文章标签： 测试 前端 javascript ViewUI
原文链接：https://juejin.im/post/5c80aacb51882533d6708838
版权

最早接触MVC模式的时候还是学习JAVA框架时候了解的，当时M表示modal层，负责数据块，V表示View层，负责页面渲染，C表示Contrllor，负责控制前后交互。

这个是JAVA的MVC模式！

那么前端的MVC又表示的是什么呢？

在前端的MVC模式中，M还是表示Modal层，负责与后台交互数据，V表示View，负责页面上DOM的渲染，C表示绑定在DOM元素上的事件，当Controllor中的事件被调用，会去调用Modal中的数据，然后交给View重新渲染数据

现在的前端MVVM模式又是什么一个模式呢？

目前前端框架中，最为出色的要属Vue和React了，这俩个框架的核心理念都是数据驱动页面渲染，同时他们都是MVVM模式的框架，MVVM模式中的M还是固定表示Modal，V还是表死View，这俩个基本都是不会发生变化，一个页面必然需要数据和渲染俩个部分，那么变化的是如何将Modal渲染到View的过程变了，在MVVM模式中，将View和Modal绑定在一起，只要Modal发生了变化，View就会自动更新，不需要我们认为的再去写如何操作DOM更新的过程了

转载于:https://juejin.im/post/5c80aacb51882533d6708838

weixin_33735077
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端MVC
macycle的博客
07-24 1976
1.MVC是什么 mvc是一种架构设计模式，它包含三类对象，分别是M(model)层、V(view)层、C(controller)层。将这三层分离以提高灵活性与复用性。 M-Model（数据模型）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。 const m = { data: { n: parseInt(localStorage.getItem('n')) }, create(){}, d
前端web开发的MVC模式 - 从一个简单实例讲起
web前端开发-linglong
03-18 2141
前端web开发的MVC模式 - 从一个简单实例讲起 MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。 随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页面制作、另外从整个前端项目的清晰明朗以可扩展性
前端MVC设计模式
zy531的专栏
02-08 2339
前言 　　前端的MVC，近几年一直很火，大家也都纷纷讨论着，于是乎，抽空总结一下这个知识点。看了些文章，结合实践略作总结并发表一下自己的看法。　　 　　最初接触MVC是后端Java的MVC架构，用一张图来表示之—— 　　这样，我们让每一个层次去关注并做好一件事情，层与层之间保持松耦合，我们可以对每一个层次单独做好测试工作。如此，我们可以让代码更具可维护性。 　　因此，借鉴于后端的这
MVC与MVVC
weixin_48338881的博客
07-09 766
MVC与MVVC
MVVC模式
weixin_41450557的博客
11-05 3991
vue中的MVVC模式分为：Model层，View层和VueModel层 View层：视图层，在前端开发中就是DOM层，主要作用就是给用户展示各种信息。 Model层：数据层，数据可能是我们固定的死数据，更多的是来自服务器，从网络请求下来的数据。 VueModel层：视图模型层，它是视图层和数据层的桥梁，一方面实现了Data Binding，即数据绑定，将Model的改变实时的反应到View...
lessgo:Lessgo是一种简单，稳定，高效，灵活的golang web开发框架，支持动态路由，自动化API测试文档，热编译，热更新等，实现前一步分离，系统与业务分离，完美兼容MVC与MVVC等多[一种简单，稳定，高效和灵活的Web框架。]
03-11
它的项目组织形式通过精心设计，实现前分离，系统与业务分离，完美兼容MVC与MVVC等多种开发模式，当然，最值得关注的是它的突破性支持运行时路由重建，开发者可在Admin后台轻松配置路由，并实现启用/添加模块或操作...
基于vb.net的MVC模式的学生管理系统(5)
11-26
【基于VB.NET的MVC模式】 MVC（Model-View-Controller）模式是一种软件设计模式，常用于创建用户界面，将业务逻辑、数据模型和用户界面分离，以提高代码的可维护性和可复用性。在VB.NET中实现MVC，我们可以利用ASP...
基于MVVC架构的微信小程序开发中室内地图导航的解决方案探索.zip
10-16
MVVM架构是一种数据驱动的开发模式，它在移动应用开发中广泛应用，尤其是在微信小程序这样的轻量级平台上，能有效提高开发效率和代码可维护性。 MVVM架构的核心思想是将视图（View）与模型（Model）分离，通过...
前端的MVC模式与MAVVM模式
袁的博客
09-16 302
MVC和MVVM的简单理解
MVC模式和MVVC模式
lovepink527的博客
11-30 3967
MVC模式 mvc是由三个单词的首字符组成的：分别是模型model-视图view-控制器controller 他是一种使用业务逻辑、数据、视图进行分离的方式来组织架构代码的一种模式。 复杂项目中改变数据，很难判断那里改变 var MVC = {} MVC.model = (function(){ var data = { sidebar:[{ title: 'sidebar1', href: './a.html' },{ title: 'sidebar2', href:
前端MVC、MVP、MVVM模式
ABCFF12333的博客
04-07 384
前端MVC、MVP、MVVM模式简介MVC模式MVP模式MVVM模式 简介 MVC、MVP、MVVM是三种前端的软件架构设计模式，主要用于优化代码结构，便于后期的项目开发和维护工作。 MVC模式 MVC模式是通过分离Model、View、Controller的方式组织代码。 View负责页面的显示逻辑； Model负责存储页面的业务数据以及对相应数据的操作； Controller是View层与Model层之间的纽带，当用户与页面产生交互的时候，Controller中的事件触发器开始工作，调用Model层
MVC与MVVC的区别
HDdgut的博客
07-16 2383
MVC：control负责调度，model和view没有直接联系（分层，职责明确） 1.view(负责跟用户交互的页面) 2.control（接受请求->调用模型->根据结果派发页面并经过模型处理返回相应的数据） 3.model（完成业务逻辑） MVVC：把control改变成viewModel view的变化会自动更新到viewModel，viewModel的变化也会自动同步到view上显示，通过数据来显示视图层 MVVC的优点： 低耦合：view可以独立于model变化和.
前端（三）——MVC与MVVM模式的battle
杜永康的博客
07-05 1549
前端框架通常有庞大的开发者社区，提供了。mvc模式是什么 mvc模式的优缺点 优化mvc模式致命的缺点 mvvm是什么，和mvc有什么关系？ 细看mvvm和mvc的不同 mvvm的缺点 前端框架🐂🍺 MVVM模式相对于MVC模式引入了ViewModel层，通过数据绑定机制实现了视图和模型之间的解耦，减少了视图的复杂性，使开发更加高效和可维护。MVVM模式在前端开发中得到广泛应用，特别适合于数据驱动的应用和复杂的用户界面交互。而MVC模式则更加传统和通用，适用于各种类型的应用程序
前端框架模式MVC、MVVM和MVP的讲解
jason_renyu的博客
02-07 2497
复杂的软件必须有清晰合理的架构，否则无法开发和维护。   MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。   除了MCV模式还有MVVM和MVP模式，下边就来介绍下着三种模式：     一. MVC模式的意思是,软件可以分成三个部分 Model + View + Controller 模型(Model):数据保存 视图(View):用
MVVM 和 MVC
weixin_49757069的博客
07-13 565
MVVVM 在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。 MVVM模式的优点: 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 可重用性: 可以把一些视图逻辑放在
MVC与MVVM：两种前端架构模式对比
最新发布
你若盛开，清风自来
03-25 2284
本文将介绍MVC和MVVM两种前端架构模式的概念、特点以及它们在现代前端开发中的应用，帮助您了解如何选择适合项目需求的前端架构模式。🎉 MVC和MVVM是两种广泛使用的前端架构模式，它们各有特点和适用场景。通过了解MVC和MVVM的概念、特点以及它们在现代前端开发中的应用，我们可以更好地选择适合项目需求的前端架构模式，提高开发效率和代码质量。
MVC和MVVC是什么，有什么不同，怎么区别他们
09-04
### 回答1： MVC 和 MVVC 是两种常见的软件架构模式，主要用于构建用户界面。 MVC 是 Model-View-Controller 的缩写，是指模型-视图-控制器的架构。在 MVC 架构中，用户界面被划分为三个部分： - Model（模型）：表示应用程序的状态和业务逻辑。 - View（视图）：表示应用程序的用户界面，负责将模型的数据呈现给用户。 - Controller（控制器）：负责响应用户的操作，接收用户的输入并根据输入更新模型和视图。 MVVC 是 Model-View-ViewModel 的缩写，是 MVC 的变体。MVVC 架构中多了一个 ViewModel 层，它负责将模型的数据转化为视图能够使用的格式。ViewModel 与 View 和 Model 之间的交互是通过数据绑定来实现的，ViewModel 不直接操作视图，而是通过数据绑定将模型的状态呈现给视图。 MVC 和 MVVC 的区别在于，MVVC 多了一个 ViewModel 层，ViewModel 负责将模型的数据转化为视图能够使用的格式，同时通过数据绑定将模型的状态呈现给视图。由于 ViewModel 不直接操作视图，因此 MVVC 的代码 ### 回答2： MVC和MVVC是两种常见的软件架构模式，用于将应用程序的不同部分分离开来，提供更好的可维护性和扩展性。 MVC（Model-View-Controller）是一种经典的软件架构模式，将应用程序分为三个组件：模型(Model)、视图(View)和控制器(Controller)。模型负责处理数据逻辑，视图负责用户界面的展示，控制器负责处理用户输入和业务逻辑。MVC的主要特点是逻辑清晰、分工明确，能够有效分离关注点，提高代码的可维护性。然而，由于控制器负责处理用户输入和业务逻辑，在复杂的应用中往往导致控制器变得臃肿，难以维护。 MVVM（Model-View-ViewModel）是一种相对较新的软件架构模式，将应用程序分为三个组件：模型(Model)、视图(View)和视图模型(ViewModel)。模型依然负责处理数据逻辑，视图负责用户界面的展示，而视图模型负责将模型数据转化为视图所需的格式，并处理用户的操作请求，然后将结果反馈给模型。MVVM的主要特点是数据双向绑定，视图模型与视图的绑定使得数据的更新可以自动反映到视图上，大大简化了视图和模型之间的通信，提高了代码的可维护性和可测试性。 区别MVC和MVVM的关键在于视图和模型之间的通信方式。在MVC中，视图通过控制器与模型进行通信，而在MVVM中，视图模型通过双向数据绑定与模型进行通信。MVVM通过数据绑定的方式，实现了视图和模型之间的解耦，降低了代码的复杂性。此外，MVVM还提供了命令绑定的机制，将用户操作转化为模型中的具体业务逻辑，进一步简化了代码的编写。 总之，MVC和MVVM都是用于分离应用程序中不同部分的架构模式，MVC较为传统，MVVM相对较新且强调数据绑定，通过不同的通信方式实现了代码的可维护性和可测试性的提升。选择使用哪种架构模式应根据具体的项目需求和开发团队的熟悉程度进行评估。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值