對(duì)于很多編程的初學(xué)者來說，MVC 的設(shè)計(jì)理念和 MVVM 的設(shè)計(jì)理念總是難以掌握蜘欲，其實(shí)這種現(xiàn)象也屬正常益眉，因?yàn)楹芏嘣诔鯇W(xué)階段的人，沒有經(jīng)歷大型項(xiàng)目開發(fā)的經(jīng)驗(yàn)姥份，更沒有對(duì)編程的工程化體系的發(fā)展及歷史進(jìn)行過研究郭脂，更是少有人提及編程工程化的概念；其實(shí)澈歉，對(duì)于目前的各種設(shè)計(jì)理念展鸡，都是編程工程化發(fā)展的產(chǎn)物；
大家可以先看一下圖埃难，這基本是我對(duì)編程工程化發(fā)展的一個(gè)了解莹弊，以一個(gè)大家最習(xí)以為常的網(wǎng)站作為工程項(xiàng)目的代表來展示涤久，圖中的內(nèi)容雖然可能并不完善，也不可能完全說明白工程發(fā)展的整個(gè)歷史忍弛，這僅僅是一個(gè)簡(jiǎn)易的圖示：
正如上圖所示响迂，在工程發(fā)展的第一個(gè)階段，工程師并沒有一個(gè)相對(duì)明確的分工细疚，基本是出于一種 “啥活都干” 的階段蔗彤，在這個(gè)階段中，出現(xiàn)了一種編程語言惠昔，他讓工程師可以在代碼中直接嵌入HTML幕与、CSS、JS等前端代碼镇防，可以直接連接數(shù)據(jù)進(jìn)行CURD操作啦鸣，不需要關(guān)心數(shù)據(jù)庫的讀寫壓力，可以與現(xiàn)有成熟的HTTP服務(wù)器合作来氧，不需要關(guān)心客戶端的 HTTP 請(qǐng)求壓力(不管是數(shù)據(jù)庫還是http服務(wù)器诫给，當(dāng)時(shí)的實(shí)際壓力也沒有現(xiàn)今那么大)，它屏蔽了各種繁雜的 I\O 啦扬，使工程師最大限度的以項(xiàng)目為中心中狂，而且無需手動(dòng)編譯，實(shí)時(shí)運(yùn)行扑毡，開發(fā)速度也有了一個(gè)質(zhì)的提升胃榕，時(shí)勢(shì)造英雄，它成了 “世界上最好的編程語言瞄摊，沒有之一”勋又，沒錯(cuò)，它就是 PHP 换帜。
WordPress 將這種開發(fā)模式推向了極致楔壤，成為混合嵌入式編程的典型代表；Discuz基本算是國內(nèi)最為典型的代表了惯驼；
而隨著項(xiàng)目工程量的加大蹲嚣，項(xiàng)目代碼的復(fù)雜度隨之加大，一個(gè)人甚至5-10人的小型團(tuán)隊(duì)祟牲，再也無法適應(yīng)這種開發(fā)模式隙畜，于是出現(xiàn)了適應(yīng)團(tuán)隊(duì)協(xié)作開發(fā)的 MVC 模式，如下圖：
MVC設(shè)計(jì)模式的出現(xiàn)说贝，在一定程度上依賴于另外一項(xiàng)關(guān)鍵技術(shù)的成熟禾蚕，就是模板引擎；
其實(shí)模板引擎技術(shù)并不復(fù)雜狂丝，而是繁瑣换淆，基本原理就是前端HTML中寫關(guān)鍵字符以期承載數(shù)據(jù)哗总，然后再交由后臺(tái)將前端HTML代碼中的關(guān)鍵字符進(jìn)行正則匹配，替換為真實(shí)數(shù)據(jù)倍试；
模板引擎的關(guān)鍵點(diǎn)并不是技術(shù)讯屈，而是在一定程度上解脫了后臺(tái)程序員，他們不再寫頁面和JS腳本了县习，這些工作大部分交給專業(yè)的前端工程師來完成涮母，后臺(tái)只需要在頁面完成后讀取并交由模板引擎進(jìn)行二次處理即可；這基本就實(shí)現(xiàn)了代碼工程的分離躁愿；
而MVC的設(shè)計(jì)模式也是相對(duì)靈活的叛本，對(duì)于小型技術(shù)團(tuán)隊(duì)來說，C層與M層的分離其實(shí)并不徹底彤钟，邏輯與數(shù)據(jù)之間的處理大部分情況下依然交與后臺(tái)完成来候，邏輯層與數(shù)據(jù)層僅僅實(shí)現(xiàn)了代碼邏輯上的分離，并沒有實(shí)現(xiàn)工程上的分離逸雹；
但大型技術(shù)團(tuán)隊(duì)中已經(jīng)實(shí)現(xiàn)了邏輯與數(shù)據(jù)操作的分離营搅，DBA(數(shù)據(jù)庫工程師)一般會(huì)提供數(shù)據(jù)操作中間件，以供C層根據(jù)業(yè)務(wù)邏輯調(diào)用處理數(shù)據(jù)梆砸；
而此時(shí)转质，PHP的優(yōu)勢(shì)就顯得不是很明顯了，大量編程語言出現(xiàn)了同質(zhì)化的現(xiàn)象帖世，說好聽點(diǎn)應(yīng)該是 百花齊放 休蟹；
目前依然有大量項(xiàng)目在使用MVC的設(shè)計(jì)模式進(jìn)行項(xiàng)目開發(fā)，而隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展日矫，MVC 設(shè)計(jì)模式的最大BUG也凸顯出來赂弓，它沒有從正真意義上實(shí)現(xiàn)前后端的分離，而是淺層次的實(shí)現(xiàn)了前后端工程上的分離搬男，也就是后臺(tái)程序員不寫頁面代碼而已拣展；這種模式彭沼，對(duì)于移動(dòng)端設(shè)備缔逛，完全失去了意義，相同的業(yè)務(wù)邏輯和數(shù)據(jù)處理姓惑，網(wǎng)站需要一套代碼褐奴，針對(duì)移動(dòng)設(shè)備又需要另外一套代碼，工程量翻倍不止于毙；但在MVC的發(fā)展道路上敦冬，也有人試圖突破這種模式已期解決MVC的BUG，但歷史證明是不成熟的唯沮，就是不使用模板引擎脖旱，從服務(wù)器獲取靜態(tài)頁面后堪遂，使用大量的ajax獲取數(shù)據(jù)并更新到頁面，這種做法萌庆，確實(shí)實(shí)現(xiàn)了前后端工程及數(shù)據(jù)的徹底分離溶褪，為前端工程化的發(fā)展提供了關(guān)鍵性思路設(shè)想，而它最大的BUG就是需要前端程序員大量且繁瑣的操作DOM已向用戶展示數(shù)據(jù)践险，痛苦不堪猿妈，雖然jQuery 從一定程度上減緩了這種痛苦，但這并不是MVVM巍虫，所以 jQuery 也不是終點(diǎn)彭则，但這種設(shè)計(jì)是對(duì)前端工程化發(fā)展具有歷史性意義的……
且看下圖：
我在上面的圖示中展示了兩個(gè)服務(wù)器，是想盡可能的為大家理清 MVVM 在整個(gè)項(xiàng)目開發(fā)中的作用和關(guān)鍵位置占遥，真實(shí)項(xiàng)目開發(fā)中俯抖，可以是一臺(tái)或者多臺(tái)服務(wù)器，不要被圖示誤導(dǎo)筷频；
其實(shí) MVVM的設(shè)計(jì)蚌成，本質(zhì)上就是解決了前端程序員大量繁瑣的操作DOM的問題，數(shù)據(jù)的請(qǐng)求獲取依然依賴于Ajax技術(shù)凛捏，但是担忧，數(shù)據(jù)獲取后的展示，不再是操作DOM坯癣，而是交由中間的VM層來處理瓶盛；
前端有了MVVM的設(shè)計(jì)思想后，終于實(shí)現(xiàn)了前后端工程及數(shù)據(jù)的徹底分離示罗，而這種設(shè)計(jì)思想惩猫，目前也大量應(yīng)用于各種新項(xiàng)目的開發(fā)，于是各種前端框架如雨后春筍般拔地而起蚜点，前端的ARV三大框架就是典型代表轧房；前端有了數(shù)據(jù)處理及展示的獨(dú)立能力后，后臺(tái)就可以只針對(duì)數(shù)據(jù)邏輯進(jìn)行處理了绍绘，而這樣的后臺(tái)數(shù)據(jù)服務(wù)設(shè)計(jì)奶镶，不僅適用為網(wǎng)站開發(fā)提供數(shù)據(jù)支持，更適用于為移動(dòng)端提供數(shù)據(jù)支持陪拘，后臺(tái)不再需要關(guān)心數(shù)據(jù)展示的問題厂镇，也因此有更多的精力來處理并發(fā)請(qǐng)求及復(fù)雜的數(shù)據(jù)庫 I\O 等問題；左刽，后臺(tái)也不再需要模板引擎技術(shù)捺信，后臺(tái) MVC 就變成了 MC ；
也因?yàn)橛辛藢?duì)MVVM設(shè)計(jì)實(shí)現(xiàn)的這些框架欠痴，使前端工程師才有了應(yīng)有的編程地位迄靠，不再是一個(gè)縮在角落里聽從后臺(tái)程序員指揮的小角色秒咨，大量新項(xiàng)目的開發(fā)需要更多的前端工程師，而前端開發(fā)也走向了正規(guī)的工程化設(shè)計(jì)開發(fā)掌挚，目前各大公司對(duì)前端程序員的大量需求也得益于此拭荤，當(dāng)然前端工程師的收入也是水漲船高；
另：有一次和一個(gè)程序員聊天疫诽，他竟然天真的認(rèn)為MVVM是對(duì)MVC的替代升級(jí)舅世，我竟無言以對(duì)……
當(dāng)然，如果你看完了還不知道我在說什么奇徒，那么我就是在一本正經(jīng)的胡說八道……
知乎專欄：https://zhuanlan.zhihu.com/xilinglaoshi
歡迎關(guān)注? 西嶺老濕? 微信公眾號(hào)
