前言

本文介紹我們?cè)谌S應(yīng)用中響應(yīng)式設(shè)計(jì)的思路和應(yīng)用場(chǎng)景。

MVVM的特點(diǎn)

前端技術(shù)近些年高速發(fā)展，React菱魔、Vue等MVVM類JS庫(kù)使用起來(lái)極其方便，獲得了極為廣泛的應(yīng)用吟孙。

MVVM架構(gòu)把View所涉及的復(fù)雜的交互邏輯進(jìn)行封裝屏蔽澜倦，用戶只需要關(guān)心ViewModel聚蝶，并以此作為對(duì)外使用的接口。

下圖展示的是一個(gè)vue的簡(jiǎn)單使用示例藻治〉饷悖可以看到，一旦View和ViewModel之間的關(guān)聯(lián)代碼寫(xiě)好以后栋艳，客戶需要操作的就是簡(jiǎn)單的調(diào)用app2.app2Alpha = 0.8恰聘。當(dāng)然這里舉的例子相對(duì)簡(jiǎn)單。實(shí)際項(xiàng)目中可能View中包含復(fù)雜的界面邏輯吸占，也可以通過(guò)一個(gè)簡(jiǎn)單的屬性設(shè)置來(lái)完成對(duì)View的改變晴叨。

MVVM架構(gòu)

響應(yīng)式屬性

上圖中，為何通過(guò)app2.app2Alpha這樣一個(gè)屬性的設(shè)置矾屯，就能讓View產(chǎn)生變化兼蕊？

實(shí)際上這里的app2Alpha是一個(gè)響應(yīng)式屬性，它一旦發(fā)生變化件蚕，Vue就會(huì)追蹤其變化孙技，修改Virtual DOM，并最終讓View發(fā)生改變排作。

而這個(gè)追蹤屬性變化的過(guò)程牵啦，完全由Vue內(nèi)部實(shí)現(xiàn)⊥荆客戶并不需要關(guān)心哈雏。這樣的設(shè)計(jì)大大減輕了前端開(kāi)發(fā)者對(duì)交互邏輯的控制，少寫(xiě)了很多容易出問(wèn)題的代碼衫生。

這個(gè)設(shè)計(jì)很帥裳瘪，我們希望在三維應(yīng)用中也能使用這種方式。

三維應(yīng)用中使用MVVM

我們嘗試對(duì)三維應(yīng)用進(jìn)行改造罪针。對(duì)于三維應(yīng)用程序來(lái)說(shuō)彭羹，其實(shí)也可以看成View和ViewModel兩個(gè)部分。View是最終顯示的三維窗口泪酱，而ViewModel則是對(duì)應(yīng)的響應(yīng)式屬性派殷。為了加以區(qū)分，這里把三維應(yīng)用的View寫(xiě)成3DScene西篓，ViewModel寫(xiě)成3DSceneModel愈腾。如下圖所示。

雙MVVM架構(gòu)

經(jīng)過(guò)這樣的改造以后岂津，就可以通過(guò)簡(jiǎn)單的屬性值設(shè)置，來(lái)修改三維窗口的樣子了悦即。比如執(zhí)行imagery.alpha = 0.5這個(gè)語(yǔ)句吮成，就會(huì)讓地球上的影像變得很淡橱乱。另外一點(diǎn)imagery.alpha屬性的變化，可以被外界感知粱甫。通過(guò)XE.MVVM.bind這個(gè)方法泳叠，將imagery.alpha和app2.app2Alpha綁定在一起，imagery.alpha的變化就會(huì)相應(yīng)地影響app2.app2Alpha茶宵，進(jìn)而讓View也跟著一起變化危纫。

image.png

我們繼續(xù)對(duì)以上方式進(jìn)行擴(kuò)展，View可以是多個(gè)乌庶≈值可以讓多個(gè)View通過(guò)綁定imagery.alpha。效果如下圖所示瞒大。

綁定示意圖

綁定示意圖-簡(jiǎn)圖

這樣做的好處是只要任意一處view的屬性被修改螃征，那么其他綁定的屬性都會(huì)發(fā)生變化。比如在網(wǎng)頁(yè)中拖動(dòng)滑動(dòng)條透敌，就會(huì)觸發(fā)app1Sub.imageryAlpha發(fā)生變化盯滚，然后它的變化會(huì)引起imagery.alpha跟隨變化，這樣三維場(chǎng)景中的地球影像的透明度會(huì)跟著變化酗电。同時(shí)imagery.alpha的變化魄藕，會(huì)觸發(fā)app2.app2Alpha和app3.app3Alpha也跟著一起變化。

image.png

甚至撵术，我們可以直接在控制臺(tái)輸入imagery.alpha = 0.5背率，這樣的修改會(huì)自動(dòng)同步至各處。而這樣的操作荷荤，僅僅需要一個(gè)bind即可搞定退渗。

響應(yīng)式屬性自動(dòng)跟蹤

總結(jié)

這里只是通過(guò)一個(gè)透明度屬性的設(shè)置，來(lái)對(duì)響應(yīng)式屬性做了一個(gè)簡(jiǎn)單的介紹蕴纳。實(shí)際應(yīng)用中会油，一個(gè)簡(jiǎn)單的響應(yīng)式屬性可以指向一個(gè)復(fù)雜的交互邏輯或者某個(gè)復(fù)雜的異步計(jì)算處理，可以極大地降低前端開(kāi)發(fā)者進(jìn)行三維開(kāi)發(fā)的門檻古毛。

我們自己基于Cesium做了一套用于開(kāi)發(fā)三維應(yīng)用的UI樣板程序翻翩，并把它應(yīng)用到了CesiumLab程序中。代碼在這里：https://github.com/cesiumlab/XbsjEarthUI稻薇。有興趣的讀者可以一試嫂冻。

XbsjEarthUI

歡迎關(guān)注 Cesium實(shí)驗(yàn)室 ，QQ群號(hào)：830157717塞椎。

QQ群