當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

“约见”面试官系列之常见面试题之第九十四篇之MVVM框架（建议收藏）

發(fā)布時間：2023/12/10 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 “约见”面试官系列之常见面试题之第九十四篇之MVVM框架（建议收藏）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一句話總結(jié)：vm層（視圖模型層）通過接口從后臺m層（model層）請求數(shù)據(jù)，vm層繼而和v（view層）實現(xiàn)數(shù)據(jù)的雙向綁定。

1、我大前端應(yīng)該不應(yīng)該做復(fù)雜的數(shù)據(jù)處理的工作？

2、mvc和mvvm的關(guān)系？

3、MVVM框架編碼實例？

4、前端框架MVVM出現(xiàn)的最大意義是什么？

5、應(yīng)用MVVM框架的vue.js框架的最主要作用是什么？

6、前端框架MVVM中的vm層是干嘛的？

7、MVVM最主要的特征是什么？

二、MVVM百度百科

三、前后端分手大師——MVVM 模式（轉(zhuǎn)）

簡而言之

組成部分

沒有什么是一個栗子不能解決的

四、不要聽吹牛逼什么前端MVVM框架就是好，其實都是一幫沒學(xué)好分層設(shè)計的搞出來的，讓你徹底看清前端MVVM的本質(zhì)（轉(zhuǎn)）

?一、總結(jié)（點擊顯示或隱藏總結(jié)內(nèi)容）

一句話總結(jié)：vm層（視圖模型層）通過接口從后臺m層（model層）請求數(shù)據(jù)，vm層繼而和v（view層）實現(xiàn)數(shù)據(jù)的雙向綁定。

1、我大前端應(yīng)該不應(yīng)該做復(fù)雜的數(shù)據(jù)處理的工作？

不應(yīng)該

只要后端保證對外接口足夠簡單就行了，我請求api，你把數(shù)據(jù)返出來，咱倆就這點關(guān)系，其他都扯淡。

后端：我們這里的業(yè)務(wù)邏輯和數(shù)據(jù)處理會非常復(fù)雜！
前端：關(guān)我屁事！

后端業(yè)務(wù)處理再復(fù)雜跟我們前端也沒有半毛錢關(guān)系，只要后端保證對外接口足夠簡單就行了，我請求api，你把數(shù)據(jù)返出來，咱倆就這點關(guān)系，其他都扯淡。

所以我這邊開發(fā)也是同樣的，前端就負責(zé)請求api就好，別的都不需要。

2、mvc和mvvm的關(guān)系？

改進版

數(shù)據(jù)分離

視圖模型層

c（控制層）被換成了vm（viewmodel）層

MVVM是Model-View-ViewModel的簡寫。它本質(zhì)上就是MVC 的改進版。

mvvm層實現(xiàn)了前后端更好的分離（前端需要的數(shù)據(jù)只需要請求后端的接口即可）

3、MVVM框架編碼實例？

扯了這么多，并沒有什么卵用。千言萬語不如一個栗子來的干脆，下面用一個 Vue 實例來說明 MVVM 的具體表現(xiàn)。

Vue 的 View 模板：

<div id="app"><p>{{message}}</p><button v-on:click="showMessage()">Click me</button> </div>

Vue 的 ViewModel 層（下面是偽代碼）：

服務(wù)端的 Model 層（省略業(yè)務(wù)邏輯處理，只描述對外接口）：

{"url": "/your/server/data/api","res": {"success": true,"name": "IoveC","domain": "www.cnblogs.com"} }

這就是完整的 MVVM 編程模式。

4、前端框架MVVM出現(xiàn)的最大意義是什么？

開發(fā)效率

前后端業(yè)務(wù)邏輯分離

接口

MVVM 的出現(xiàn)促進了 GUI 前端開發(fā)與后端業(yè)務(wù)邏輯的分離，極大地提高了前端開發(fā)效率。

MVVM用接口實現(xiàn)了前后端數(shù)據(jù)的通信，這樣可以使前后端之間的業(yè)務(wù)邏輯沒有什么關(guān)系。

MVVM在感覺上要比mvc模式前后端要分的更開

5、應(yīng)用MVVM框架的vue.js框架的最主要作用是什么？

雙向數(shù)據(jù)綁定

前端數(shù)據(jù)的統(tǒng)一

