- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發(fā)中心編著
- 778字
- 2022-07-29 14:27:28
1.3.3 MVVM模式介紹

MVVM是Model View ViewModel的簡寫,它本質(zhì)上就是MVC模式的改進版,目的是將其中View的狀態(tài)及行為抽象化,將視圖UI和業(yè)務(wù)邏輯分開。ViewModel可以做這些事情,它可以取出Model的數(shù)據(jù),同時幫助處理View中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。如今越來越多的新技術(shù),例如Silverlight、音頻、視頻、3D、動畫等技術(shù)的發(fā)展導致了軟件UI層更加細節(jié)化、可定制化。同時,在技術(shù)層面,WPF帶來了如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM模式便是由MVP模式與WPF結(jié)合的應(yīng)用方式發(fā)展演變過來的一種新型架構(gòu)模式。它立足于原有MVP模式并把WPF的新特性納入進去,以應(yīng)對客戶日益復雜的需求變化。
1.MVVM模式的優(yōu)點
MVVM模式和MVC模式一樣,主要目的是分離視圖(View)和模型(Model),以下是MVVM模式的優(yōu)點。
(1)低耦合。View可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的View上,當View變化時Model可以不變,當Model變化時View也可以不變。
(2)可重用性。可以將一些視圖邏輯放在一個ViewModel中,讓很多View重用這段視圖邏輯。
(3)獨立開發(fā)。開發(fā)者可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel),設(shè)計人員可以專注于頁面設(shè)計,使用Expression Blend工具可以很容易地設(shè)計界面并生成XAML代碼。
(4)可測試。界面素來是比較難測試的,而基于MVVM模式,測試可以針對ViewModel來寫。
2.MVVM模式的組成部分
(1)模型:模型是指代表真實狀態(tài)內(nèi)容的領(lǐng)域模型(面向?qū)ο螅蛑复韮?nèi)容的數(shù)據(jù)訪問層(以數(shù)據(jù)為中心)。
(2)視圖:就像在MVC和MVP模式中一樣,視圖是用戶在屏幕上看到的結(jié)構(gòu)、布局和外觀。
(3)視圖模型:視圖模型是暴露公共屬性和命令的視圖抽象。MVVM模式?jīng)]有MVC模式的控制器,也沒有MVP模式的Presenter,有的是一個綁定器。在視圖模型中,綁定器在視圖和數(shù)據(jù)綁定器之間進行通信。
在Microsoft解決方案中,綁定器是一種名為XAML的標記語言。綁定器使開發(fā)者免于被迫編寫樣板式邏輯來同步視圖模型和視圖。聲明性數(shù)據(jù)和命令綁定隱含在MVVM模式中,聲明性數(shù)據(jù)綁定技術(shù)的出現(xiàn)是實現(xiàn)該模式的一個關(guān)鍵因素。
- Dreamweaver CS5網(wǎng)頁設(shè)計與制作教程
- 網(wǎng)頁配色從入門到精通
- After Effects CS6從入門到精通
- 動漫秀場:超級漫畫Q版造型素描技法
- Bootstrap響應(yīng)式Web開發(fā)
- 眾妙之門:自由網(wǎng)站設(shè)計師成功之道
- HTML5+CSS3網(wǎng)頁制作基礎(chǔ)培訓教程
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- 網(wǎng)頁美工
- 網(wǎng)頁設(shè)計與制作Dreamweaver CS6標準教程(第2版)
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網(wǎng)頁設(shè)計基礎(chǔ)培訓教程
- Vue.js核心技術(shù)解析與uni-app跨平臺實戰(zhàn)開發(fā)
- 秩序之美:網(wǎng)頁中的網(wǎng)格設(shè)計
- 精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(視頻教學版)(第2版)
- Flash CS3網(wǎng)站建設(shè)實例詳解