React 可視化開發工具 Shadow Widget 非正經入門（之五：指令式界面設計）

本系列博文從 Shadow Widget 做者的視角，解釋該框架的設計要點。本篇解釋 Shadow Widget 中類 Vue 的控制指令，與指令式界面設計相關。

1. 指令式界面設計

Vue 與 Angular 都支持用控制指令描述界面，好比 Vue 中循環建立多個節點：

<div v-for="(index, item) in items">
  {{ index }} {{ item.message }}
</div>

Angular 也有相似 v-for, v-if, v-else 等控制指令，這些對於快速定義用戶界面頗有用，而 React 實現相似功能需藉助 JS 編程，在便捷、直觀方面不如 Angular 與 Vue。Shadow Widget 經過引入可計算屬性與 MJI 解釋器，彌補了 React 這項缺陷。

2. 節點引用

界面設計中常須要照着一個構件的樣式，複製出多個，好比下面 btn2 按鈕，保持與 btn1 一致的樣式：

<span $=Button key='btn1' sty__='background:#eee; border-color:#ccc'>Test 1</span>
  <span $='//btn1' key='btn2'>Test 2</span>

Shadow Widget 的轉義標籤也用 $=xx 屬性表達節點引用，這與指定 WTC 類（如上面 $=Button）不衝突，由於表達引用時，字串值必是路徑格式，首字母必是 '.' 或 '/'，而指示 WTC 類，首字母一定不是這兩個。系統能自動識別這兩種用法，用於路徑引用時，咱們習慣用引號括起來，而用做 WTC 類時，不加引號（沒必要擔憂，瀏覽器會自動把它當作字串的），這麼書寫理解起來很清晰。

3. 開啓解釋執行的上下文環境

控制指令是可計算屬性中的一種，可計算屬性是一種經過腳本表達式，藉助 MJI (Mini Javascript Interpreter) 解釋器動態解析計算的屬性。好比：

<span $=Button key='btn1' sty__='background:#eee; border-color:#ccc'>Test 1</span>
<span $='//btn1' key='btn2' data='{{"desc":"Test 2"}}' 
      $html="duals.data.desc"></span>

這裏 $html 是可計算屬性，這段代碼運行效果與前面等同。

須注意，可計算屬性只在開啓 MJI 解釋運行環境後才生效，不然它只是常規字串。解釋運行環境按需動態開啓，用完即自動銷燬，有此環境 MJI 才能維護腳本計算的上下文運算關係。有下面幾種開啓解釋運行環境的方式：

1. 以 $=path 創建引用，如上面舉例，若是引用位置尚不存在解釋運行環境，系統將自動建立一個。
2. 用 $for=expr 或 $$for=expr 指示將一層調用空間壓入棧，系統自動檢測當前是否有解釋運行環境，若沒有，也自動建立。
3. 用 $for='' 開啓一個調用空間，若是當前沒有解釋運行環境，系統自動建立。

4. 棧式調用空間

與常規編程語言相似，MJI 解釋運行環境也有調用棧，一個 $for 循環要使用一套 item, index, count 變量，多個 $for 循環嵌套使用，就造成多套 item, index, count 變量的棧式結構。

在 MJI 解釋運行環境中，按以下方式使用首層調用空間中的變量：

props(0).attr   duals(0).attr   state(0).attr
  item(0)   index(0)   count(0)

或簡寫以下：

props.attr   duals.attr   state.attr
  item   index   count

若是讀上一層棧中變量：

props(-1).attr   duals(-1).attr   state(-1).attr
  item(-1)   index(-1)   count(-1)

再往一層，則用 -2 指示，其它類推。

5. 舉一個例子

<div $=Panel key='top' height='{null}'>
  <div $=Div key='msg' dual-required='{30}' $for=''
    dual-data='{[{"name":"Wayne","age":20},{"name":"George","age":35}]}'>
    <div $=Ul width='{0.9999}' $title='duals.data.length + " people"' 
         $for='item in duals.data'>
      <div $=Li $key='"if_" + index' $if='item.age >= duals(-1).required'
           $html='item.name + " is old"'></div>
      <div $=Li $key='"el_" + index' $else=''
           $html='item.name + " is young"'></div>
    </div>
  </div>
</div>

運行效果以下：

  

這個例子包含知識點較集中，講解幾個要點：

1. 用 $for='' 開啓一個解釋執行的計算環境，後面的 $for='item in duals.data' 則進入下一層，當前調用空間將壓棧。
2. 內層 $for 中的可計算屬性要引用上層調用空間，這麼書寫：duals(-1).required
3. $if 與 $else 也是控制指令，有條件的顯示特定節點。還有一個 $elif 沒舉例到，含義爲 "else if"，用法可類推。
4. $for 下用來表達循環生成的節點，要顯式指定 key 值，如本例的 $key="if_"+index 與 $key="el_"+index，這裏 index 是循環序號，依次取值爲 0, 1, 2...

6. 更多功能

本系列博文提供引導式入門介紹，過多細節略去不講。關於指令式界面設計的內容，重要些的還有：

1. 對 $for 組裝子成員提供過濾、排序等功能
2. 可計算表達式能用於異步計算，好比發起 ajax 調用
3. 提供 flex 佈局面板，方即可視化的快速搭建一個頁面
4. 支持模板定義（TempPanel, TempDiv），便於定製化引用、批量引用
5. 用導航面板與選項構件，快速搭建列表導航、分頁導航等應用，導航面板還爲絕對路徑分段，讓其下節點能用 "./xx" 或 "../../xx" 相對路徑方式作引用。
6. 選項構件支持彈出浮窗，支持 trigger 觸發器等

細節請閱讀《Shadow Widget 用戶手冊》。

---

本專欄歷史文章：

1. 介紹一項讓 React 能夠與 Vue 抗衡的技術
2. React 可視化開發工具 Shadow Widget 非正經入門（之一：React 三宗罪）
3. React 可視化開發工具 Shadow Widget 非正經入門（之二：分離界面設計）
4. React 可視化開發工具 Shadow Widget 非正經入門（之三：雙源屬性與數據驅動）
5. React 可視化開發工具 Shadow Widget 非正經入門（之四：flux、mvc、mvvm）