【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

More than React(四)HTML 也可以静态编译?

  • 2016-11-22
  • 本文字数:4602 字

    阅读完需:约 15 分钟

《More than React》系列的上一篇文章《虚拟DOM 已死?》比较了 Binding.scala 和其他框架的渲染机制。本篇文章中将介绍 Binding.scala 中的 XHTML 语法。

一、其他前端框架的问题

对 HTML 的残缺支持

以前我们使用其他前端框架,比如 Cycle.js 、 Widok 、 ScalaTags 时,由于框架不支持 HTML 语法,前端工程师被迫浪费大量时间,手动把 HTML 改写成代码,然后慢慢调试。

就算是支持 HTML 语法的框架,比如 ReactJS ,支持状况也很残缺不全。

比如,在 ReactJS 中,你不能这样写:

复制代码
<span>class</span> BrokenReactComponent extends React.Component {
render() {
<span>return</span> (
<span><span><<span>ol</span>></span>
<span><<span>li</span> <span>class</span>=<span>"unsupported-class"</span>></span> 不支持 class 属性 <span></<span>li</span>></span>
<span><<span>li</span> <span>style</span>=<span>"background-color: red"</span>></span> 不支持 style 属性 <span></<span>li</span>></span>
<span><<span>li</span>></span>
<span><<span>input</span> <span>type</span>=<span>"checkbox"</span> <span>id</span>=<span>"unsupported-for"</span>/></span>
<span><<span>label</span> <span>for</span>=<span>"unsupported-for"</span>></span> 不支持 for 属性 <span></<span>label</span>></span>
<span></<span>li</span>></span>
<span></<span>ol</span>></span>
);
}
}</span>

前端工程师必须手动把 classfor 属性替换成 classNamehtmlFor,还要把内联的 style 样式从 CSS 语法改成 JSON 语法,代码才能运行:

复制代码
<span>class</span> WorkaroundReactComponent extends React.Component {
render() {
<span>return</span> (
<span><span><<span>ol</span>></span>
<span><<span>li</span> <span>className</span>=<span>"workaround-class"</span>></span> 被迫把 class 改成 className<span></<span>li</span>></span>
<span><<span>li</span> <span>style</span>=<span>{{</span> <span>backgroundColor:</span> "<span>red</span>" }}></span> 被迫把样式表改成 JSON<span></<span>li</span>></span>
<span><<span>li</span>></span>
<span><<span>input</span> <span>type</span>=<span>"checkbox"</span> <span>id</span>=<span>"workaround-for"</span>/></span>
<span><<span>label</span> <span>htmlFor</span>=<span>"workaround-for"</span>></span> 被迫把 for 改成 htmlFor<span></<span>label</span>></span>
<span></<span>li</span>></span>
<span></<span>ol</span>></span>
);
}
}</span>

这种开发方式下,前端工程师虽然可以把 HTML 原型复制粘贴到代码中,但还需要大量改造才能实际运行。比 Cycle.js 、 Widok 或者 ScalaTags 省不了太多事。

不兼容原生 DOM 操作

此外,ReactJS 等一些前端框架,会生成虚拟 DOM 。虚拟 DOM 无法兼容浏览器原生的 DOM API ,导致和 jQuery 、 D3 等其他库协作时困难重重。比如 ReactJS 更新 DOM 对象时常常会破坏掉 jQuery 控件。

Reddit 很多人讨论了这个问题。他们没有办法,只能弃用 jQuery。我司的某客户在用了 ReactJS 后也被迫用 ReactJS 重写了大量 jQeury 控件。

二、Binding.scala 中的 XHTML

现在有了 Binding.scala ,可以在 @dom 方法中,直接编写 XHTML。比如:

复制代码
@dom def introductionDiv = {
<span><span><<span>div</span> <span>style</span>=<span>"font-size:0.8em"</span>></span>
<span><<span>h3</span>></span>Binding.scala 的优点 <span></<span>h3</span>></span>
<span><<span>ul</span>></span>
<span><<span>li</span>></span> 简单 <span></<span>li</span>></span>
<span><<span>li</span>></span> 概念少 <span><<span>br</span>/></span> 功能多 <span></<span>li</span>></span>
<span></<span>ul</span>></span>
<span></<span>div</span>></span>
}</span>

以上代码会被编译,直接创建真实的 DOM 对象,而没有虚拟 DOM 。

Binding.scala 对浏览器原生 DOM 的支持很好,你可以在这些 DOM 对象上调用 DOM API ,与 D3 、 jQuery 等其他库交互也完全没有问题。

ReactJS 对 XHTML 语法的残缺不全。相比之下,Binding.scala 支持完整的 XHTML 语法,前端工程师可以直接把设计好的 HTML 原型复制粘贴到代码中,整个网站就可以运行了。

