摘要：本篇解释中类的控制指令，与指令式界面设计相关。本专栏历史文章介绍一项让可以与抗衡的技术可视化开发工具非正经入门之一三宗罪可视化开发工具非正经入门之二分离界面设计可视化开发工具非正经入门之三双源属性与数据驱动可视化开发工具非正经入门之四
本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇解释 Shadow Widget 中类 Vue 的控制指令，与指令式界面设计相关。
1. 指令式界面设计Vue 与 Angular 都支持用控制指令描述界面，比如 Vue 中循环创建多个节点：
{{ index }} {{ item.message }}
Angular 也有类似 v-for, v-if, v-else 等控制指令，这些对于快速定义用户界面很有用，而 React 实现类似功能需借助 JS 编程，在便捷、直观方面不如 Angular 与 Vue。Shadow Widget 通过引入可计算属性与 MJI 解释器，弥补了 React 这项缺陷。
2. 节点引用界面设计中常需要照着一个构件的样式，复制出多个，比如下面 btn2 按钮，保持与 btn1 一致的样式：
Test 1 Test 2
Shadow Widget 的转义标签也用 $=xx 属性表达节点引用，这与指定 WTC 类（如上面 $=Button）不冲突，因为表达引用时，字串值必是路径格式，首字母必是 "." 或 "/"，而指示 WTC 类，首字母必定不是这两个。系统能自动识别这两种用法，用于路径引用时，我们习惯用引号括起来，而用作 WTC 类时，不加引号（不必担心，浏览器会自动把它看成字串的），这么书写理解起来很清晰。
3. 开启解释执行的上下文环境控制指令是可计算属性中的一种，可计算属性是一种通过脚本表达式，借助 MJI (Mini Javascript Interpreter) 解释器动态解析计算的属性。比如：
Test 1
这里 $html 是可计算属性，这段代码运行效果与前面等同。
须注意，可计算属性只在开启 MJI 解释运行环境后才生效，否则它只是常规字串。解释运行环境按需动态开启，用完即自动销毁，有此环境 MJI 才能维护脚本计算的上下文运算关系。有下面几种开启解释运行环境的方式：
以 $=path 建立引用，如上面举例，如果引用位置尚不存在解释运行环境，系统将自动创建一个。
用 $for=expr 或 $$for=expr 指示将一层调用空间压入栈，系统自动检测当前是否有解释运行环境，若没有，也自动创建。
用 $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. 举一个例子运行效果如下：
这个例子包含知识点较集中，讲解几个要点：
用 $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...
6. 更多功能本系列博文提供引导式入门介绍，过多细节略去不讲。关于指令式界面设计的内容，重要些的还有：
对 $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）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/56356.html
摘要：本篇解释中类的控制指令，与指令式界面设计相关。本专栏历史文章介绍一项让可以与抗衡的技术可视化开发工具非正经入门之一三宗罪可视化开发工具非正经入门之二分离界面设计可视化开发工具非正经入门之三双源属性与数据驱动可视化开发工具非正经入门之四 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇解释 Shadow Widget 中类 Vue 的控制指令，与指令式界面...
摘要：使用的构件是类构件，在嵌入转义标签的首层节点要求是非行内构件，类类类均可。现在把界面设计可视化了，未经编程训练的普通人也能通过拖入样板创建组件，再修改组件属性来设计界面，所以，这项改进具有重大现实意义。 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇讲解 Markdown 在 Shadow Widget 中的应用。 showImg(https://se...
摘要：前言非正经入门是相对正经入门而言的。不过不要紧，正式学习仍需回到正经入门的方式。快速入门建议先学会用拼文写文档注册一个账号，把库到自己名下，然后用这个库写自己的博客，参见这份介绍。会用拼文写文章，相当于开发已入门三分之一了。 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点，既作为用户手册的补充，也从更本质角度帮助大家理解 Shadow Widget 为什么这...
摘要：前言非正经入门是相对正经入门而言的。不过不要紧，正式学习仍需回到正经入门的方式。快速入门建议先学会用拼文写文档注册一个账号，把库到自己名下，然后用这个库写自己的博客，参见这份介绍。会用拼文写文章，相当于开发已入门三分之一了。 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点，既作为用户手册的补充，也从更本质角度帮助大家理解 Shadow Widget 为什么这...
摘要：是分发器，是数据与逻辑处理器，会在注册针对各个命令字的响应回调函数。当按如下方式触发回调时，回调函数具备事件的特性。 本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇解释 Shadow Widget 在 MVC、MVVM、Flux 框架之间如何做选择。 showImg(https://segmentfault.com/img/bVOODj?w=380&h...
阅读 3064·2021-11-22 14:45
阅读 2297·2021-09-22 10:02
阅读 3190·2019-08-29 13:11
阅读 2197·2019-08-29 12:31
阅读 798·2019-08-29 11:21
阅读 2895·2019-08-29 11:09
阅读 3507·2019-08-28 18:11
阅读 1251·2019-08-26 13:58
