摘要：本篇解釋中類的控制指令，與指令式界面設計相關。本專欄歷史文章介紹一項讓可以與抗衡的技術可視化開發工具非正經入門之一三宗罪可視化開發工具非正經入門之二分離界面設計可視化開發工具非正經入門之三雙源屬性與數據驅動可視化開發工具非正經入門之四

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

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

  {{ index }} {{ item.message }}

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

界面設計中常需要照著一個構件的樣式，復制出多個，比如下面 btn2 按鈕，保持與 btn1 一致的樣式：

  Test 1
  Test 2

Shadow Widget 的轉義標簽也用 $=xx 屬性表達節點引用，這與指定 WTC 類（如上面 $=Button）不沖突，因為表達引用時，字串值必是路徑格式，首字母必是 "." 或 "/"，而指示 WTC 類，首字母必定不是這兩個。系統能自動識別這兩種用法，用于路徑引用時，我們習慣用引號括起來，而用作 WTC 類時，不加引號（不必擔心，瀏覽器會自動把它看成字串的），這么書寫理解起來很清晰。

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

Test 1

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

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

以 $=path 建立引用，如上面舉例，如果引用位置尚不存在解釋運行環境，系統將自動創建一個。

用 $for=expr 或 $$for=expr 指示將一層調用空間壓入棧，系統自動檢測當前是否有解釋運行環境，若沒有，也自動創建。

用 $for="" 開啟一個調用空間，如果當前沒有解釋運行環境，系統自動創建。

與常規編程語言類似，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 指示，其它類推。

運行效果如下：

??

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

用 $for="" 開啟一個解釋執行的計算環境，后面的 $for="item in duals.data" 則進入下一層，當前調用空間將壓棧。

內層 $for 中的可計算屬性要引用上層調用空間，這么書寫：duals(-1).required

$if 與 $else 也是控制指令，有條件的顯示特定節點。還有一個 $elif 沒舉例到，含義為 "else if"，用法可類推。

$for 下用來表達循環生成的節點，要顯式指定 key 值，如本例的 $key="if_"+index 與 $key="el_"+index，這里 index 是循環序號，依次取值為 0, 1, 2...

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

對 $for 組裝子成員提供過濾、排序等功能

可計算表達式能用于異步計算，比如發起 ajax 調用

提供 flex 布局面板，方便可視化的快速搭建一個頁面

支持模板定義（TempPanel, TempDiv），便于定制化引用、批量引用

用導航面板與選項構件，快速搭建列表導航、分頁導航等應用，導航面板還為絕對路徑分段，讓其下節點能用 "./xx" 或 "../../xx" 相對路徑方式做引用。

選項構件支持彈出浮窗，支持 trigger 觸發器等

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

本專欄歷史文章：

介紹一項讓 React 可以與 Vue 抗衡的技術

React 可視化開發工具 Shadow Widget 非正經入門（之一：React 三宗罪）

React 可視化開發工具 Shadow Widget 非正經入門（之二：分離界面設計）

React 可視化開發工具 Shadow Widget 非正經入門（之三：雙源屬性與數據驅動）

React 可視化開發工具 Shadow Widget 非正經入門（之四：flux、mvc、mvvm）