MVVM框架
随着Web2.0的发展和移动互联网时代的到来，前端开发在整个Web应用软件开发中的地位越来越重要。现在的Web系统中越来越多的数据处理和业务逻辑开始偏向于前端，逐渐形成了“大前端”的局面，前端对性能和开发效率的要求也越来越高。在这种需求的推动下，jQuery工具库、MVC模式、MVVM模式被相继引入到前端开发领域。其中，MVVM模式是近一两年才开始被引入前端开发的领域，它是基于传统MVC模式的进一步发展，特别适合于在前端领域构建基于事件驱动的UI开发平台。
MVC模式与MVVM模式
MVC全名是ModelViewController，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。其中，视图(View)是软件的界面；模型(Model)是视图类所需要的数据，例如表格需要显示的文字；控制器(Controller)连接视图类和模型类，其任务是使数据(Model)显示在视图(View)上。MVC架构图如下图所示。
MVC架构图在MVC架构模式中，各部分之间的通信过程为View传送指令到Controller；
Controller完成业务逻辑后，要求Model改变状态;Model将新的数据发送到View，界面得到更新。在上述过程中，每个步骤的通信都是单向的。
MVVM它本质上就是MVC的改进版。MVVM是Model-View-ViewModel的简写。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画等，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、DependencyProperty、RoutedEvents、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。MVVM模式架构图如图所示：
MVVM架构图MVVM框架的优点
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点
1.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用ExpressionBlend可以很容易设计界面并生成xaml代码。
4.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
主流MVVM前端框架
GoogleAngularJS
AngularJS诞生于年，由MiskoHevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。它可通过script标签添加到HTML页面。AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。AngularJS是以JavaScript文件形式发布的，可通过script标签添加到网页中。
AngularJS不仅是一个理念先进的前端开发框架，更是一种端对端（EndtoEnd）的解决方案。AngularJS遵从架构设计中的MVC模式，提倡展现、数据和逻辑处理组件的松耦合。AngularJS通过指令技术对传统HTML实现了自然扩展，通过编译技术实现了数据模型与展现视图的双向自动同步，从而消除了前端开发中繁琐复杂的DOM操作。最后再通过模块化设计解决了JS代码管理维护和按需加载的问题。而且这种解耦本身，也对前端的自动化测试技术提供了良好的支持。
AngularJS框架的优点有以下几个方面：
1.双向数据绑定
AngularJS提供了强大的数据双向绑定功能，再也不需要使用JS或者jQuery来操作DOM元素，大大减少了前端的代码量。
2.完善的体系，提供一整套WEB开发的解决方案
包括模板、数据双向绑定、路由、指令、过滤器、模块化、服务(可复用)等特性，基本上前端需要用的东西都可以从这个框架里面找到，减少选择性疲劳。
3.引入后端语言的一些概念
单元测试、依赖注入等等，能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助
AngularJS的缺点：
1.验证功能错误信息显示比较薄弱，需要写很多模板标签；
2.ngView只能有一个，不能嵌套多个视图，虽然有angular-ui/ui-router解决，但ui-router对于URL的控制不是很灵活，必须是嵌套式的；
3.对于特别复杂的应用场景，性能有点差；
FacebookReact
React起源于Facebook的内部项目，起初主要用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在年5月开源了。React把用户界面抽象成一个个组件，如按钮组件Button、对话框组件Dialog、日期组件Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入JSX语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用于开发原生移动应用。
React具有如下特点：
1.声明式设计React采用声明范式，可以轻松描述应用（自动dom操作）。
2.高效React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。
3.灵活React可以与已知的库或框架很好地配合。
4.JSXJSX是JavaScript语法的扩展。
5.组件通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
Vue
Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只