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

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

Vue 與 Angular 都支持用控制指令描述界面，比如 Vue 中循環(huán)創(chuàng)建多個節(jié)點：

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

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

界面設(shè)計中常需要照著一個構(gòu)件的樣式，復(fù)制出多個，比如下面 btn2 按鈕，保持與 btn1 一致的樣式：

  Test 1
  Test 2

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

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

Test 1

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

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

以 $=path 建立引用，如上面舉例，如果引用位置尚不存在解釋運行環(huán)境，系統(tǒng)將自動創(chuàng)建一個。

用 $for=expr 或 $$for=expr 指示將一層調(diào)用空間壓入棧，系統(tǒng)自動檢測當(dāng)前是否有解釋運行環(huán)境，若沒有，也自動創(chuàng)建。

用 $for="" 開啟一個調(diào)用空間，如果當(dāng)前沒有解釋運行環(huán)境，系統(tǒng)自動創(chuàng)建。

與常規(guī)編程語言類似，MJI 解釋運行環(huán)境也有調(diào)用棧，一個 $for 循環(huán)要使用一套 item, index, count 變量，多個 $for 循環(huán)嵌套使用，就形成多套 item, index, count 變量的棧式結(jié)構(gòu)。

在 MJI 解釋運行環(huán)境中，按如下方式使用首層調(diào)用空間中的變量：

  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="" 開啟一個解釋執(zhí)行的計算環(huán)境，后面的 $for="item in duals.data" 則進(jìn)入下一層，當(dāng)前調(diào)用空間將壓棧。

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

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

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

本系列博文提供引導(dǎo)式入門介紹，過多細(xì)節(jié)略去不講。關(guān)于指令式界面設(shè)計的內(nèi)容，重要些的還有：

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

可計算表達(dá)式能用于異步計算，比如發(fā)起 ajax 調(diào)用

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

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

用導(dǎo)航面板與選項構(gòu)件，快速搭建列表導(dǎo)航、分頁導(dǎo)航等應(yīng)用，導(dǎo)航面板還為絕對路徑分段，讓其下節(jié)點能用 "./xx" 或 "../../xx" 相對路徑方式做引用。

選項構(gòu)件支持彈出浮窗，支持 trigger 觸發(fā)器等

細(xì)節(jié)請閱讀《Shadow Widget 用戶手冊》。

本專欄歷史文章：

介紹一項讓 React 可以與 Vue 抗衡的技術(shù)

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之一：React 三宗罪）

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之二：分離界面設(shè)計）

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之三：雙源屬性與數(shù)據(jù)驅(qū)動）

React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之四：flux、mvc、mvvm）