關(guān)于MVC與MVVM的一點理解(以及MVP)

mvc:

mvc中,c負責業(yè)務邏輯,完成業(yè)務邏輯以后,要求model改變狀態(tài)。在傳統(tǒng)
的設(shè)計中,很有可能把大量的代碼放到其中,讓mvc變成massive view controller.

究其原因,在于視圖與要求的模型不匹配,需要寫很多的代碼去獲取視圖需要的數(shù)據(jù)去填充視圖。這個時候,視圖模型這個東西就出現(xiàn)了。

在這幾天的nodejs+express的學習過程中,學到mvc這部分的時候,例子中運用了視圖模型這個概念,即ViewModel,剛開始對于這個新概念還是有一定誤解的,畢竟mvvm的東西也了解過一些。網(wǎng)上找了一些資料后發(fā)現(xiàn),這樣做是借鑒mvvm設(shè)計模式,這樣抽象以后,view只接受viewmodel,controller中獲取viwemodel即可,這樣就可以有效的瘦身controller,讓其專注邏輯。這部分是在學習express中感受到的,而在以前用sails做東西的時候,其實它默認并沒有借鑒這方面的東西,但是采用了一些其他方法瘦身controller,比如從controller中拆分出service層、storage層等,對于瘦身controller也是很有效的方法。

mvvm

現(xiàn)階段對于mvvm的了解還停留在angular、雙向綁定這些概念,對于以后想用vue構(gòu)建view,所以這方面還是有必要了解的。這部分在有空完成后端學習以后再補充吧。

ps:
另外想補充一點對于現(xiàn)階段express應用的組織,借鑒了sails的風格,首先將http請求封裝在route.js文件中,然后model文件存放模型,有必要的話建立viedmodel文件存放視圖模型,controller文件存放控制器,這樣做的話邏輯比較清晰,寫起來也會感覺比較舒服,因為有過一點sails項目的經(jīng)驗,另外可以仿照sails的config文件夾或者新建config.js存放相關(guān)內(nèi)容,這些根據(jù)實際需要配置即可。


用代碼以及圖更好地說明三者:

mv:

剛開始是把邏輯也放在view里的:

image.png
image.png

mvc:

用mvc實現(xiàn)上述功能:

image.png
image.png
image.png
image.png
image.png
image.png
image.png

mvp:

image.png
image.png
image.png
image.png
image.png

mvvm:

用vue作為例子:

image.png
image.png
image.png
image.png

其中,實現(xiàn)雙向綁定用的是數(shù)據(jù)劫持&發(fā)布-訂閱模式,在接下來的源碼學習中在詳細記錄。

image.png

參考資源:https://juejin.im/post/593021272f301e0058273468?utm_source=gold_browser_extension

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

推薦閱讀更多精彩內(nèi)容