前端 MVC 已死嗎?

slm86 8年前發布 | 14K 次閱讀 MVC模式

越來越多的前端開發者采用 單向架構 。那么經典的“模型-視圖-控制(MVC)”前景如何呢?

為了理解我們是怎么到了現在的境地,不妨回首一下前端架構的演化之路。

過去四年,我傾力于大量的網頁項目,花了很多時間做前端架構、將不同的框架整合進來。

2010 年之前, JavaScript ——就是那個寫出 jQuery 的編程語言——主要用來給傳統網站加上 DOM 的操作。開發者似乎并不關心“架構”這個東西。像“ 暴露模塊模式 ”對組織我們的代碼庫就夠用了。

如當下關于前端架構與后端架構那樣的討論最早是在 2010 年末段出現,因為那時開發者才開始嚴肅探討“單頁應用程序”的概念。也是在那時,像 Backbone 、 Knockout 那樣的框架開始盛行。

構建這些框架所用的原理在當時頗為新潮,所以設計者不得不從別處取經。服務器端架構已經成熟的做法被他們借鑒了過來。而當時服務器端所有流行的框架無不用到了 MVC 模型( 因為有多種衍變 ,也叫做 MV*)。

React.js 以“渲染庫”身份首次亮相時,遭受了眾多開發者的譏諷,他們認為 React 用 JavaScript 處理 HTML 的方式“一反直覺”。然而他們忽略了 React 的一個重要貢獻——將 基于組件的架構 帶到前端世界。

React 并不是“組件”的發明者,但它的確在這領域深鑿了一步。

非死book 把 React 當作“MVC 中的 V”來宣傳,恐怕也是忽略了它在架構上作出的重大突破。

說句題外話,至今我還對評閱一個 Angular 1.x 和 React 并存 的代碼庫心有余悸。

2015 年,我們的思維方式有個大跳變——從熟悉的 MVC 模式轉向 單向架構和數據流 ,它發源于 Flux 和 “函數響應式編程”(Functional Reactive Programming),支持的工具有 Redux 和 RxJS 。

那么 MVC 到底哪里出了毛病?

也許 MVC 依舊是服務器端的最佳實踐。如 Rails 、 Django 這樣的框架用起來不失為一種樂趣。

問題的根源,是 MVC 在服務端引介進來的原理和分離做法到了客戶端并不完全一樣。

控制層-視圖層的耦合

下面的圖解釋了在服務器端視圖層是如何與控制層交互的。它們之間只有兩處接觸,都在客戶端與服務器端彼此的邊界上。

服務器端的 MVC:

但你來看客戶端的 MVC ,就會發現問題。控制器很像我們所說的“背后的代碼”,極度依賴前面的視圖層。而在絕大多數框架中,控制器甚至是在視圖層創建的(比如 Angular 的 ng-controller 就是這樣的)。

客戶端的 MVC:

此外,你再想想 單一職責原則 ,客戶端的 MVC 明顯打破了這條原則。客戶端的控制器代碼在某種程度上既負責了 事件處理 又在摻和 業務邏輯

“臃腫的模型層”

細想一下在客戶端你放入模型層的數據是什么樣的?

其一,你有一些如 users 、 products 那樣的數據,代表你的 應用程序狀態 。再者,你還需要保存 UI 狀態 ——像 showTab 、 selectedValue 那樣的東西。

跟控制器類似,模型層也打破了單一職責原則,因為你沒有方法將 UI 狀態應用程序狀態 的管理分離開來。

那么“組件”又有什么獨到之處呢?

組件就是 視圖 + 事件處理 + UI 狀態

下面的示意圖展示的是如何分離原始的 MVC 模型以實現組件。紅線以上的部分正是 Flux 所致力解決的:管理 應用程序狀態業務邏輯

隨著 React 和 基于組件的架構 的流行,我們見到越來越多人使用 單向架構 來管理應用程序狀態。

它們兩者如此契合,其中一個原因是它們完全涵蓋了經典的 MVC 方法,并且在構建前端架構時提供了更好的方法來分離項目要點。

然而這不再是 React 的獨家特色。看看 Angular 2 ,你就會發現它也應用了完全一樣的模型,盡管你可能對管理應用程序狀態有不同看法,如 ngrx/store 。

MVC 過去在客戶端所能做的已經做到最好了。但從一開始它便注定落敗,我們僅僅需要一些時日才能看透。經過這五年的發展,前端架構演變成現如今的模樣。你回首一下,花五年時間等來一個最佳實踐的橫空出世也不算太長吧。

MVC 在最初是很有必要的,因為我們的前端應用程序越來越龐大、越來越繁雜,我們不知道該如何組織它們。我覺得 MVC 做了它該做的,是時候功成身退了;同時也留下了前車之鑒,關于把一種環境(服務器)的好做法移植到另一種環境(客戶端)的前車之鑒。

未來偏向哪種架構?

我認為短時間內我們不會再回到經典的 MVC 架構來開發前端應用程序。

當越來越多的開發者見識了組件和單向架構的長處,大家的焦點就會沿著這條路向前聚集到如何開發更好的工具和庫上面。

這類架構會是接下來五年內最好的解決方案嗎?——很有可能,不過話又說回來,沒有什么是絕對肯定的。

五年前,沒人能夠預測我們如今會如何寫應用程序。所以我覺得現在就對未來下定論不太保險。

 

來自:http://www.zcfy.cc/article/is-model-view-controller-dead-on-the-front-end-1603.html

 

 本文由用戶 slm86 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!