没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?


谢谢邀请!
什么是MVC以及它的作用?

没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
如何理解MVC?
在后端的知识体系中 。MVC更容易理解!不过在前端中 。我们有nodejs可以做后端 。我们就拿nodejs举例!
没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
我们把用户操作的界面看作View层 。用户操作浏览器后 。请求来到服务端 。路由将请求交给Controller 。Controller调用对应的服务处理数据 。数据处理后返回响应!这里我将Router和Controller放在一起 。Service和db放在了一起!这样代码调理清晰 。对代码增删改查都会非常方便!
如果仅仅是浏览器端的逻辑 。也可以采用MVC架构 。例如Backbone.js 。方式如下:
1、dom 是 View层
2、对dom的事件绑定 。可以看作Controller
3、将原始数据和数据的操作封装成数据模型(对象)
4、Controller调用不同的数据模型处理数据
5、数据处理完成后 。采用观察者模式及时更新View
什么是MVP、MVVM?
没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
其实MVP和MVVM是MVC的变种 。Model和View没有直接的联系了 。而是通过中间的那一层进行桥接!目前市场比较流行MVVM模式 。比如VUE、REACT等!
总结
不管是哪一种架构模式 。其实都是为了方便我们开发和维护 。个人认为没有严格的标准去限定有多少层以及层与层的联系 。只要适用于业务就是好的架构模式!
其他观点:
MVC、MVP、MVVM 三者特点
什么是MVC 模式?
Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO 。它也可以带有逻辑 。在数据变化时更新控制器 。
View(视图) - 视图代表模型包含的数据的可视化 。
Controller(控制器) - 控制器作用于模型和视图上 。它控制数据流向模型对象 。并在数据变化时更新视图 。它使视图与模型分离开 。MVC是比较直观的架构模式 。用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View) 。
没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
什么是MVP模式?
没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
什么是MVVM模式?
没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?

文章插图
为什么要使用MVVM?
其他观点:
不需要后端基础来理解mvc mvp mvvm 。
mvc 就是模型试图控制器 。模型类似数据schema 。就是这个要渲染视图的数据结构;v就是模板 。用于将数据格式化展示;c就是控制器 。控制使用哪个模板 。并将model与视图做映射 。这样模型的数据就绘制到视图了 。一般在controller和model中间会加一个service来处理下业务 。
mvp跟mvc挺像 。所不同是p是presenter 。用来替代c 。这种模式下 。不再是model直接映射到模板 。而是通过presenter来把model数据拿到 。然后由presenter这个代理器来将数据写入到视图 。这样视图与model进行了解绑 。开发变得更灵活 。presenter还可以操控数据 。
mvvm就是从模型数据直接到视图再从视图到模型 。这样去掉了v或者p 。不再需要一层控制器或者代理器 。这样的好处就是 。针对数据模型编程 。改变了数据也就是改变了视图 。由框架来把视图和数据的联动搞定 。开发者更多关心是数据逻辑开发 。而复杂的dom操作 。事件处理交给了框架 。这样大型开发会变得容易些 。m到v就是要监听到数据的变动 。比如defineProperty、proxy、不停数据检测等方式来获知数据发生了改变 。然后将改变后的数据更新到视图上;v到m就是监听dom的更新事件 。凡事dom更新则将对应model更新 。
其实实际工作中仍然会三者有些结合或借鉴 。目前大多采用mvvm框架 。但是模型仍然是需要独立的 。而且也需要service来进行承接 。视图与模型的对应也可以视图对应的代理器完成 。
【没有后端基础如何理解MVC、MVP和MVVM,可以以JavaScript举例吗?】有时候我们为了实现松耦合和代码的易维护性 。尽量将数据和视图以及连接器等解藕 。这时候你觉得哪种实践最合适就怎么做 。也不必拘泥于某个固定的形式 。

    推荐阅读