問(wèn)題描述

在徐飛的這篇文章中，第五節(jié)：“為什么MVVM是一種很好的選擇”中，有提到業(yè)務(wù)模型和視圖模型，他們具體指什么？

問(wèn)題解答

【業(yè)務(wù)模型】和【領(lǐng)域模型】較為相似，可以指用于表達(dá)業(yè)務(wù)內(nèi)容的數(shù)據(jù)。例如淘寶的業(yè)務(wù)模型是【商品】，博客的業(yè)務(wù)模型是【博文】，推特的業(yè)務(wù)模型是【推文】。可以理解為經(jīng)典 MVC 中的 Model，包含了名稱、描述、時(shí)間、作者、價(jià)格等【真正意義上的】數(shù)據(jù)字段內(nèi)容。

而【視圖模型】則是 MVVM 興盛后的新概念。要實(shí)現(xiàn)一個(gè)完整的 Web App，除了數(shù)據(jù)外，還有 UI 交互中非常多的【狀態(tài)】。例如：彈框是否打開(kāi)、用戶是否正在輸入、請(qǐng)求 Loading 狀態(tài)是否需要顯示、圖表數(shù)據(jù)分類是否需要顯示追加字段、和用戶輸入時(shí)文本的大小和樣式的動(dòng)態(tài)改變……這些和具體數(shù)據(jù)字段無(wú)關(guān)，但對(duì)前端實(shí)際業(yè)務(wù)場(chǎng)景非常重要的視圖狀態(tài)，可以認(rèn)為是一種【視圖模型】。在 Vue 一類的 MVVM 庫(kù)中，上述例子中的狀態(tài)都能夠用 JS 變量來(lái)表示和控制，這同樣可以認(rèn)為是一種數(shù)據(jù)模型。

因此，業(yè)務(wù)模型和視圖模型在前端都是十分重要的概念。在 MVVM 解決了業(yè)務(wù)模型數(shù)據(jù)到頁(yè)面之間的綁定關(guān)系后，Redux 等狀態(tài)管理庫(kù)想要解決的則是富交互頁(yè)面中，視圖模型狀態(tài)極度膨脹所帶來(lái)的一系列問(wèn)題了。對(duì)這些模型有更深的理解，實(shí)際上也有助于理解前端目前的發(fā)展方向。

舉個(gè)栗子你就懂

//業(yè)務(wù)模型function UserBM(){ this.username; this.password; this.address;}//視圖模型function UserVM(){ this.username; this.password; this.address; this.isShowHelloMessage; this.isShowAddress;}