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）