前端數(shù)據(jù)的統(tǒng)一：前端應(yīng)用相同數(shù)據(jù)的位置實現(xiàn)了數(shù)據(jù)的統(tǒng)一
雙向數(shù)據(jù)綁定：綁定后vue好dom數(shù)據(jù)保持統(tǒng)一，一動全動，是前端的

雙向數(shù)據(jù)綁定中的兩向分別為 view和viewmodel。

6、前端框架MVVM中的vm層是干嘛的？

狀態(tài) 行為

DOM操作

ViewModel 是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層，前端開發(fā)者對從后端獲取的 Model 數(shù)據(jù)進行轉(zhuǎn)換處理，做二次封裝，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的，比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(tài)（展示），而頁面加載進來時發(fā)生什么，點擊這一塊發(fā)生什么，這一塊滾動時發(fā)生什么這些都屬于視圖行為（交互），視圖狀態(tài)和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。由于實現(xiàn)了雙向綁定，ViewModel 的內(nèi)容會實時展現(xiàn)在 View 層，這是激動人心的，因為前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經(jīng)把最臟最累的一塊做好了，我們開發(fā)者只需要處理和維護 ViewModel，更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新，真正實現(xiàn)數(shù)據(jù)驅(qū)動開發(fā)。看到了吧，View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)，而是 ViewModel 的數(shù)據(jù)，由 ViewModel 負責(zé)與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關(guān)重要的，它是前后端分離方案實施的重要一環(huán)。

View一般就是我們平常說的HTML文本的Js模板，里面可以嵌入一些js模板的代碼，比如Mustache，比如jstl類似的模板偽代碼

ViewModule層里面就是我們對于這個視圖區(qū)域的一切js可視業(yè)務(wù)邏輯，舉個例子，比如圖片走馬燈特效，比如表單按鈕點擊提交，這些自定義事件的注冊和處理邏輯都寫在ViewModule里面了

Module就更簡單了，就是對于純數(shù)據(jù)的處理，比如增刪改查，與后臺CGI做交互

7、MVVM最主要的特征是什么？

前后端分離

前后端分手大師——MVVM 模式

或者說前后端更好的分離（接口來實現(xiàn)前后端的通信）

回到頂部

二、MVVM百度百科

MVVM是Model-View-ViewModel的簡寫。它本質(zhì)上就是MVC 的改進版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開。當(dāng)然這些事 ViewModel 已經(jīng)幫我們做了，它可以取出 Model 的數(shù)據(jù)同時幫忙處理 View 中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。微軟的WPF帶來了新的技術(shù)體驗，如Silverlight、音頻、視頻、3D、動畫……，這導(dǎo)致了軟件UI層更加細節(jié)化、可定制化。同時，在技術(shù)層面，WPF也帶來了諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結(jié)合的應(yīng)用方式時發(fā)展演變過來的一種新型架構(gòu)框架。它立足于原有MVP框架并且把WPF的新特性糅合進去，以應(yīng)對客戶日益復(fù)雜的需求變化。

外文名

Model-View-ViewModel

簡????稱

MVVM

例????如

Silverlight、音頻

隸????屬

微軟

MVVM優(yōu)點

低耦合?可重用性

回到頂部

三、前后端分手大師——MVVM 模式（轉(zhuǎn)）

轉(zhuǎn)自：前后端分手大師——MVVM 模式 - DOM哥 - 博客園
https://www.cnblogs.com/iovec/p/7840228.html

簡而言之

之前對 MVVM 模式一直只是模模糊糊的認識，正所謂沒有實踐就沒有發(fā)言權(quán)，通過這兩年對 Vue 框架的深入學(xué)習(xí)和項目實踐，終于可以裝B了有了撥開云霧見月明的感覺。

Model–View–ViewModel(MVVM) 是一個軟件架構(gòu)設(shè)計模式，由微軟 WPF 和 Silverlight 的架構(gòu)師 Ken Cooper 和 Ted Peters 開發(fā)，是一種簡化用戶界面的事件驅(qū)動編程方式。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構(gòu)師）于2005年在他的博客上發(fā)表。