Binding.scala 中 XHTML 的类型

@dom 方法中 XHTML 对象的类型是 Node 的派生类。

比如,<div></div> 的类型就是 HTMLDivElement ,而 <button></button> 的类型就是 HTMLButtonElement

此外, @dom 注解会修改整个方法的返回值,包装成一个 Binding

复制代码
@dom def typedButton: Binding[HTMLButtonElement] = {
<span><span><<span>button</span>></span> 按钮 <span></<span>button</span>></span>
}</span>

注意typedButton是个原生的HTMLButtonElement,所以可以直接对它调用 DOM API。比如:

复制代码
@dom val autoPrintln: Binding[Unit] = {
println(typedButton.bind.innerHTML)
}
autoPrintln.watch()

这段代码中,typedButton.bind.innerHTML 调用了 DOM API HTMLButtonElement.innerHTML 。通过autoPrintln.watch(),每当按钮发生更新,autoPrintln中的代码就会执行一次。

其他 HTML 节点

Binding.scala 支持 HTML 注释:

复制代码
@dom def comment = {
<span>
}</span>

Binding.scala 也支持 CDATA 块:

复制代码
@dom def inlineStyle = {
<span><span><<span>section</span>></span>
<span><<span>style</span>></span><span><!<span>[CDATA[ .highlight { background-color:gold } ]</span>]></span><span></<span>style</span>></span>
<span><<span>p</span> <span>class</span>=<span>"highlight"</span>></span>Binding.scala 真好用!<span></<span>p</span>></span>
<span></<span>section</span>></span>
}</span>

内嵌 Scala 代码

除了可以把 XHTML 内嵌在 Scala 代码中的 @dom 方法中,Binding.scala 还支持用 { ... } 语法把 Scala 代码内嵌到 XHTML 中。比如:

复制代码
@dom def randomParagraph = {
<span><span><<span>p</span>></span> 生成一个随机数: { math.random.toString }<span></<span>p</span>></span>
}</span>

XHTML 中内嵌的 Scala 代码可以用 .bind 绑定变量或者调用其他 @dom 方法,比如:

复制代码
val now = Var(<span>new</span> <span>Date</span>)
window.setInterval(<span>1000</span>) { now := <span>new</span> <span>Date</span> }
@dom def render = {
<span><span><<span>div</span>></span>
现在时间:{ now.bind.toString }
{ introductionDiv.bind }
{ inlineStyle.bind }
{ typedButton.bind }
{ comment.bind }
{ randomParagraph.bind }
<span></<span>div</span>></span>
}</span>

上述代码渲染出的网页中,时间会动态改变。

强类型的 XHTML

Binding.scala 中的 XHTML 都支持静态类型检查。比如:

复制代码
@dom def typo = {
val myDiv = <span><span><<span>div</span> <span>typoProperty</span>=<span>"xx"</span>></span>content<span></<span>div</span>></span>
myDiv.typoMethod()
myDiv
}</span>

由于以上代码有拼写错误,编译器就会报错:

复制代码
typo.scala:<span>23</span>: value typoProperty is not a member of org.scalajs.dom.html.Div
val myDiv = <span><span><<span>div</span> <span>typoProperty</span>=<span>"xx"</span>></span>content<span></<span>div</span>></span>
^
typo.scala:24: value typoMethod is not a member of org.scalajs.dom.html.Div
myDiv.typoMethod()
^</span>

内联 CSS 属性

style 属性设置内联样式时,style 的值是个字符串。比如:

复制代码
@dom def invalidInlineStyle = {
<span><span><<span>div</span> <span>style</span>=<span>"color: blue; typoStyleName: typoStyleValue"</span>></span><span></<span>div</span>></span>
}</span>

以上代码中设置的 typoStyleName 样式名写错了,但编译器并没有报错。

要想让编译器能检查内联样式,可以用 style: 前缀而不用 style 属性。比如:

复制代码
@dom def invalidInlineStyle = {
<span><span><<span>div</span> <span>style:color</span>=<span>"blue"</span> <span>style:typoStyleName</span>=<span>"typoStyleValue"</span>></span><span></<span>div</span>></span>
}</span>

那么编译器就会报错:

复制代码
typo.scala:<span>28</span>: value typoStyleName is not a member of org.scalajs.dom.raw.CSSStyleDeclaration
<div style:color=<span>"blue"</span> style:typoStyleName=<span>"typoStyleValue"</span>><span><span></<span>div</span>></span>
^</span>

这样一来,可以在编写代码时就知道属性有没有写对。不像原生 JavaScript / HTML / CSS 那样,遇到 bug 也查不出来。

自定义属性

如果你需要绕开对属性的类型检查,以便为 HTML 元素添加定制数据,你可以属性加上 data: 前缀,比如:

