柚子快報(bào)邀請碼778899分享：前端 MVVM風(fēng)格架構(gòu)

http://yzkb.51969.com/

MVVM風(fēng)格架構(gòu)

為什么會(huì)出現(xiàn)MVVMMVVM架構(gòu)的最佳實(shí)踐MVC、MVP和MVVM開發(fā)模式比較MVC的優(yōu)點(diǎn)：MVC的缺點(diǎn)：

MVVM是Model-View-ViewModel的簡寫。它本質(zhì)上就是MVC的改進(jìn)版。MVVM就是將其中的View的狀態(tài)和行為抽象化，讓我們將視圖UI和業(yè)務(wù)邏輯分開。當(dāng)然這些事ViewModel已經(jīng)幫我們完成了，它可以取出Model的數(shù)據(jù)同時(shí)幫忙處理View中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。微軟公司的WPF帶來了新的技術(shù)體驗(yàn)，如Silverlight、聲頻、視頻、3D、動(dòng)畫……這導(dǎo)致了軟件UI層更加細(xì)節(jié)化、可定制化。

同時(shí)，在技術(shù)層面，WPF也帶來了很多新特性，如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等。MVVM框架的由來便是MVP（Model-View-Presenter）模式與WPF結(jié)合應(yīng)用方式而發(fā)展演變過來的一種新型架構(gòu)框架。它立足于原有MVP框架并且把WPF的新特性糅合進(jìn)去，以應(yīng)對客戶日益復(fù)雜的需求變化。

為什么會(huì)出現(xiàn)MVVM

MVC是Model-View-Controller的縮寫，即模型-視圖-控制器，一個(gè)標(biāo)準(zhǔn)的Web應(yīng)用程式由三部分組成。 View：用來把數(shù)據(jù)以某種方式呈現(xiàn)給用戶。 Model：就是數(shù)據(jù)。

Controller：接收并處理來自用戶的請求，并將Model返回給用戶。 在HTML5還未流行起來的那些年，MVC作為Web應(yīng)用的最佳實(shí)現(xiàn)方式是可以的，這是因?yàn)楫?dāng)時(shí)Web應(yīng)用的View層相對來說比較簡單，前端所需要的數(shù)據(jù)在后端基本上可以處理好，View層主要做一下展示，那時(shí)候提倡的是用Controller來處理復(fù)雜的業(yè)務(wù)邏輯，所以View層相對來說比較輕量，也就是所謂的瘦客戶端思想。

相對HTML4，HTML5最大的亮點(diǎn)是它為移動(dòng)設(shè)備提供了一些非常有用的功能，使得HTML5具備了開發(fā)App的能力，HTML5開發(fā)App最大的好處就是跨平臺(tái)、快速迭代和上線，節(jié)省人力成本和提高效率，因此很多企業(yè)開始對傳統(tǒng)的App進(jìn)行改造，逐漸采用HTML5代替Native。Native使用原生系統(tǒng)內(nèi)核，相當(dāng)于直接在系統(tǒng)上操作，是我們傳統(tǒng)意義上的軟件，但是HTML5最大的優(yōu)點(diǎn)是可以跨平臺(tái)，開發(fā)容易，而Native需要用Android的語言和iOS的語言分別寫，但HTML5只需要開發(fā)一套。到2015年，市面上大多數(shù)App或多或少都嵌入了HTML5頁面。既然要用HTML5來構(gòu)建App，那么View層所做的事情就不僅僅是簡單的數(shù)據(jù)展示了，它不僅要管理復(fù)雜的數(shù)據(jù)狀態(tài)，還要處理移動(dòng)設(shè)備上各種操作行為等。因此，前端需要工程化，也需要一個(gè)類似于MVC的框架來管理這些復(fù)雜的邏輯，使開發(fā)更加高效。但這里的MVC又稍微發(fā)生了一些變化。 （1）View：UI布局，用于展示數(shù)據(jù)。 （2）Model：管理數(shù)據(jù)。 （3）Controller：響應(yīng)用戶操作，并將Model更新到View上。 這種MVC架構(gòu)模式對于簡單的應(yīng)用是沒有問題的，也符合軟件架構(gòu)的分層思想。但實(shí)際上，隨著HTML5的不斷發(fā)展，人們更希望使用HTML5開發(fā)的應(yīng)用能和Native媲美，或者接近于原生App的體驗(yàn)效果，而前端應(yīng)用的復(fù)雜程度已今非昔比。這時(shí)前端開發(fā)就暴露出了3個(gè)痛點(diǎn)問題： （1）開發(fā)者在代碼中大量調(diào)用相同的DOM API，處理煩瑣，操作冗余，使得代碼難以維護(hù)。 （2）大量的DOM操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗(yàn)。 （3）當(dāng)Model頻繁發(fā)生變化時(shí)，開發(fā)者需要主動(dòng)更新到View；當(dāng)用戶的操作導(dǎo)致Model發(fā)生變化時(shí)，開發(fā)者同樣需要將變化的數(shù)據(jù)同步到Model中，這樣的工作不僅煩瑣，而且很難維護(hù)復(fù)雜多變的數(shù)據(jù)狀態(tài)。 MVVM由Model、View、ViewModel 3部分構(gòu)成，Model層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI展現(xiàn)出來；ViewModel同步View和Model的對象。