MVVM 源自于經(jīng)典的 Model–View–Controller（MVC）模式（期間還演化出了 Model-View-Presenter（MVP）模式，可忽略不計）。MVVM 的出現(xiàn)促進了?GUI 前端開發(fā)與后端業(yè)務(wù)邏輯的分離，極大地提高了前端開發(fā)效率。MVVM 的核心是 ViewModel 層，它就像是一個中轉(zhuǎn)站（value converter），負責(zé)轉(zhuǎn)換 Model 中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，該層向上與視圖層進行雙向數(shù)據(jù)綁定，向下與 Model 層通過接口請求進行數(shù)據(jù)交互，起呈上啟下作用。如下圖所示：

MVVM模式

MVVM 已經(jīng)相當(dāng)成熟了，主要運用但不僅僅在網(wǎng)絡(luò)應(yīng)用程序開發(fā)中。KnockoutJS 是最早實現(xiàn) MVVM 模式的前端框架之一，當(dāng)下流行的 MVVM 框架有 Vue，Angular 等。

組成部分

簡單畫了一張圖來說明 MVVM 的各個組成部分：

MVVM分層示意圖

分層設(shè)計一直是軟件架構(gòu)的主流設(shè)計思想之一，MVVM 也不例外。

# View 層

View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構(gòu)建，為了更方便地展現(xiàn) ViewModel 或者 Model 層的數(shù)據(jù)，已經(jīng)產(chǎn)生了各種各樣的前后端模板語言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用來構(gòu)建用戶界面的內(nèi)置模板語言。

# Model 層

Model 是指數(shù)據(jù)模型，泛指后端進行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，主要圍繞數(shù)據(jù)庫系統(tǒng)展開。后端的處理通常會非常復(fù)雜：

前后端對比

后端：我們這里的業(yè)務(wù)邏輯和數(shù)據(jù)處理會非常復(fù)雜！
前端：關(guān)我屁事！

# ViewModel 層

沒有什么是一個栗子不能解決的

扯了這么多，并沒有什么卵用。千言萬語不如一個栗子來的干脆，下面用一個 Vue 實例來說明 MVVM 的具體表現(xiàn)。

Vue 的 View 模板：

<div id="app"><p>{{message}}</p><button v-on:click="showMessage()">Click me</button> </div>

Vue 的 ViewModel 層（下面是偽代碼）：

服務(wù)端的 Model 層（省略業(yè)務(wù)邏輯處理，只描述對外接口）：

{"url": "/your/server/data/api","res": {"success": true,"name": "IoveC","domain": "www.cnblogs.com"} }

這就是完整的 MVVM 編程模式。

代碼執(zhí)行之后雙向綁定的效果如下:

Vue實現(xiàn)的響應(yīng)的數(shù)據(jù)綁定

嘿嘿，前后端可以成功分手了，以后再也不用關(guān)心后端個錘子開發(fā)進度\暴怒臉，復(fù)雜實現(xiàn)，blabla...，盡情享用前端如絲般順滑的開發(fā)快感吧:)

四、不要聽吹牛逼什么前端MVVM框架就是好，其實都是一幫沒學(xué)好分層設(shè)計的搞出來的，讓你徹底看清前端MVVM的本質(zhì)（轉(zhuǎn)）

轉(zhuǎn)自：不要聽吹牛逼什么前端MVVM框架就是好，其實都是一幫沒學(xué)好分層設(shè)計的搞出來的，讓你徹底看清前端MVVM的本質(zhì) - 薛端陽 - 博客園
https://www.cnblogs.com/xueduanyang/p/3601471.html

最近前端圈子里面，發(fā)現(xiàn)大家都在熱炒概念，什么knockout，angularJs，都被捧成神了，鄙人不才，最近心情也不好，特地寫這篇文章來找罵

寫代碼的碼農(nóng)都知道，Java社區(qū)雖然不是一個提出分層思想的，確實貫徹的最好的，如今是個Java開發(fā)都不會不知道SSH的開發(fā)模式，從MVC到MVVM的概念的熱炒，其實真沒什么技術(shù)進步

先看什么是MVVM

View一般就是我們平常說的HTML文本的Js模板，里面可以嵌入一些js模板的代碼，比如Mustache，比如jstl類似的模板偽代碼

Module就更簡單了，就是對于純數(shù)據(jù)的處理，比如增刪改查，與后臺CGI做交互

那么什么是MVVM框架呢？？一般他們都是這么做的

