我們大家一直熟知的是MVC架構(gòu)眷射，iOS應(yīng)用開發(fā)中使用也大都是MVC架構(gòu)镇辉，隨著項(xiàng)目開發(fā)度的增大词身，致使C層代碼異常復(fù)雜厅目，然而近年新出的MVVM架構(gòu)有取代MVC架構(gòu)的趨勢(shì)。
那么什么是MVVM架構(gòu)法严？
說簡單點(diǎn)损敷，它就是MVC架構(gòu)的加強(qiáng)版。
其實(shí)說到MVVM架構(gòu)深啤，我們很有必要從頭來看看這個(gè)發(fā)展階段
第一階段
JS操作HTML
對(duì)于js學(xué)習(xí)前端的我們一點(diǎn)都不陌生拗馒，原生js當(dāng)然也很重要，js操作HTML其實(shí)就是js通過解析機(jī)制溯街。
原理是使用瀏覽器提供的原生API結(jié)合js語法诱桂，可以直接操作DOM洋丐。
話不多說來看栗子
<div id="name">wang</div>
<script>
var oName = document.getElementById("name");
oName.innerHTML = "Jimmy";
</script>
結(jié)果就會(huì)變成這樣：
<div id="name">Jimmy</div>
第二階段
jQuery
在學(xué)習(xí)前端的路上，jQuery可謂是一個(gè)大神級(jí)別的人物挥等，很重要垫挨，很重要，很重要.....
我們來看看jQuery操作DOM的栗子
<div id="name">小李</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$("#name").text("小李最美").css('color','green');
</script>
猜猜結(jié)果
<div id="name" style="color: green;">小李最美</div>
用jQuery就比原生js方便很多触菜，但是原生js是基礎(chǔ)，必須要掌握哀峻。
第三階段
MVC架構(gòu)(重點(diǎn))
文章開頭我們提到了MVC架構(gòu)涡相，先來說說這些字母分別代表什么
M(Model)模型：數(shù)據(jù)保存；
V(View)視圖：用戶界面
C(Controller)：業(yè)務(wù)邏輯
MVC模式剩蟀，需要服務(wù)器端配合催蝗，JavaScript可以在前端修改服務(wù)器渲染后的數(shù)據(jù)，所有通信都是單向的育特，提交一次反饋一次丙号，通信一次相互制約。
三者聯(lián)系
Model發(fā)送新數(shù)據(jù)給View
View傳指令給Controller
Controller完成邏輯業(yè)務(wù)缰冤，要求Model改變狀態(tài)
MVC優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
1.耦合性低犬缨；
2.重用性高；
4.部署快棉浸；
5.可維護(hù)性高怀薛；
6.有利于軟件工程化管理。
缺點(diǎn)：
1.沒有明確的定義迷郑；
2.不適合小型中等規(guī)模的應(yīng)用程序枝恋；
3.增加了系統(tǒng)結(jié)果和實(shí)現(xiàn)的復(fù)雜性；
4.牽一發(fā)而動(dòng)全身嗡害，數(shù)據(jù)焚碌，顯示不分離，Controller霸妹，Model聯(lián)系過于緊密十电。
第四階段
MVVC架構(gòu)模式
這才到了重點(diǎn)，上面說過MVVC架構(gòu)就是對(duì)MVC架構(gòu)的優(yōu)化
我們先來看看MVVC架構(gòu)模式圖(手畫的em......)
從這個(gè)圖我們看到View和Model做到了最大限度的分離
Model用純JavaScript對(duì)象表示
View負(fù)責(zé)顯示
ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來抑堡，還負(fù)責(zé)把View的修改同步回Model
雙向綁定：View改變摆出，反映在ViewModel，Model數(shù)據(jù)變動(dòng)首妖，自動(dòng)展示給頁面顯示偎漫。
MVVC核心思想：關(guān)注Model的變化，讓MVVM框架利用自己的機(jī)制去更新DOM有缆，從而把開發(fā)者從操作DOM的繁瑣中解脫出來象踊。
常見的MVVM框架：Vue.js温亲，AngularJs，ReactJs
對(duì)于框架的學(xué)習(xí)一直在進(jìn)行杯矩，因?yàn)楹芏嗫蚣芤恢痹诟抡恍椋赃€是繼續(xù)學(xué)吧......
