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

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

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

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

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

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

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

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

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

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

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

在組件布局的時(shí)候還時(shí)常需要對(duì)組件節(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字段的值是否為一個(gè)有效的循環(huán)表達(dá)式,然后對(duì)該循環(huán)表達(dá)式進(jìn)行計(jì)算展開,結(jié)果如下:

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

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

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

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

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

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

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

測(cè)試一下,對(duì)一個(gè)相對(duì)復(fù)雜的模板進(jìn)行動(dòng)態(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)一個(gè)父節(jié)點(diǎn)在循環(huán)的時(shí)候,它的子節(jié)點(diǎn)也同樣會(huì)得到for生成的新變量,在展開子節(jié)點(diǎn)計(jì)算其屬性時(shí),也能獲取到新的變量從而得到想要的結(jié)果?！?/strong>