1.? 定義一串所謂的偽模板代碼，例如通過className標(biāo)注，或者自定義tag的方式，將一段html文本區(qū)域給標(biāo)注聲明起來，意思就是喊一嗓子，“喂，兄弟們，這塊地方我占了，要拉屎去別處拉去”

2.??通過類似jstl之類lamda表達式，來做js模板，“拜托伙計，天堂有路你不走，非要自己搞一套，你就不能暴露接口讓大家用自己的模板語言，比如Mustache或者jtpl嗎？”

3.? 很傻比的封裝一串自己的所謂數(shù)據(jù)模塊組件，與不同類型的數(shù)據(jù)源做數(shù)據(jù)傳輸和適配，一般都不會分層很清晰，加入后臺數(shù)據(jù)字段改了，寫框架的都沒腦子的，從來不做數(shù)據(jù)字段的自定義適配（舉個例子，原來后臺傳遞的字段是person.userName，現(xiàn)在改成了小寫，person.username，你就傻逼的去吧模板再改一下吧，其實要解決這個問題，非常簡單，在MVVM層中引入一層DO，領(lǐng)域?qū)ο髮?#xff0c;Module到DO之間還有一層轉(zhuǎn)換就可以搞定這個問題）

4.? 非不暴露自己的自定義事件模型，就是那個觀察者模式啦，自己亂七八招在頁面上綁定一堆form change之類的事件，以實現(xiàn)View與Module的單向綁定

5.? 所謂的雙向綁定，也就是OOP語言中早被爛透了的getter，setter模型，ES5+可以用defineProperty，低版本就需要自己在js object賦值的時間做寫死代碼方式的處理了

我們再來看細節(jié)

1. 雙向綁定

號稱是最難理解的地方，其實是框架的作者根本就沒理解Java社區(qū)對于軟件開發(fā)分層理解的精髓

標(biāo)準(zhǔn)的數(shù)據(jù)驅(qū)動開發(fā)，應(yīng)該如上圖所示，在一個View的生命周期內(nèi)，一個ViewModule會管理一個DomainObject（業(yè)務(wù)模型），一個DO可能包括多個Module數(shù)據(jù)模型，一個Module可能來自多個數(shù)據(jù)源，而不是想很多所謂的MVVM框架那樣強迫一個M來一個數(shù)據(jù)源

按照上圖標(biāo)準(zhǔn)分層方式來劃分的好處，在于，邏輯清晰，Module層粒度夠細，可以被多次復(fù)用

DO層與VM層View層屬于一一對應(yīng)關(guān)系，方便對數(shù)據(jù)做增刪改查的同步

每一層應(yīng)該是獨立的，非一定要使用MVVM框架的緊耦合，可以用自己使用不同的js插件或者模塊實現(xiàn)MVVM

我們拋棄框架，單純的看數(shù)據(jù)，其實我們要解決的問題很簡單

a) 當(dāng)DO對象屬性放生變化時候，通知View更新

b) 當(dāng)View上表單值放生變化時，通知DO更新，并異步通知隊列同步到數(shù)據(jù)源

先來看問題a，這個最簡單，DO是一個基本的Javascript Object，我們在View上的模板顯示是這個Object.property，

改變一個Object對象的方式無非幾種，一種是

a) 顯示Object.property = ‘我是傻逼’

b) xxxx.methodName(Object, ‘property’, ‘我是傻逼’)

c) xxxx.merge(Object, {‘property’: ‘我是傻逼’})

如果是a的情況，ES5+，可以通過設(shè)置Object.defefineProperty(‘property’,{set: functiono(){},get:function(){}})，來做賦值和取值的監(jiān)控觸發(fā)

對于IE8一下，因為js不支持運算符重載，所以暫時沒有好的辦法，所以如果只考慮移動端的話，直接defineProperty就全部搞定，如果是要考慮PC的話，就不建議開發(fā)者使用直接賦值的方式，參考java的開發(fā)模式，也是推薦OOP時候，使用set方式賦值，而不是直接=賦值

當(dāng)然了，如果你非要兼容IE8一下的話，用定時器做輪訓(xùn)，配合for in 反射，通過臟數(shù)據(jù)與原始備份對比的方法也是一種辦法，不過這種辦法在當(dāng)前頁面非常耗性能，由于IE8一下不支持多線程，HTML5 worker，如果未來flash 插件支持多線程的話，倒是可以用js和flash插件做線程交互的方式做臟數(shù)據(jù)檢測

