Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
HVML
HVML Docs
Commits
26206449
Commit
26206449
authored
May 13, 2022
by
Vincent Wei
Browse files
update some description
parent
7b39b362
Changes
1
Hide whitespace changes
Inline
Side-by-side
zh/hvml-spec-v1.0-zh.md
View file @
26206449
...
...
@@ -654,30 +654,31 @@ Language: Chinese
1.
HVML 是动态的,表述的是程序,而 HTML 是静态的,表述的是文档。
1.
HVML 的大部分标签用来定义动作元素。每个动作元素执行一个或者一组操作,所以这些标签使用英文中的动词;而 HTML 标准通常使用名词或其简写作为标签名称,如 HTML 的常见标签
`p`
是 paragraph(段落)的简写。
1.
HVML 的其他标签用来定义程序的框架或者一个模板,所以使用名词作为标签名称,如
`head`
和
`archetype`
,分别用来定义一个框架元素和模板元素。
1.
HVML 可混合使用 HTML、XML 等目标标记语言的标签,使用非 HVML 的标签用于定义一个外部元素。HVML 赋予所有的外部元素一个统一的操作:克隆该元素的属性和内容到当前的目标文档位置并隐式调整 HVML 程序的上下文数据。
1.
HVML 的标签名称、属性名称、变量名称和规则关键词是区分大小写的,这主要是为了和 XML 相关规范保持一致。
1.
HVML 元素支持如下几类属性:
-
通用属性。目前只有
`id`
一个通用属性;该属性用来指定元素的标识符。在 HVML 中,元素的标识符主要用于定位元素或者
执行栈
栈帧的位置。在外部元素中使用该属性时,则该属性及其属性值将被克隆到目标文档中。
-
名词属性。如
`name`
等,通常在
名词标签
中使用。
-
介词属性。如
`on`
、
`with`
等,在动词
标签
中使用。
-
副词属性。如
`uniquely`
等,在动词
标签
中使用。
-
通用属性。目前只有
`id`
一个通用属性;该属性用来指定元素的标识符。在 HVML 中,元素的标识符主要用于定位元素或者栈帧的位置。在外部元素中使用该属性时,则该属性及其属性值将被克隆到目标文档中。
-
名词属性。如
`name`
等,通常在
模板元素
中使用。
-
介词属性。如
`on`
、
`with`
等,在动词
元素
中使用。
-
副词属性。如
`uniquely`
等,在动词
元素
中使用。
现在对照上面的例子介绍 HVML 的一些特点。本文档其他章节也会引用这个例子的片段。
首先是数据驱动编程(data-driven programming)。通过基于数据的迭代、插入、更新、清除等操作,开发者不需要编写程序或者只要少量编写程序即可动态生成最终的 XML/HTML 文档。比如上面示例代码中的
`iterate`
标签,就在
`$users`
变量代表的数据(在
`head`
中使用
`init`
标签定义)上做迭代,然后在目标文档的
`ul`
元素中插入了若干
`li`
元素。而
`li`
元素的属性(包括子元素)由一个
`archetype`
标签定义,其中使用
`$?`
来指代被迭代的
`$users`
中的一个数据成员。
在上面的示例代码中,我们使用了系统内置变量
`$TIMERS`
来定义定时器,每个定时器有一个全局的标识符
,
间隔时间以及是否激活的标志。如果要激活一个定时器,我们只需要使用 HVML 的
`update`
标签来修改对应的键值,而不需要调用某个特定的编程接口。这是数据驱动编程的另一个用法——我们不需要为定时器或者其他的类似模块的操作提供额外的
API。
在上面的示例代码中,我们使用了系统内置变量
`$TIMERS`
来定义定时器,每个定时器有一个全局的标识符
、
间隔时间以及是否激活的标志。如果要激活一个定时器,我们只需要使用 HVML 的
`update`
标签来修改对应的键值,而不需要调用某个特定的编程接口。这是数据驱动编程的另一个用法——我们不需要为定时器或者其他的类似模块的操作提供额外的
应用编程接口(
API
)
。
另外,在上面的示例代码中,我们通过
`observe`
标签观察新的数据或文档本身的变化以及用户交互事件,可实现 XML/HTML 文档或数据的动态更新。比如在最后一个
`observe`
标签中,通过监听用户头像上的点击事件来装载一个新的
`user.hvml`
文件
,在新的渲染器页面展示对应用户的详细信息。
另外,在上面的示例代码中,我们通过
`observe`
标签观察新的数据或文档本身的变化以及用户交互事件,可实现 XML/HTML 文档或数据的动态更新。比如在最后一个
`observe`
标签中,通过监听用户头像上的点击事件来装载一个新的
`user.hvml`
程序
,在新的渲染器页面展示对应用户的详细信息。
其次是彻底解除界面、交互和数据之间的耦合。通过 HVML 引入的编程模型和方法,用于表述界面的 XML/HTML 文档内容可完全由 HVML 生成和动态调整,这避免了在程序代码中直接操作文档的数据结构(即文档对象树,或简称 DOM 树),而程序只需要关注数据本身的产生和处理即可。这样,就实现了界面和数据的解耦。比如:
-
HVML 可在文档片段模板或者数据模板中定义数据和 DOM 元素之间的映射关系(如示例代码中的
`archetype`
或
`archedata`
标签
),而无需编写额外的代码完成数据到 DOM 元素属性、内容等的赋值操作。
-
HVML 将错误和异常的展现和程序代码分离了开来,程序只要
产生
适当的错误或者异常(如示例代码中的
`error`
和
`except`
标签),而对错误或者异常的处理则直接在 HVML 中定义,这不仅仅将程序和界面隔离了开来,同时还提高了代码的可维护性
。
-
HVML 可在文档片段模板或者数据模板中定义数据和 DOM 元素之间的映射关系(如示例代码中的
`archetype`
或
`archedata`
元素
),而无需编写额外的代码完成数据到 DOM 元素属性、内容等的赋值操作。
-
HVML 将错误和异常的展现和程序代码分离了开来,程序只要
定义
适当的错误或者异常
模板
(如示例代码中的
`error`
和
`except`
元素),即可定义好错误或者异常情形下要展示的内容,而无需更多的程序处理
。
再次是数据的 JSON 表达。HVML 对文档和数据的操作提供了一致接口。HVML 要求所有外部数据均使用 JSON 格式表述,JSON 格式是一种人机共读的数据表述形式,可在数值、字符串、数组、字典等基本数据单元的基础上表述复杂对象。由于 HTML/XML 文档片段(DOM 子树)可表述为 JSON 格式的数据,因此,HVML 亦可用于操作
使用 JSON 表述的数据
。在 HVML 中,我们还提供了对动态
JSON
对象的支持,我们可以使用外部程序来实现自己的动态
JSON
对象,且可以在这些对象上执行类似函数调用一样的功能。
再次是数据的 JSON 表达。HVML 对文档和数据的操作提供了一致接口。HVML 要求所有外部数据均使用 JSON 格式表述,JSON 格式是一种人机共读的数据表述形式,可在数值、字符串、数组、字典等基本数据单元的基础上表述复杂对象。由于 HTML/XML 文档片段(DOM 子树)可表述为 JSON 格式的数据,因此,HVML 亦可用于操作
目标文档
。在 HVML 中,我们还提供了对动态对象的支持,我们可以使用外部程序来实现自己的动态对象,且可以在这些
动态
对象上执行类似函数调用一样的功能。
最后,HVML 通过动作标签(通常都是一些英文的动词,如
`init`
、
`update`
、
`iterate`
等)以及与之配合的介词或副词属性来定义动作标签所依赖的数据、目标操作位置以及执行条件来完成特定的
文档
操作。这和常见的编程语言有很大不同,HVML 的描述方式更加贴近自然语言,从而可以大幅降低学习门槛。
最后,HVML 通过动作标签(通常都是一些英文的动词,如
`init`
、
`update`
、
`iterate`
等)以及与之配合的介词或副词属性来定义动作标签所依赖的数据、目标操作位置以及执行条件来完成特定的操作。这和常见的编程语言有很大不同,HVML 的描述方式更加贴近自然语言,从而可以大幅降低学习门槛。
为方便区分,我们将解析 HVML 程序之后生成的 DOM 树称为 vDOM(虚拟 DOM),而目标文档对应的 DOM 树,称为 eDOM(有效 DOM)。
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment