從項目工程化的角度,談一下 MVC 與 MVVM

對于很多編程的初學者來說,MVC 的設計理念和 MVVM 的設計理念總是難以掌握,其實這種現象也屬正常,因為很多在初學階段的人,沒有經歷大型項目開發的經驗,更沒有對編程的工程化體系的發展及歷史進行過研究,更是少有人提及編程工程化的概念;其實,對于目前的各種設計理念,都是編程工程化發展的產物;

大家可以先看一下圖,這基本是我對編程工程化發展的一個了解,以一個大家最習以為常的網站作為工程項目的代表來展示,圖中的內容雖然可能并不完善,也不可能完全說明白工程發展的整個歷史,這僅僅是一個簡易的圖示:


正如上圖所示,在工程發展的第一個階段,工程師并沒有一個相對明確的分工,基本是出于一種 “啥活都干” 的階段,在這個階段中,出現了一種編程語言,他讓工程師可以在代碼中直接嵌入HTML、CSS、JS等前端代碼,可以直接連接數據進行CURD操作,不需要關心數據庫的讀寫壓力,可以與現有成熟的HTTP服務器合作,不需要關心客戶端的 HTTP 請求壓力(不管是數據庫還是http服務器,當時的實際壓力也沒有現今那么大),它屏蔽了各種繁雜的 I\O ,使工程師最大限度的以項目為中心,而且無需手動編譯,實時運行,開發速度也有了一個質的提升,時勢造英雄,它成了 “世界上最好的編程語言,沒有之一”,沒錯,它就是 PHP 。

WordPress 將這種開發模式推向了極致,成為混合嵌入式編程的典型代表;Discuz基本算是國內最為典型的代表了;

而隨著項目工程量的加大,項目代碼的復雜度隨之加大,一個人甚至5-10人的小型團隊,再也無法適應這種開發模式,于是出現了適應團隊協作開發的 MVC 模式,如下圖:


MVC設計模式的出現,在一定程度上依賴于另外一項關鍵技術的成熟,就是模板引擎;

其實模板引擎技術并不復雜,而是繁瑣,基本原理就是前端HTML中寫關鍵字符以期承載數據,然后再交由后臺將前端HTML代碼中的關鍵字符進行正則匹配,替換為真實數據;

模板引擎的關鍵點并不是技術,而是在一定程度上解脫了后臺程序員,他們不再寫頁面和JS腳本了,這些工作大部分交給專業的前端工程師來完成,后臺只需要在頁面完成后讀取并交由模板引擎進行二次處理即可;這基本就實現了代碼工程的分離;

而MVC的設計模式也是相對靈活的,對于小型技術團隊來說,C層與M層的分離其實并不徹底,邏輯與數據之間的處理大部分情況下依然交與后臺完成,邏輯層與數據層僅僅實現了代碼邏輯上的分離,并沒有實現工程上的分離;

但大型技術團隊中已經實現了邏輯與數據操作的分離,DBA(數據庫工程師)一般會提供數據操作中間件,以供C層根據業務邏輯調用處理數據;

而此時,PHP的優勢就顯得不是很明顯了,大量編程語言出現了同質化的現象,說好聽點應該是 百花齊放 ;

目前依然有大量項目在使用MVC的設計模式進行項目開發,而隨著移動互聯網的發展,MVC 設計模式的最大BUG也凸顯出來,它沒有從正真意義上實現前后端的分離,而是淺層次的實現了前后端工程上的分離,也就是后臺程序員不寫頁面代碼而已;這種模式,對于移動端設備,完全失去了意義,相同的業務邏輯和數據處理,網站需要一套代碼,針對移動設備又需要另外一套代碼,工程量翻倍不止;但在MVC的發展道路上,也有人試圖突破這種模式已期解決MVC的BUG,但歷史證明是不成熟的,就是不使用模板引擎,從服務器獲取靜態頁面后,使用大量的ajax獲取數據并更新到頁面,這種做法,確實實現了前后端工程及數據的徹底分離,為前端工程化的發展提供了關鍵性思路設想,而它最大的BUG就是需要前端程序員大量且繁瑣的操作DOM已向用戶展示數據,痛苦不堪,雖然jQuery 從一定程度上減緩了這種痛苦,但這并不是MVVM,所以 jQuery 也不是終點,但這種設計是對前端工程化發展具有歷史性意義的……

且看下圖:


我在上面的圖示中展示了兩個服務器,是想盡可能的為大家理清 MVVM 在整個項目開發中的作用和關鍵位置,真實項目開發中,可以是一臺或者多臺服務器,不要被圖示誤導;

其實 MVVM的設計,本質上就是解決了前端程序員大量繁瑣的操作DOM的問題,數據的請求獲取依然依賴于Ajax技術,但是,數據獲取后的展示,不再是操作DOM,而是交由中間的VM層來處理;

前端有了MVVM的設計思想后,終于實現了前后端工程及數據的徹底分離,而這種設計思想,目前也大量應用于各種新項目的開發,于是各種前端框架如雨后春筍般拔地而起,前端的ARV三大框架就是典型代表;前端有了數據處理及展示的獨立能力后,后臺就可以只針對數據邏輯進行處理了,而這樣的后臺數據服務設計,不僅適用為網站開發提供數據支持,更適用于為移動端提供數據支持,后臺不再需要關心數據展示的問題,也因此有更多的精力來處理并發請求及復雜的數據庫 I\O 等問題;,后臺也不再需要模板引擎技術,后臺 MVC 就變成了 MC ;

也因為有了對MVVM設計實現的這些框架,使前端工程師才有了應有的編程地位,不再是一個縮在角落里聽從后臺程序員指揮的小角色,大量新項目的開發需要更多的前端工程師,而前端開發也走向了正規的工程化設計開發,目前各大公司對前端程序員的大量需求也得益于此,當然前端工程師的收入也是水漲船高;

另:有一次和一個程序員聊天,他竟然天真的認為MVVM是對MVC的替代升級,我竟無言以對……

當然,如果你看完了還不知道我在說什么,那么我就是在一本正經的胡說八道……

文章首發: https://note.youdao.com/share/?id=f56ff8335c86122ec1e6eaa4208d033a&type=notebook#/cab4cff7705cc2198ff358350e909813

關于作者:https://note.youdao.com/share/?id=f56ff8335c86122ec1e6eaa4208d033a&type=notebook#/A4C7FB8100E1406FA298E9278059D56B

知乎專欄:https://zhuanlan.zhihu.com/xilinglaoshi

歡迎關注? 西嶺老濕? 微信公眾號

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,113評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,869評論 2 59
  • SSY說: 原來我一直做的是MVP呀 2015年2月 1日 11:57|#|引用 Simba說: 很好。寫的不錯。...
    程序員之路閱讀 3,920評論 4 7
  • 閱讀原因 因本人是邏輯思維APP的忠實聽眾,在羅胖推薦的書單里我都會選取自己感興趣的書進行閱讀。 這次選擇《爆裂》...
    踐行小吉閱讀 461評論 1 1
  • //第一個按鈕添加 function btn() { //彈窗添加功能 var inp = ''; var use...
    常婧帥閱讀 297評論 0 0