網頁的MVC和MVVM是什麼? 每個人都各自解讀是不是搞錯了什麼

亂叫阿醇
Jul 13, 2023

--

在軟體業界工作,一定聽過MVC這個名詞,但很多人都會把前後分離 & MVC MVVM 掛勾在一起講,我認為它們是兩個不同的範圍

前後分離架構 不等於 MVVM !
前後分離架構 不等於 MVVM !
前後分離架構 不等於 MVVM !

懶人包:

MVC :
是一個設計概念(design pattern) ,任何程式語言都能實作,總之就是各自做好自己的事情不要都混在一起

網頁前後分離 :
是指前端和後端各自分家(各自可以用不同程式語言) 透過AJAX 技術做出動態網頁

看完下面1篇文章 + 1部影片 應該能釐清一些觀念

Huli-前後端分離與 SPA

mvc.png (1936×1506) (coderbridge.com)

前端

前端可以寫出以 MVC or MVVM 設計模式的網頁
舉例:

MVC:
使用 html + js(jquery) + css 在js將 "邏輯" 和 "操作UI" 和 "打API拿資料" 拆開來寫
畫面歸畫面 邏輯歸邏輯 不要混在一起寫,比較好維護
會需要寫變更UI的code

("#my-modal").show()

當然也可以使用 .NET MVC 或是 laravel 等框架實現前端打API的前端

//讀者們不坊問問 Chat GPT
vanilla js 可以寫出 MVC架構嗎?

MVVM:
使用vue框架,透過vue的vm機制達到 "單項綁定" 和 "雙向綁定"
透過資料驅動畫面,省去開發者還要主動寫變更UI的code

只要變更資料畫面就自動渲染 ,常見的框架

後端

後端目前就我所知就只有 MVC

因為沒有 View(畫面),只要管好邏輯(Controller)和資料(DB Model)就好

以上是我的想法,如果有說錯的地方再麻煩告知~

延伸閱讀

能否举例说明:MVC和前后端分离的关系? — 知乎 (zhihu.com)

P.S 我認為 React 和 Vue 算是框架,當然很多人會覺得他們是 Library,但一般在開發都是用 create-react-app 或是 npm init vue@latest 產生一堆資料夾所以對我來說還是有規範開發者

--

--

亂叫阿醇
亂叫阿醇

Written by 亂叫阿醇

0 Followers

這邊主要分享自己查資料找不到的資訊,若之後有人遇到相同的問題便可省去不少時間。

No responses yet