React可视化开发工具ShadowWidget非正经介绍（第六篇：markdown）

时间：2023-04-05 23:53:14 HTML5

本系列博文从ShadowWidget作者的角度讲解框架的设计要点。本文讲解Markdown在ShadowWidget中的应用。Markdown在ShadowWidget中的应用ShadowWidget中的Markdown采用了JohnGruber的Markdown语法规则。由于markdown支持带标签的写法，所以我们不需要在外面找专门的扩展方法，需要功能扩展的地方，可以使用html标签来解决。ShadowWidget不仅使用markdown来表达文本段落，更重要的是，它还使用markdown来实现界面编程。为了实现这个目标，我们首先优化了JohnGruber的markdown语法。优化markdown语法。常规markdown语法支持使用>来表示当前段落的缩进级别。例如：>本段缩进一级。>>本段缩进两级。这样的markdown文本可以写在单独的*.txt或*.md文件中，但是如果移动到html网页文件中，字母'>'会被保存为转义格式“>”。因此，我们在分析markdown语法时，需要对“>”表示缩进进行兼容处理。从更严格的角度来看，字母'>'规则被认为是一个错误，因为markdown需要内置对标签的支持，所以'<'和'>'不应该被用作特殊的语义标签，否则会破坏严谨性。ShadowWidget也将escape标签加入到markdown文本内容中，需要用更严谨的方式表达缩进级别。我们引用“::”符号并用它替换“>”。例如：::这一段缩进一级。::::本段缩进两级。将转义标签嵌入markdown文本Markdown语法支持标签，转义标签自然可以写在markdown中，例如：###EmbedAnescape描述接口的标签test1测试2

这个例子在markdown文本中定义了**两个按钮**界面。###Embedareference

外部定义的组件（`.body.auto1.pie_chart`）将被插入到markdown文本中使用。使用markdown的组件是一个Div组件。Markdown中嵌入转义标签的一级节点要求是“非内联组件”。Panel、Div和P都是可以接受的。转义标签描述的嵌入式接口与markdown描述的段落一起显示为“段落”。上面例子生成的节点树如下：marked//MarkedDiv+--markdownparagraph+--p//P|+--test1//按钮|+--test2//Button+--markdownparagraph+--pie+--markdownparagraph在markdown中嵌入转义标签，使得markdown的表达能力极其强大，可以嵌入ShadowWidget编程可以表达的界面。内嵌转义标签甚至可以是markdown组件，层层嵌套，深度无限制。两个markdown基类ShadowWidget提供了两个最基本的WTC类定义T.MarkedDiv和T.MarkedTable，所有支持markdown的扩展WTC类都应该继承这两个基类。在转义标签中描述markdown节点，推荐使用

标签，

也可以，但是使用

可以让markdown文本少一些需要转义的特殊字符。标签的内容在遇到“<”或“>”时仍然会进行转义，但是在中表达时，如果内容有换行或者嵌套标签，就会出现麻烦。因此，对于以下两个转义标签，我们选择第一个而不是第二个：Hello,world
Hello,world

MarkedDiv通常用于表示一维数据定义，MarkedTable表示二维数据，row是一个维度，column是另一个维度。这两个组件都定义了duals.nodes属性，对于前者，使用comp.duals.nodes[n]提取转义标签定义的每个节点，对于后者，使用comp.duals.nodes[row][col]提取由行row列col处的转义标签定义的节点。Markdown兼顾了机器可读和人类可读的要求。Markdown旨在简化网页内容编辑。很多用户（尤其是写手）对html标签不熟悉，让他用

或者

来写文章会很吃力。使用Markdown语法，普通人花10分钟学会就可以写出界面漂亮的网页文章。ShadowWidget继承了markdown的优点，同时在不引入过于复杂的操作的情况下，力求提高界面的表现力。原则上markdown可以嵌入大部分的html标签，比如

、

等，表达复杂的用户界面不是问题，但问题是只有前端开发人员才能使用复杂的标签。现在ShadowWidget将界面设计可视化。没有受过编程训练的普通人也可以通过拖入模板创建组件，然后修改组件属性来设计界面。因此，ShadowWidget的这次改进具有很大的现实意义。在markdown文本中嵌入特定的界面，比如下面的直方图：典型步骤如下：在隐藏的电影页面（设计状态下仍然可见），拖入直方图模板，创建一个组件，然后选择组件，在属性页修改属性，或者点击浮动按钮配置具体属性。指定该组件的键值，然后单击浮动按钮复制其“参考说明”。只需在降价内容编辑器中粘贴“参考说明”文本即可。在这些步骤之后，直方图嵌入到降价文本中。Markdown在ShadowWidget中被广泛使用，正如Markdown可以简化文章写作一样，它也简化了编程中的界面设计。它的表达形式对于机器来说是可读的，同时对于开发者来说也是易于阅读和理解的。修改起来很方便，直接改文字即可。比较复杂的例子是下面的组件，点击左侧列表中的item，右侧会显示相应页面的内容（注意：下图不可点击查看交互效果）。它的实现原理大致是，用下面的MarkedDiv来定义itemA/B/C的三个item：PageAB页C页然后用$for="iteminduals('./mark').nodes”循环语句，取这3个元素的props.title值显示在左侧列表中，使用NavPanel和GroundPanel构造可选导航页面，使用$for="itemindualsforeachcontentpage('./mark').nodes"获取。如果把这个界面做成模板，用户使用的时候，拖进去创建一个组件，然后选中key为mark的MarkedDiv组件，点击“editmarkdown”悬浮按钮，然后修改pop中的文字-up降价编辑器。这样，我们就可以很方便的制作出相同风格的导航页面界面。（非正经入门系列到此结束，本文为最后一篇）本专栏历史文章：介绍一种让React与Vue竞争的技术React可视化开发工具ShadowWidget非正经入门（一：React三宗罪）React可视化开发工具ShadowWidget非正经介绍（第二部分：分离界面设计）React可视化开发工具ShadowWidget非正经介绍（第三部分：双源属性和数据驱动）React可视化开发工具ShadowWidget非正经介绍（四：flux、mvc、mvvm）React可视化开发工具ShadowWidget非正经介绍（五：教学界面设计）

上一篇：180行JavaScript代码实现小球随机运动代码

下一篇：大前端时代，聊JavaScript开发重载跨平台应用和架构

React可视化开发工具ShadowWidget非正经介绍（第六篇：markdown）相关文章