《More than React》系列的上一篇文章《虚拟DOM已死？》中比较了 Binding.scala 和其他框架的渲染机制。
（关注『前端之巅』公众号，发送“杨博”，查看More than React系列文章）本篇文章中将介绍 Binding.scala 中的 XHTML 语法。
其他前端框架的问题
对 HTML 的残缺支持
以前我们使用其他前端框架，比如 Cycle.js 、 Widok 、 ScalaTags 时，由于框架不支持 HTML 语法，前端工程师被迫浪费大量时间，手动把 HTML 改写成代码，然后慢慢调试。
就算是支持 HTML 语法的框架，比如 ReactJS ，支持状况也很残缺不全。
比如，在 ReactJS 中，你不能这样写：
前端工程师必须手动把 class 和 for 属性替换成 className 和 htmlFor，还要把内联的 style 样式从 CSS 语法改成 JSON 语法，代码才能运行：
这种开发方式下，前端工程师虽然可以把 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 对象，而没有虚拟 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。
注意typedButton是个原生的HTMLButtonElement，所以可以直接对它调用 DOM API。比如：
这段代码中，typedButton.bind.innerHTML 调用了 DOM API HTMLButtonElement.innerHTML。通过autoPrintln.watch()，每当按钮发生更新，autoPrintln中的代码就会执行一次。
其他 HTML 节点
Binding.scala 支持 HTML 注释：
Binding.scala 也支持 CDATA 块：
内嵌 Scala 代码
除了可以把 XHTML 内嵌在 Scala 代码中的 @dom 方法中，Binding.scala 还支持用 { … } 语法把 Scala 代码内嵌到 XHTML 中。比如：
XHTML 中内嵌的 Scala 代码可以用 .bind 绑定变量或者调用其他 @dom 方法，比如：
上述代码渲染出的网页中，时间会动态改变。
强类型的 XHTML
Binding.scala 中的 XHTML 都支持静态类型检查。比如：
由于以上代码有拼写错误，编译器就会报错：
内联 CSS 属性
用 style 属性设置内联样式时，style 的值是个字符串。比如：
以上代码中设置的 typoStyleName 样式名写错了，但编译器并没有报错。
要想让编译器能检查内联样式，可以用 style: 前缀而不用 style 属性。比如：
那么编译器就会报错：
这样一来，可以在编写代码时就知道属性有没有写对。不像原生 JavaScript / HTML / CSS 那样，遇到 bug 也查不出来。
自定义属性
如果你需要绕开对属性的类型检查，以便为 HTML 元素添加定制数据，你可以属性加上 data: 前缀，比如：
这样一来 Scala 编译器就不会报错了。
结论
本文的完整 DEMO 请访问 ScalaFiddle
（https://scalafiddle.io/sf/Sc0RmDj/3）。
从这些示例可以看出，Binding.scala 一方面支持完整的 XHTML ，可以从高保真 HTML 原型无缝移植到动态网页中，开发过程极为顺畅。另一方面，Binding.scala 可以在编译时静态检查 XHTML 中出现语法错误和语义错误，从而避免 bug 。
以下表格对比了 ReactJS 和 Binding.scala 对 HTML 语法的支持程度：
我将在下一篇文章中介绍 Binding.scala 如何实现服务器发送请求并在页面显示结果的流程。
相关链接
-
Binding.scala 项目主页 https://github.com/ThoughtWorksInc/Binding.scala
-
Binding.scala • TodoMVC 项目主页 https://github.com/ThoughtWorksInc/todo
-
Binding.scala • TodoMVC DEMO https://thoughtworksinc.github.io/todo
-
Binding.scala • TodoMVC 以外的其他 DEMO https://thoughtworksinc.github.io/Binding.scala/
-
JavaScript 到 Scala.js 移植指南 https://www.scala-js.org/doc/sjs-for-js/es6-to-scala-part1.html
-
Scala.js 项目主页 http://www.scala-js.org/
-
Scala API 参考文档 http://www.scala-lang.org/api/current/index.html
-
Scala.js API 参考文档 http://www.scala-js.org/api/scalajs-library/0.6.9/index.html
-
Scala.js DOM API 参考文档 http://www.scala-js.org/api/scalajs-dom/0.8/index.html
-
Binding.scala快速上手指南 https://www.zybuluo.com/atry/note/447914
-
Binding.scala API参考文档 https://oss.sonatype.org/service/local/repositories/releases/archive/com/thoughtworks/binding/unidoc2.11/5.4.0/unidoc2.11-5.4.0-javadoc.jar/!/com/thoughtworks/binding/package.html
-
Binding.scala 的 Gitter 聊天室 https://gitter.im/ThoughtWorksInc/Binding.scala
作者简介
**杨博，**Haxe 和 Scala 社区的活跃贡献者，发起和维护的开源项目包括 protoc-gen-as3、Stateless Future、haxe-continuation、Fastring、Each、Microbuilder、Binding.scala 。杨博曾在网易任主程序和项目经理，开发过多款游戏。现在ThoughtWorks任Lead Consultant，为客户提供移动、互联网、大数据、人工智能和深度学习领域的解决方案。
本文为『前端之巅』特供稿件，未经许可，拒绝任何形式的转载。申请入群请关注『前端之巅』公众号并发送“加群”。
『前端之巅』欢迎各种形式投稿，欢迎前端工程师加群学习，相关信息请关注『前端之巅』公众号并发送“投稿”或“加群”。
长按二维码关注
**
前 端 之 巅
**
紧 跟 前 端 发 展
共 享 一 线 技 术
不 断 学 习 进 步
攀 登 前 端 之 巅