复制代码
@dom def myCustomDiv = {
<span><span><<span>div</span> <span>data:customAttributeName</span>=<span>"attributeValue"</span>></span><span></<span>div</span>></span>
}</span>

这样一来 Scala 编译器就不会报错了。

三、结论

本文的完整 DEMO 请访问 ScalaFiddle

从这些示例可以看出,Binding.scala 一方面支持完整的 XHTML ,可以从高保真 HTML 原型无缝移植到动态网页中,开发过程极为顺畅。另一方面,Binding.scala 可以在编译时静态检查 XHTML 中出现语法错误和语义错误,从而避免 bug 。

以下表格对比了 ReactJS 和 Binding.scala 对 HTML 语法的支持程度:

我将在下一篇文章中介绍 Binding.scala 如何实现服务器发送请求并在页面显示结果的流程。

四、相关链接

五、More than React 系列文章

《More than React(一)为什么ReactJS 不适合复杂交互的前端项目?》

《More than React(二)组件对复用性有害?》

《More than React(三)虚拟DOM 已死?》

《More than React(四)HTML 也可以静态编译?》

《More than React(五)异步编程真的好吗?》

作者简介

杨博是 Haxe 和 Scala 社区的活跃贡献者,发起和维护的开源项目包括 protoc-gen-as3 Stateless Future haxe-continuation Fastring Each Microbuilder Binding.scala 。杨博曾在网易任主程序和项目经理,开发过多款游戏。现在 ThoughtWorks 任 Lead Consultant,为客户提供移动、互联网、大数据、人工智能和深度学习领域的解决方案。


感谢张凯峰对本文的策划,韩婷对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2016-11-22 02:005697

评论

发布
暂无评论
发现更多内容

数字经济时代文化消费新特征

CECBC

2023年广州美博会时间地点详情

Geek_0b38bb

美博会 2023年广州美博会 春季广州美博会 广州春季美博会

你了解shiro吗?手把手教你集成shiro

阿Q说代码

springboot 鉴权 shiro 身份验证

观测云更新|观测云帮助文档全新上线;新增 Profile 可观测新增 Profile 可观测;新增 Deployment 网络详情及网络分布等

观测云

如何实现一套容器(C语言版)1

祖维

c 容器 泛型 迭代器

盘点四种WiFi加密标准:WEP、WPA、WPA2、WPA3

wljslmz

wifi 6月月更 无线安全 wpa3 wep

零信任安全模型-下一代网络安全架构

领创集团Advance Intelligence Group

架构 网络安全 零信任

基于 ShardingSphere 的得物数据库中间件平台“彩虹桥”演进之路

SphereEx

数据库 中间件 ShardingSphere 实践

泛型的类型擦除后,fastjson反序列化时如何还原?

码农参上

泛型 底层知识 Java 开发

墨天轮访谈 | IvorySQL王志斌—IvorySQL,一个基于PostgreSQL的兼容Oracle的开源数据库

墨天轮

数据库 oracle postgresql 开源

解读2022年度敏捷教练行业现状报告

华为云开发者联盟

后端 开发 华为云

如何利用数仓创建时序表

华为云开发者联盟

数据库 后端 华为云 时序表

基于微信小程序的婚纱影楼小程序开发笔记

CC同学

小程序

Java基础:集合框架之Map

百思不得小赵

map Java’ 6月月更

区块链为化解信任危机带来新契机

CECBC

ElasticSearch第二弹之分片原理

阿Q说代码

ES shard replica

JDBC 在性能测试中的应用

阿里巴巴云原生

阿里云 云原生 JDBC 压测

中国移动应用出海发展天地宽

WorkPlus

深入理解和把握数字经济的基本特征

CECBC

理论+案例,带你掌握Angular依赖注入模式的应用

华为云开发者联盟

程序员 前端 华为云

力扣每日一练之字符串Day6

京与旧铺

6月月更

vue快速学习、基础用法

开发微hkkf5566

SaaS 云工具,产业互联网下的变革利器

小炮

NLP 论文领读|改善意图识别的语义表示:有监督预训练中的各向同性正则化方法

澜舟孟子开源社区

人工智能 自然语言处理 深度学习 预训练模型

FastApi+Vue+LayUI实现前后端分离

Python研究所

6月月更

20省市公布元宇宙路线图

CECBC

SAVE: 软件分析验证和测试平台

华为云开发者联盟

云计算 测试 后端 开发 软件分析

港股多支个股表现活跃,引发投资者对港股市场回暖猜想与关注

E科讯

JDK动态代理为什么必须要基于接口?

码农参上

JAVA开发 动态代理 底层知识

Go语言Redis API基本功能实践

FunTester

Gartner:如何在中国成功应用多云模式

WorkPlus

More than React(四)HTML也可以静态编译?_JavaScript_杨博_InfoQ精选文章