什么是MVVM？
什么是MVVM？2008年，V8引擎隨Chrome瀏覽器橫空出世，JavaScript這門通用的WEB腳本語言的執(zhí)行效率得到質(zhì)的提升。V8引擎的出現(xiàn)，注定是JavaScript發(fā)展史上一個(gè)光輝的里程碑。它的出現(xiàn)，讓當(dāng)時(shí)研究高性能服務(wù)器開發(fā)、長時(shí)間一籌莫展的Ryan Dahl有了新的、合適的選擇，基于JavaScript的服務(wù)端項(xiàng)目node.js在2009年柏林的JSConf中對(duì)外發(fā)布，node.js不僅帶來了一個(gè)高性能的服務(wù)器，還很大程度上推動(dòng)了前端工程化。它的出現(xiàn)，讓JavaScript可堪大任，越來越多的業(yè)務(wù)邏輯在瀏覽器端實(shí)現(xiàn)。前端邏輯越來越重，前端架構(gòu)提上日程。隨后，我們談?wù)摰闹鹘?，MVVM模式，走進(jìn)了WEB前端的架構(gòu)設(shè)計(jì)中。
MVVM模式，顧名思義即Model-View-ViewModel模式。它萌芽于2005年微軟推出的基于Windows的用戶界面框架WPF，前端最早的MVVM框架knockout在2010年發(fā)布。
一句話總結(jié)MVVM：操作數(shù)據(jù)，就是操作視圖。
一句話總結(jié)WEB前端MVVM：操作數(shù)據(jù)，就是操作DOM（所以無須操作DOM）。
為什么？因?yàn)閷?shí)現(xiàn)MVVM模式的框架會(huì)做操作DOM的事兒，前提是你聲明綁定。MVVM最標(biāo)志性的特性就是數(shù)據(jù)綁定，MVVM的核心理念也是通過聲明式的數(shù)據(jù)綁定來實(shí)現(xiàn)View層和其他層的分離。
MVVM模式，是一種分層架構(gòu)
Model: 域模型，用于持久化
View: 作為視圖模板存在
ViewModel: 作為視圖的模型，為視圖服務(wù)
Model層
WEB前端MVVM里的Model層，對(duì)應(yīng)數(shù)據(jù)層的域模型，它主要做域模型的同步。通過Ajax/fetch等API做客戶端和服務(wù)端業(yè)務(wù)Model的同步。它用于抽象出ViewModel中視圖的Model。
View層
View層，作為視圖模板存在，在MVVM里，整個(gè)View是一個(gè)動(dòng)態(tài)模板，展示的是ViewModel層的狀態(tài)。View不負(fù)責(zé)處理狀態(tài)，View層做數(shù)據(jù)綁定的聲明、指令的聲明。
ViewModel層
ViewModel層把View需要的Model層數(shù)據(jù)暴露，對(duì)View層的數(shù)據(jù)綁定聲明和指令聲明負(fù)責(zé)。聲明綁定，數(shù)據(jù)變化，自動(dòng)更新View。View中通過雙向綁定的數(shù)據(jù)、View中綁定的事件也會(huì)分別通過隱式、顯示調(diào)用的修改ViewModel的數(shù)據(jù)。
MVVM框架的工作
通過視圖引擎為View層作為視圖模板提供保障，達(dá)成操作數(shù)據(jù)，就是操作DOM的目標(biāo)。功能完善的模板引擎，為高效率開發(fā)提供保障。
屬性變化的監(jiān)聽
通過封裝自定義數(shù)據(jù)存取器或借助Object.defineProperty()API等方式，在自定義的數(shù)據(jù)存取器內(nèi)部或setter/getter數(shù)據(jù)訪問器內(nèi)部通過類似發(fā)布/訂閱模式完成對(duì)數(shù)據(jù)變化的監(jiān)聽、通知，是數(shù)據(jù)綁定實(shí)現(xiàn)的基礎(chǔ)。
組件機(jī)制
開發(fā)者希望按面向未來的組件標(biāo)準(zhǔn)Web Componets的方式開發(fā)，就需要框架提供組件的定義、繼承、生命周期、組件間通信機(jī)制。
周邊
應(yīng)用狀態(tài)管理
SPA路由管理
UI組件庫
有了前端MVVM框架，應(yīng)用就可以通過數(shù)據(jù)驅(qū)動(dòng)。在View層聲明綁定后，在框架提供的視圖引擎幫助下，操作數(shù)據(jù)就可以自動(dòng)更新View，完成了視圖更新的自動(dòng)化，可以大大提升開發(fā)效率。談到引用框架的成本，不得不安利的是百度errorrik大神出品百度MVVM框架san，保持功能強(qiáng)大的同時(shí)gzip后體積僅約11k！還兼顧到IE8的市場份額，保持了良好的兼容性?，F(xiàn)已為百度內(nèi)多個(gè)產(chǎn)品提供了強(qiáng)勁驅(qū)動(dòng)，如果還沒接觸過，一定值得一試。
+相關(guān)資訊
-
11/272017js是什么？
廣州網(wǎng)站建設(shè)中js特效是什么？
-
11/172017java是什么?
java是什么?學(xué)java工資高嗎?都有什么崗位?
