DynamicDSL將遵循以下的交互展示邏輯: 描述文件(XML,Widget) --->(綁定數(shù)據(jù))--->渲染模板--->渲染--->事件驅(qū)動--->數(shù)據(jù)改變 這樣循環(huán)下來的,最終我們看到的就是App上的界面與交互效果了。

這看上去和RN,flutter有點(diǎn)像,只是我們這個是特定場景的使用。

實(shí)現(xiàn)了AST節(jié)點(diǎn),已經(jīng)有了動態(tài)計算數(shù)據(jù)的能力,接下來我們將實(shí)現(xiàn)動態(tài)XML模板的綁定,為渲染前生成布局描述模板。

复制<View>
    <View text="年齡: {{ 33.22 * 2}}" color="{{ item[age] >= 20 ? '#FFFFFF' : '#DDDDDD' }}" />
class="hljs-name"View>

這個模板比較簡單,它有一個根節(jié)點(diǎn),根節(jié)點(diǎn)有一個子節(jié)點(diǎn)包含兩個屬性,我們用"{{ }}"來描述需要計算的表達(dá)式,如果沒有兩個大括號則認(rèn)為是原始字符串。

「這里我們規(guī)定,布局模板必須在一個根節(jié)點(diǎn)下面!」

XML原始節(jié)點(diǎn)展示如下:

text節(jié)點(diǎn)可以直接計算出結(jié)果, color節(jié)點(diǎn)通過獲取環(huán)境變量中名稱為item的數(shù)據(jù),再進(jìn)一步獲取其中名稱為age的數(shù)據(jù)與20進(jìn)行比較,再得到具體的值。

复制R"({"item":{"age": 30}})"

動態(tài)綁定之后結(jié)果如下:

到此，可以認(rèn)為這個XML是我們基礎(chǔ)布局模板，可以拿給Flex引擎計算了。

在組件布局的時候還時常需要對組件節(jié)點(diǎn)進(jìn)行重復(fù)或者顯示與隱藏等操作,因此: 我們規(guī)定

for="{{for xx item xxs}}" 用于實(shí)現(xiàn)重復(fù)組件

if="{{ expr }}" 用于實(shí)現(xiàn)節(jié)點(diǎn)是否顯示

現(xiàn)在我們將XML的描述修改成下面這樣:

复制<View>
    <View text="年齡: {{ 33.22 * 2}}" info="{{ item[name] }} : {{item[age]}}" color="{{ item[age] >= 20 ? '#FFFFFF' : '#DDDDDD' }}" for="{{ for item in items }}"/>
class="hljs-name"View>

XML原始節(jié)點(diǎn)展示如下:

首先我們需要遍歷節(jié)點(diǎn)的屬性,查找到節(jié)點(diǎn)中for字段的值是否為一個有效的循環(huán)表達(dá)式,然后對該循環(huán)表達(dá)式進(jìn)行計算展開,結(jié)果如下:

复制R"({"item":{"age": 30},"items":[{"name": "小強(qiáng)", "age": 28},{"name": "小明", "age": 23},{"name": "小紅", "age": 18}]})"

**「這里需要特別注意的是：For會產(chǎn)生一個新的變量環(huán)境,for語句中定義了一個新的變量,當(dāng)我們在展開時需要將新的變量(item)注入到變量環(huán)境中,item將覆蓋上一級環(huán)境變量中的item的值。

這與棧幀調(diào)用時的本地變量覆蓋上一級范圍中的變量是一樣的道理。

」** 展開之后,item是items中的每一個元素而不是根節(jié)點(diǎn)上的item了。

此時再對每個節(jié)點(diǎn)進(jìn)行消解運(yùn)算

注入的環(huán)境變量如下:

if語句相對簡單一點(diǎn),它不會產(chǎn)生新的變量,只需要對表達(dá)式求值,獲取表達(dá)式的結(jié)果true則保留,false則刪除節(jié)點(diǎn)不展示。

測試一下,對一個相對復(fù)雜的模板進(jìn)行動態(tài)綁定:

复制<View>
    <View text="年齡: {{ 33.22 * 2}}" color="{{ item[age] >= 20 ? '#FFFFFF' : '#DDDDDD' }}" for="{{ for item in items }}">
    class="hljs-name"View>
    <View>
        <View for="{{ for item in items }}">
            text="{{item[name]}}">class="hljs-name"Label>
            for="{{ for link in images }}" link="{{ link }}">class="hljs-name"Image>
        class="hljs-name"View>
    class="hljs-name"View>
    for="{{ for item in items }}" text="姓名: {{ item[name] }}, 年齡: {{item[age]}} -_-">class="hljs-name"Label>
    
    <View for="{{ for item in items }}" if="{{ item[age] < 20 }}" text = "{{ item[name] }}" >
        text = "{{ item[age] }} - {{ item[name] }}"/>
    class="hljs-name"View>
    <View for="{{ for item in items }}" text="{{ item[name] }}" >
        text = "{{ item[age] }} - {{ item[name] }}" if="{{ item[age] < 20 }}"/>
    class="hljs-name"View>
class="hljs-name"View>

展示結(jié)果如下,「這里需要注意的是當(dāng)一個父節(jié)點(diǎn)在循環(huán)的時候,它的子節(jié)點(diǎn)也同樣會得到for生成的新變量,在展開子節(jié)點(diǎn)計算其屬性時,也能獲取到新的變量從而得到想要的結(jié)果。」

到這里,動態(tài)綁定就差不多了,接下來就是將綁定后的模板交給Flex引擎,計算而已了。

如果你覺得這個文章對你有用,可以分享給更多的朋友。

謝謝！