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 才能维护脚本计算的上下文运算关系。有下面几种开启解释运行环境的方式:
- 以
$=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. 举一个例子
<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>
运行效果如下:
这个例子包含知识点较集中,讲解几个要点:
- 用
$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 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)的更多相关文章
- React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...
- React 可视化开发工具 shadow-widget 的非可视开发方法
Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...
- eclipseGUI的可视化开发工具插件
一 各种GUI开发插件的特色 Eclipse并不自带GUI的可视化开发工具,那么如果要在Eclipse进行可视化的GUI开发,就需要依靠第三方的插件. 1. Visual Editor Eclip ...
- wxwidget wxpython 可视化开发工具
wxwidget官方建议的工具集合:http://wiki.wxwidgets.org/Tools 支持wxpython可视化开发工具 wxFormBuilder wxGlade wxDesigner ...
- iOS程序员的React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...
- React-Native(二):React Native开发工具vs code配置
从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...
- React Native开发工具Nuclide使用
之前写RN的时候首选webstorm,这是之前做前端已经习惯的工具,其实RN开发官网推荐的是Nuclide工具, Nuclide是Fackbook专门为React开发IDE,今天也来尝试下,如果对we ...
- React等开发工具记录
React Native :React 起源于 Facebook 的内部项目,结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生 ...
- React Native 开发工具篇
正文 概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm.Sublime Text 3.VS Code等 ...
随机推荐
- 进程&线程(二):Thread相关方法与属性
学习自:python进程.线程.协程 - 张岩林 - 博客园 1.threading.Thread Thread方法 方法(使用方法为Thread.xxx) 说明 start() 激活线程 getNa ...
- 革命性创新,动画杀手锏 @scroll-timeline
在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的 CSS 功能.也就是 -- The @scroll-timeline at-rule,直译过来就是滚动时间线 ...
- 【洛谷】P1447 能量采集
此题虽为紫,但其实在水 能量采集 题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一 ...
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑
之前因为一些需要,需要转换部分 HTML 标签成 markdown 格式,但是不知不觉就完善到一个相对完整的函数. 然后我就封装成了一个文件放在了 github ,也简单做了两个示例网页. HTML ...
- python学习之matplotlib实战
import numpy as np def main(): # print("hello") # line import matplotlib.pyplot as plt x = ...
- CVE-2010-2861(Adobe ColdFusion 文件读取漏洞)
漏洞介绍 Adobe ColdFusion是美国Adobe公司的一款动态Web服务器产品,其运行的CFML(ColdFusion Markup Language)是针对Web应用的一种程序设计语言. ...
- dfs:10元素取5个元素的组合数
#include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...
- @Transactional注解的失效场景
一口气说出 6种,@Transactional注解的失效场景 计算机java编程 发布时间: 20-03-1912:35优质科技领域创作者 引言 昨天公众号粉丝咨询了一个问题,说自己之前面试被问@Tr ...
- 服务端处理 Watcher 实现 ?
1.服务端接收 Watcher 并存储 接收到客户端请求,处理请求判断是否需要注册 Watcher,需要的话将数据节点 的节点路径和 ServerCnxn(ServerCnxn 代表一个客户端和服务端 ...
- 什么是 rabbitmq?
采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需要确保提供方存在,实现了服务之间的高度解耦