MVVM架构

我们大家一直熟知的是MVC架构，iOS应用开发中使用也大都是MVC架构，随着项目开发度的增大，致使C层代码异常复杂，然而近年新出的MVVM架构有取代MVC架构的趋势。

那么什么是MVVM架构？
说简单点，它就是MVC架构的加强版。
其实说到MVVM架构，我们很有必要从头来看看这个发展阶段

第一阶段

JS操作HTML

对于js学习前端的我们一点都不陌生，原生js当然也很重要，js操作HTML其实就是js通过解析机制。

原理是使用浏览器提供的原生API结合js语法，可以直接操作DOM。

话不多说来看栗子

<div id="name">wang</div>
<script>
    var oName = document.getElementById("name");
    oName.innerHTML = "Jimmy";
</script>

结果就会变成这样：

<div id="name">Jimmy</div>

第二阶段

jQuery

在学习前端的路上，jQuery可谓是一个大神级别的人物，很重要，很重要，很重要.....
我们来看看jQuery操作DOM的栗子

<div id="name">小李</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
   $("#name").text("小李最美").css('color','green');
</script>

猜猜结果

<div id="name" style="color: green;">小李最美</div>

用jQuery就比原生js方便很多，但是原生js是基础，必须要掌握。

第三阶段

MVC架构(重点)

文章开头我们提到了MVC架构，先来说说这些字母分别代表什么

M(Model)模型：数据保存；
V(View)视图：用户界面
C(Controller)：业务逻辑

MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据，所有通信都是单向的，提交一次反馈一次，通信一次相互制约。

MVC架构图

三者联系
Model发送新数据给View
View传指令给Controller
Controller完成逻辑业务，要求Model改变状态

MVC优缺点：
优点：
1.耦合性低；
2.重用性高；
4.部署快；
5.可维护性高；
6.有利于软件工程化管理。
缺点：
1.没有明确的定义；
2.不适合小型中等规模的应用程序；
3.增加了系统结果和实现的复杂性；
4.牵一发而动全身，数据，显示不分离，Controller，Model联系过于紧密。

第四阶段

MVVC架构模式

这才到了重点，上面说过MVVC架构就是对MVC架构的优化
我们先来看看MVVC架构模式图(手画的em......)

MVVC架构图

从这个图我们看到View和Model做到了最大限度的分离

Model用纯JavaScript对象表示
View负责显示
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model

双向绑定：View改变，反映在ViewModel，Model数据变动，自动展示给页面显示。

MVVC核心思想：关注Model的变化，让MVVM框架利用自己的机制去更新DOM，从而把开发者从操作DOM的繁琐中解脱出来。

常见的MVVM框架：Vue.js，AngularJs，ReactJs
对于框架的学习一直在进行，因为很多框架一直在更新，所以还是继续学吧......