本系列博文从 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)

React 可视化开发工具 Shadow Widget 非正经入门(之五:指令式界面设计)的更多相关文章

  1. React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)

    本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...

  2. React 可视化开发工具 shadow-widget 的非可视开发方法

    Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...

  3. eclipseGUI的可视化开发工具插件

    一   各种GUI开发插件的特色 Eclipse并不自带GUI的可视化开发工具,那么如果要在Eclipse进行可视化的GUI开发,就需要依靠第三方的插件. 1. Visual Editor Eclip ...

  4. wxwidget wxpython 可视化开发工具

    wxwidget官方建议的工具集合:http://wiki.wxwidgets.org/Tools 支持wxpython可视化开发工具 wxFormBuilder wxGlade wxDesigner ...

  5. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  6. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  7. React Native开发工具Nuclide使用

    之前写RN的时候首选webstorm,这是之前做前端已经习惯的工具,其实RN开发官网推荐的是Nuclide工具, Nuclide是Fackbook专门为React开发IDE,今天也来尝试下,如果对we ...

  8. React等开发工具记录

    React Native :React 起源于 Facebook 的内部项目,结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生 ...

  9. React Native 开发工具篇

    正文 概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm.Sublime Text 3.VS Code等 ...

随机推荐

  1. 进程&线程(二):Thread相关方法与属性

    学习自:python进程.线程.协程 - 张岩林 - 博客园 1.threading.Thread Thread方法 方法(使用方法为Thread.xxx) 说明 start() 激活线程 getNa ...

  2. 革命性创新,动画杀手锏 @scroll-timeline

    在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的 CSS 功能.也就是 -- The @scroll-timeline at-rule,直译过来就是滚动时间线 ...

  3. 【洛谷】P1447 能量采集

    此题虽为紫,但其实在水 能量采集 题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一 ...

  4. 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑

    之前因为一些需要,需要转换部分 HTML 标签成 markdown 格式,但是不知不觉就完善到一个相对完整的函数. 然后我就封装成了一个文件放在了 github ,也简单做了两个示例网页. HTML ...

  5. python学习之matplotlib实战

    import numpy as np def main(): # print("hello") # line import matplotlib.pyplot as plt x = ...

  6. CVE-2010-2861(Adobe ColdFusion 文件读取漏洞)

    漏洞介绍 Adobe ColdFusion是美国Adobe公司的一款动态Web服务器产品,其运行的CFML(ColdFusion Markup Language)是针对Web应用的一种程序设计语言. ...

  7. dfs:10元素取5个元素的组合数

    #include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...

  8. @Transactional注解的失效场景

    一口气说出 6种,@Transactional注解的失效场景 计算机java编程 发布时间: 20-03-1912:35优质科技领域创作者 引言 昨天公众号粉丝咨询了一个问题,说自己之前面试被问@Tr ...

  9. 服务端处理 Watcher 实现 ?

    1.服务端接收 Watcher 并存储 接收到客户端请求,处理请求判断是否需要注册 Watcher,需要的话将数据节点 的节点路径和 ServerCnxn(ServerCnxn 代表一个客户端和服务端 ...

  10. 什么是 rabbitmq?

    采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需要确保提供方存在,实现了服务之间的高度解耦