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等 ...
随机推荐
- Leaflet:控件Control相关
Leaflet官方文档中只给出了4种控件:Zoom.Attribution.Layers.Scale:它们都是继承自Control类,具体可以参考Control. Control Zoom.Scale ...
- source tree的使用
参看博客: https://blog.csdn.net/syq8023/article/details/89844030 http://jingyan.baidu.com/album/59703552 ...
- powerful number筛
心血来潮跑来实现以下这个东西 我们应该知道杜教筛的理论是 \(f * g=h\),那么问题在于如何找 \(g\). 之前的blog应该提到过可以令 \(g(p)=-f(p)\),这样一来 \(h\) ...
- 6月13日 python学习总结 Django框架
1. 内容回顾 1. 基础必会三件套 from django.shortcuts import HttpResponse, render, redirect - HttpResponse(" ...
- go语言学习入门篇 3-- 程序执行流程
先看下 Go 语言的程序结构: package main // 当前包名 import "fmt" // 导入程序中使用到的包 // 初始化函数 func init() { // ...
- EasyUI 之datagrid 使用 【DataGrid属性解释】
可选的参数 DataGrid 属性 覆写了 $.fn.datagrid.defaults. 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls ...
- 【模板】动态 DP
luogu传送门. 最近学了一下动态dp,感觉没有想象的难. 动态DP simple的DP是这样的: 给棵树,每个点给个权值,求一下最大权独立集. 动态DP是这样的: 给棵树,每个点给个权值还到处改, ...
- [bzoj3585] Rmq Problem / mex
[bzoj3585] Rmq Problem / mex bzoj luogu 看上一篇博客吧,看完了这个也顺理成章会了( (没错这篇博客就是这么水) #include<cstdio> # ...
- 使用Redis实现关注好友的功能
现在很多社交都有关注或者添加粉丝的功能, 类似于这样的功能我们如果采用数据库做的话只是单纯得到用户的一些粉丝或者关注列表的话是很简单也很容易实现, 但是如果我想要查出两个甚至多个用户共同关注了哪些人或 ...
- Mysql查询优化器之基本优化
对于一个SQL语句,查询优化器先看是不是能转换成JOIN,再将JOIN进行优化 优化分为: 1. 条件优化 2.计算全表扫描成本 3. 找出所有能用到的索引 4. 针对每个索引计算不同的访问方式的成本 ...