如果是b的情況，那就太簡單了，在methodName里面觸發(fā)對于該屬性修改的回調(diào)即可，如何注冊回調(diào)呢，首先我們要實現(xiàn)一個類似Dom Event的自定義對象的Event模型，然后通過類似Dom Event的注冊事件方式，注冊觀察者，訂閱事件，當(dāng)執(zhí)行了methodName時候，發(fā)送消息，通知所有訂閱者執(zhí)行回調(diào)

如果是c的情況，類似b一樣處理

這樣一看，雙向數(shù)據(jù)綁定的問題就非常簡單的解決了

我們再來看另外一個MVVM的問題，非簡單數(shù)據(jù)模型，復(fù)合數(shù)據(jù)模型（DO的屬性值不是一個string，而是一個Object，且這個Object可能還嵌套多層Obejct的時候）的處理辦法，這個一般的MVVM框架直接不考慮，或者通過長字段名的方式繞過這個問題

這個問題是這樣的，早在10幾年前，java structs框架流行的時候就出現(xiàn)了，當(dāng)一個表單，出現(xiàn)需要對兩個Java Bean做update操作時候，一個bean是user，一個bean是成績

對應(yīng)的表單字段名，就是 user表.name，user表.id，score表.point，

在struct2里面，處理邏輯是把 “點”作為特殊符號，在做form序列化時候，非包含點的字段的值都是string，包含點的字段是一個Object，比如剛才的form序列化之后結(jié)果就是 { user: {id :’’ , name: ‘’}, score: {id: ‘’, point: ‘’}}

同理在MVVM實現(xiàn)時，也是一樣，認為點是分割對象的關(guān)鍵字，這樣我們就可以實現(xiàn)把多個對象嵌套到View模板里面，實現(xiàn)復(fù)合Object的雙向映射

最后一個問題，也就是高級MVVM編程里面必須要面對的問題，就是自定義事件的廣播和冒泡，我看過大多數(shù)的MVVM框架，對于廣播，這塊有部分實現(xiàn)了，但是對于冒泡一個都沒實現(xiàn)

其實這個真的不是很復(fù)雜的問題，事件廣播，這個最簡單，三歲小孩都能寫，我們在注冊回調(diào)時候，不是有一個事件隊列嗎，在回調(diào)時候，通過特殊標(biāo)記位，控制是否繼續(xù)擴散廣播，還是執(zhí)行完畢終止即可

而自定義事件的冒泡要騷騷復(fù)雜一些，他是由于OOP編程里面的繼承和包含關(guān)系引申而來的，我們先說包含關(guān)系，前面說了MVVM框架里面，都會聲明一塊地方為VM控制區(qū)域，一般垃圾的框架都不會考慮，VM嵌套的情況，因為圖簡單嗎

但是實際開發(fā)過程中，你會遇到很多這種情況，就是VM復(fù)用的問題，一般都是發(fā)現(xiàn)使用了MVVM框架之后，發(fā)現(xiàn)VM定義的太大，沒法復(fù)用，如果要復(fù)用VM就又發(fā)現(xiàn)VM定義的太小，出現(xiàn)需要VM嵌套的情況沒法用

其實簡單，我們知道DOM事件是有冒泡的，VM同理，只要在自定義事件模型里面定義了VM的父子關(guān)系，或者同級關(guān)聯(lián)關(guān)系，即可實現(xiàn)VM的自定義事件的廣播和冒泡，另外也解決了VM復(fù)用的問題，可以讓代碼顆粒度更小

另外那種，聲明式編程這種老掉牙的概念就真的別在吵了，還記得10幾年前的structs的tag嗎，js圈子里面這種通過自定義tag，自定義className，自定義屬性，掛載js來自定識別執(zhí)行邏輯的例子大把皆是，還是建議廣大前端開發(fā)，不要浮躁，多像java社區(qū)學(xué)習(xí)，多多從根本上了解分層理念的精髓，不要聽了吹牛逼，聽風(fēng)就是雨，還是多了解原理才是真理啊

本面試題為前端常考面試題，后續(xù)有機會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第九十四篇之MVVM框架（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： eoLinker-API_Shop_知识
下一篇：网络通信原理及流程