在MVVM架構(gòu)下，View和Model之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)的變化會(huì)同步到Model中，而Model數(shù)據(jù)的變化也會(huì)立即反映到View上。

ViewModel通過雙向數(shù)據(jù)綁定把View層和Model層連接起來，而View和Model之間的同步工作完全是自動(dòng)的，無須人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM，也不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由MVVM統(tǒng)一管理。

MVVM架構(gòu)的最佳實(shí)踐

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有以下幾大優(yōu)點(diǎn)。

（1）低耦合：視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以被綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，同樣當(dāng)Model變化的時(shí)候View也可以不變。 （2）可重用性：可以把一些視圖邏輯放在一個(gè)ViewModel里面作為可重用的控件，在具體的實(shí)例中可以引入使用，讓很多View重用這段視圖邏輯。 （3）獨(dú)立開發(fā)：開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)，通過約束的接口規(guī)范可以進(jìn)行簡單的數(shù)據(jù)對接。 （4）可測試：界面向來比較難于測試，而現(xiàn)在測試可以針對具體的頁面控件來寫代碼，也可以在不依賴于后端的基礎(chǔ)上，直接通過工具或者靜態(tài)數(shù)據(jù)進(jìn)行測試。

MVC、MVP和MVVM開發(fā)模式比較

MVC開發(fā)模式 MVC開發(fā)模式是View接收到用戶的指令，傳遞給Controller，然后對模型進(jìn)行修改或者查找底層數(shù)據(jù)，最后把改動(dòng)渲染到視圖上

MVC的優(yōu)點(diǎn)：

（1）耦合性低，視圖層和業(yè)務(wù)層分離，這樣便允許更改視圖層代碼而不用重新編譯模型和控制器代碼。 （2）重用性高。 （3）生命周期維護(hù)成本低。 （4）MVC使開發(fā)和維護(hù)用戶接口的技術(shù)含量降低。 （5）可維護(hù)性高，分離視圖層和業(yè)務(wù)邏輯層也使得Web應(yīng)用更易于維護(hù)和修改。 （6）部署快。

MVC的缺點(diǎn)：

（1）不適合小型及中等規(guī)模的應(yīng)用程序，花費(fèi)大量時(shí)間將MVC應(yīng)用到規(guī)模并不是很大的應(yīng)用程序通常會(huì)得不償失。 （2）視圖與控制器間過于緊密連接，視圖與控制器是相互分離的，但卻是聯(lián)系緊密的部件，視圖沒有控制器的存在，其應(yīng)用是很有限的，反之亦然，這樣就妨礙了它們的獨(dú)立重用。 （3）視圖對模型數(shù)據(jù)的低效率訪問，依據(jù)模型操作接口的不同，視圖可能需要多次調(diào)用才能獲得足夠的顯示數(shù)據(jù)。對未變化數(shù)據(jù)的不必要的頻繁訪問，也將降低操作性能。

柚子快報(bào)邀請碼778899分享：前端 MVVM風(fēng)格架構(gòu)

http://yzkb.51969.com/

文章鏈接