什么是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来说是很宝贵的。


MVC & MVVM的更多相关文章

  1. MVP MVC MVVM 傻傻分不清

    最近MVC (Model-View-Controller) 和MVVM (Model-View-ViewModel) 在微软圈成为显学,ASP.NET MVC 和WPF 的Prism (MVVM Fr ...

  2. mvc/mvvm小小的总结

    mvc/mvvm 阮大神博客 mvc 分为三层,其实M层是数据模型层,它是真正的后端数据在前端js中的一个映射模型,他们的关系是:数据模型层和视图层有映射关系,model改变,view展示也会更改,当 ...

  3. 我的架构设计~用层关系图说说mvc,mvvm,soa,ddd

    下面是按着我所接触的架构模式,开始一个一个的说一下 第一 标准架构 三层结构

  4. iOS MVC, MVVM

    在iOS app里,如果用传统的MVC模式,Model层就是数据,View层就是Storyboard,nib文件或者构建UI的代码,Controller层就是ViewController,负责协调Mo ...

  5. JavaScript富应用MVC MVVM框架

    对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好?2. 那一个比较简 ...

  6. MVP, MVC, MVVM, 傻傻分不清楚~

    1 简介 英文原文:MVC vs. MVP vs. MVVM 三者的目的都是分离关注,使得UI更容易变换(从Winform变为Webform),使得UI更容易进行单元测试. 2 MVC/MVP 2.1 ...

  7. MVC,MVVM,MVP的区别/ Vue中忽略的知识点!

    按照顺序学习: https://scotch.io/courses/build-an-online-shop-with-vue/hello-world Vue Authentication And R ...

  8. 通俗理解 MVC , MVVM

    MVC 也就是Model-View-Controller 的缩写,就是 模型-视图-控制器 : Model :管理数据 View :视图展示 Controller :响应用户操作,并将 Model 更 ...

  9. 学习笔记之ASP.NET MVC & MVVM & The Repository Pattern

    ASP.NET MVC | The ASP.NET Site https://www.asp.net/mvc ASP.NET MVC gives you a powerful, patterns-ba ...

随机推荐

  1. Java学习笔记之:Java流程控制

    一.介绍 Java流程控制包括顺序控制.条件控制和循环控制. 顺序控制,就是从头到尾依次执行每条语句操作.条件控制,基于条件选择执行语句,比方说,如果条件成立,则执行操作A,或者如果条件成立,则执行操 ...

  2. Linux命令学习笔记(1)

    groupadd 1.作用 groupadd命令用于将新组加入系统.2.格式groupadd [-g gid] [-o]] [-r] [-f] groupname3.主要参数-g gid:指定组ID号 ...

  3. android从应用到驱动之—camera(2)---cameraHAL的实现

    本文是camera系列博客,上一篇是: android从应用到驱动之-camera(1)---程序调用流程 本来想用这一篇博客把cameraHAL的实现和流程都给写完的.搞了半天,东西实在是太多了.这 ...

  4. Java API —— JDK5新特性

    JDK5新特性         自动拆装箱.泛型.增强for.静态导入.可变参数.枚举   1.增强for概述         1)简化数组和Collection集合的遍历         2)格式: ...

  5. KMP入门题目[不定期更新]

    HDU 1711 Number Sequence(模板题) #include <cstdio> ; ; int N, M; int textS[MAXN]; int tarS[MAXL]; ...

  6. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  7. git push提示或错误

    当 git 和 gerrit 一起使用的时候,你创建了一个 tag,现在需要 push 到远程仓库,当你没有权限的时候,会出现如下提示: $ git push origin v20150203 Tot ...

  8. apache启动报错(98)Address already in use: make_sock: could not bind to...

    # /etc/init.d/httpd startStarting httpd: (98)Address already in use: make_sock: could not bind to ad ...

  9. HDU 1677

    Nested Dolls Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  10. 手动配置gradle

    最近从github倒入项目,运行的特别慢gradle配置有问题,解决方法: 1.C:\android\demo\hellocharts-android-master\gradle\wrapper 目录 ...