资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/MVC && MVVM

MVC && MVVM

klinson / 934人阅读

摘要：面向对象是自己组装电脑，硬件已生产完毕。面向过程吃狗屎面向对象狗吃屎确切的讲是一种软件设计规范，早在年的理念就已经诞生。后期的维护成本会减少很多。减轻了开发人员的负担，也减少了操作逻辑导致业务逻辑混乱的可能性。

什么是MVC，什么是MVVM？

面向过程 --> 面向对象 --> MVC --> MV*

面向过程：

开发人员按照需求逻辑顺序开发代码逻辑，主要思维模式在于如何实现。先细节，后整体。

面向对象：

开发人员先思考整个需求该由谁(哪个对象)来实现，整个需求就是由很多对象来完成，然后在对象的具体逻辑中依然还是面向过程。封装+多态+继承，先抽象，后具体。

面向过程与面向对象的区别：

就像是电脑，面向过程是自己生产电脑，包括电路板、零件等。面向对象是自己组装电脑，硬件已生产完毕。

面向过程： 吃 狗(屎)； 面向对象： 狗 吃(屎);

MVC：

确切的讲MVC是一种软件设计规范，早在1970年MVC的理念就已经诞生。不过长期以来MVC都是应用在重逻辑开发的软件领域和互联网产品的后台开发领域。

开发人员按照Model(模型) - View(视图) - Controller(控制器)相分离的逻辑进行需求开发，将输入(View)、处理(Controller)、输出(Model -> View)独立开，这种逻辑的好处在于，业务逻辑与用户界面分离之后，后期对于界面的改版以及对于用户交互的处理变化，仅仅需要改动View层即可，不在需要对业务逻辑层进行多大的改动。后期的维护成本会减少很多。

Model是需要渲染到页面中的数据模型，View是用户可以接触到的的界面，Controller是业务逻辑控制

MVVM：

开发人员只要考虑和处理Model(数据模型)的变化即可，不用考虑Model和View之间的数据绑定同步，更不用花精力用大量的代码获取DOM元素改变DOM元素的值来完成界面数据的变化。所有工作交给VM(View-Model)来处理。

MVVM并没有业务逻辑的控制器，它通过数据双向绑定，实时更新View和Model层，当数据模型发生变化的时候，用户界面(DOM)的内容会即时更新。反之如果用户操作导致某些DOM内容变化(如input)，ViewModel也会即时的将Model数据模型更新。

实际上还有一种模式叫做MVP，P是Presenter，它与MVVM类似，但不是双向绑定。

为什么MVC？

随着互联网产品前端业务逻辑的日趋复杂，JavaScript已经从最初的仅仅实现页面动态效果，随着AJAX的诞生以及Google对于此技术的重视和推广，现在的JavaScript演变成业务逻辑越来越复杂和繁重的角色，JavaScript也完美的向世人诠释了什么才是真正的屌丝逆袭。随着网站界面的复杂化，以及越来越多的互联网产品都开始重视用户的交互体验，前端的业务逻辑和数据处理能力被更加重视，也正是随着DOM操作逻辑与业务逻辑的混杂，导致项目代码随着时间的推移越来越多，越来越混杂，越来越难以维护。最早出现的MVC理念的JS框架便是几年前进入前端领域的Backbone.js。MVC设计理念终于被应用到的前端开发的领域。也正是因为前端MVC理念的普及，更多的人认识到了前端开发工程师的价值已经不只是过去那种只做表面功夫的"伪程序员"。前端开发工程师的春天才刚刚开始。

复杂的Web App
将开发重心从DOM操作，转移到数据操作，将DOM操作与程序逻辑解耦。
期望提升开发效率、单位时间产出、后期代码扩展性，降低维护成本

MVC另一种角度来说算是一个公司技术团队的开发规范，只有规范的逻辑代码，才能获得敏捷开发的便捷和高效，也可以得到相较为规范的开发模式更好的代码扩展性和可维护性。

为什么MVVM？

数据双向绑定，开发人员不用再把精力放在DOM的修改和更新，只要通过模板引擎将数据模型和用户界面绑定，框架会实时同步双方数据的变化。减轻了开发人员的负担，也减少了DOM操作逻辑导致业务逻辑混乱的可能性。

为什么使用AngularJS

最早开始普及的前端MVC框架是Backbone，之后借鉴这种开发模式的框架如雨后春笋般进入开发者的视野。互联网巨头们也开始推出自己的MV*框架：
微软 - Knockout.js - MVVM
Google - Angular.js - MVC & MVVM
苹果 - Ember.js - MVC & MVVM
Facebook - React.js - MVVM

全栈工程师 -> MEAN解决方案

AngularJS既是MVC框架又是MVVM框架

之前有说到MVC模式就是一种开发规范，AngularJS这个MVC框架带给我们的好处就是，他经过了Google很多项目的考验，我们使用AngularJS也可以算是使用Google成熟的开发规范来进行项目开发。AngularJS这个MVC框架实际上汇集了太多太多Google的优秀理念和编程规范，这对于很多希望能统一开发规范的前端Team来说是很宝贵的。

AngularJS既是MVC框架又是MVVM框架

之前有说到MVC模式就是一种开发规范，AngularJS这个MVC框架带给我们的好处就是，他经过了Google很多项目的考验，我们使用AngularJS也可以算是使用Google成熟的开发规范来进行项目开发。AngularJS这个MVC框架实际上汇集了太多太多Google的优秀理念和编程规范，这对于很多希望能统一开发规范的前端Team来说是很宝贵的。

感谢彬大神的指导和整理。关于我，伪全栈工程师。

GPU云服务器 云服务器 asp &amp&amp逻辑 js 2&amp&amp1 attr&039&039checked&039&039 OneTechCloud&amp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78402.html

相关文章

  • Deep in JS - 收藏集 - 掘金

    摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰 目录 冒泡排序 简介 算法实现 选择排序 简介 算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

    enali 评论0 收藏0

  • VUE - MVVM - part13 - inject & 总结

    摘要：通过装作这些变化，我们实现了从而到达了数据变化触发函数的过程。于此同时，我们还实现了来扩展这个可响应的结构，让这个对象拥有了触发和响应事件的能力。最后，根据我们的实现，这是最终的产出，一个框架，了解一下系列文章地址优化优化总结 看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。 provide / inject 在上一步我们实现了，父子组件，和 props 一样 pr...

    niuxiaowei111 评论0 收藏0

  • Vue源码解析(二)-MVVM双向绑定&&Watcher介绍

    摘要：前言上一遍文章介绍了模版渲染的实现，这篇文章将继续介绍双向绑定的实现官网如下，当。 前言 上一遍文章介绍了Vue模版渲染的实现（https://segmentfault.com/a/11...），这篇文章将继续介绍双向绑定的实现 demo 官网demo如下，当data。message的值变化，input的value值也会相应的变化；当用户改变input框中的内容时data.messag...

    miya 评论0 收藏0

  • 剖析Vue原理&实现双向绑定MVVM

    摘要：所以无需太过介怀是实现的单向或双向绑定。监听数据绑定更新函数的处理是在这个方法中，通过添加回调来接收数据变化的通知至此，一个简单的就完成了，完整代码。 本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也...

    melody_lql 评论0 收藏0

  • angular，react & vue

    摘要：由进行开发和维护，代发布于年月，现在主要是。状态是只读的，只能通过来改变，以避免竞争条件这也有助于调试。文件大小为，而为，为。请记住，性能基准只能作为考虑的附注，而不是作为判断标准。使用的人员报告说，他们永远不必阅读库的源代码。 本文当时写在本地，发现换电脑很不是方便，在这里记录下。 angular，react & vue 2018/07/23 2016年，对于JavaScript来说...

    jiekechoo 评论0 收藏0

发表评论

登陆后可评论

0条评论

klinson

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<