More than React（四）HTML也可以静态编译？

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

\u0026#xD;\u0026#xD;

一、其他前端框架的问题

\u0026#xD;\u0026#xD;

对 HTML 的残缺支持

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

比如，在 ReactJS 中，你不能这样写：

\u0026#xD;\u0026#xD;

\u0026#xD;class BrokenReactComponent extends React.Component {\u0026#xD;  render() {\u0026#xD;    return (\u0026#xD;      \u0026lt;ol\u0026gt;\u0026#xD;        \u0026lt;li class=\"unsupported-class\"\u0026gt;不支持 class 属性\u0026lt;/li\u0026gt;\u0026#xD;        \u0026lt;li style=\"background-color: red\"\u0026gt;不支持 style 属性\u0026lt;/li\u0026gt;\u0026#xD;        \u0026lt;li\u0026gt;\u0026#xD;          \u0026lt;input type=\"checkbox\" id=\"unsupported-for\"/\u0026gt;\u0026#xD;          \u0026lt;label for=\"unsupported-for\"\u0026gt;不支持 for 属性\u0026lt;/label\u0026gt;\u0026#xD;        \u0026lt;/li\u0026gt;\u0026#xD;      \u0026lt;/ol\u0026gt;\u0026#xD;    );\u0026#xD;  }\u0026#xD;}

\u0026#xD;\u0026#xD;

前端工程师必须手动把 class 和 for 属性替换成 className 和 htmlFor，还要把内联的 style 样式从 CSS 语法改成 JSON 语法，代码才能运行：

\u0026#xD;\u0026#xD;

\u0026#xD;class WorkaroundReactComponent extends React.Component {\u0026#xD;  render() {\u0026#xD;    return (\u0026#xD;      \u0026lt;ol\u0026gt;\u0026#xD;        \u0026lt;li className=\"workaround-class\"\u0026gt;被迫把 class 改成 className\u0026lt;/li\u0026gt;\u0026#xD;        \u0026lt;li style={{ backgroundColor: \"red\" }}\u0026gt;被迫把样式表改成 JSON\u0026lt;/li\u0026gt;\u0026#xD;        \u0026lt;li\u0026gt;\u0026#xD;          \u0026lt;input type=\"checkbox\" id=\"workaround-for\"/\u0026gt;\u0026#xD;          \u0026lt;label htmlFor=\"workaround-for\"\u0026gt;被迫把 for 改成 htmlFor\u0026lt;/label\u0026gt;\u0026#xD;        \u0026lt;/li\u0026gt;\u0026#xD;      \u0026lt;/ol\u0026gt;\u0026#xD;    );\u0026#xD;  }\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

不兼容原生 DOM 操作

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

二、Binding.scala 中的 XHTML

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def introductionDiv = {\u0026#xD;  \u0026lt;div style=\"font-size:0.8em\"\u0026gt;\u0026#xD;    \u0026lt;h3\u0026gt;Binding.scala的优点\u0026lt;/h3\u0026gt;\u0026#xD;    \u0026lt;ul\u0026gt;\u0026#xD;      \u0026lt;li\u0026gt;简单\u0026lt;/li\u0026gt;\u0026#xD;      \u0026lt;li\u0026gt;概念少\u0026lt;br/\u0026gt;功能多\u0026lt;/li\u0026gt;\u0026#xD;    \u0026lt;/ul\u0026gt;\u0026#xD;  \u0026lt;/div\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

Binding.scala 中 XHTML 的类型

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

比如，\u0026lt;div\u0026gt;\u0026lt;/div\u0026gt; 的类型就是 HTMLDivElement，而 \u0026lt;button\u0026gt;\u0026lt;/button\u0026gt; 的类型就是 HTMLButtonElement。

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def typedButton: Binding[HTMLButtonElement] = {\u0026#xD;  \u0026lt;button\u0026gt;按钮\u0026lt;/button\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom val autoPrintln: Binding[Unit] = {\u0026#xD;  println(typedButton.bind.innerHTML) \u0026#xD;}\u0026#xD;autoPrintln.watch()

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

其他 HTML 节点

\u0026#xD;\u0026#xD;

Binding.scala 支持 HTML 注释：

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def comment = {\u0026#xD;  \u0026#xD;}

\u0026#xD;\u0026#xD;

Binding.scala 也支持 CDATA 块：

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def inlineStyle = {\u0026#xD;  \u0026lt;section\u0026gt;\u0026#xD;    \u0026lt;style\u0026gt;\u0026lt;![CDATA[      .highlight {        background-color:gold      }    ]]\u0026gt;\u0026lt;/style\u0026gt;\u0026#xD;    \u0026lt;p class=\"highlight\"\u0026gt;Binding.scala真好用！\u0026lt;/p\u0026gt;\u0026#xD;  \u0026lt;/section\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

内嵌 Scala 代码

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def randomParagraph = {\u0026#xD;  \u0026lt;p\u0026gt;生成一个随机数： { math.random.toString }\u0026lt;/p\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;val now = Var(new Date)\u0026#xD;window.setInterval(1000) { now := new Date }\u0026#xD;@dom def render = {\u0026#xD;  \u0026lt;div\u0026gt;\u0026#xD;    现在时间：{ now.bind.toString }\u0026#xD;    { introductionDiv.bind }\u0026#xD;    { inlineStyle.bind }\u0026#xD;    { typedButton.bind }\u0026#xD;    { comment.bind }\u0026#xD;    { randomParagraph.bind }\u0026#xD;  \u0026lt;/div\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

强类型的 XHTML

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def typo = {\u0026#xD;  val myDiv = \u0026lt;div typoProperty=\"xx\"\u0026gt;content\u0026lt;/div\u0026gt;\u0026#xD;  myDiv.typoMethod()\u0026#xD;  myDiv\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;typo.scala:23: value typoProperty is not a member of org.scalajs.dom.html.Div\u0026#xD;        val myDiv = \u0026lt;div typoProperty=\"xx\"\u0026gt;content\u0026lt;/div\u0026gt;\u0026#xD;                     ^\u0026#xD;typo.scala:24: value typoMethod is not a member of org.scalajs.dom.html.Div\u0026#xD;        myDiv.typoMethod()\u0026#xD;              ^

\u0026#xD;\u0026#xD;

内联 CSS 属性

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def invalidInlineStyle = {\u0026#xD;  \u0026lt;div style=\"color: blue; typoStyleName: typoStyleValue\"\u0026gt;\u0026lt;/div\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def invalidInlineStyle = {\u0026#xD;  \u0026lt;div style:color=\"blue\" style:typoStyleName=\"typoStyleValue\"\u0026gt;\u0026lt;/div\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

那么编译器就会报错：

\u0026#xD;\u0026#xD;

\u0026#xD;typo.scala:28: value typoStyleName is not a member of org.scalajs.dom.raw.CSSStyleDeclaration\u0026#xD;        \u0026lt;div style:color=\"blue\" style:typoStyleName=\"typoStyleValue\"\u0026gt;\u0026lt;/div\u0026gt;\u0026#xD;         ^

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

自定义属性

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

\u0026#xD;@dom def myCustomDiv = {\u0026#xD;  \u0026lt;div data:customAttributeName=\"attributeValue\"\u0026gt;\u0026lt;/div\u0026gt;\u0026#xD;}

\u0026#xD;\u0026#xD;

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

\u0026#xD;\u0026#xD;

三、结论

\u0026#xD;\u0026#xD;

本文的完整 DEMO 请访问 ScalaFiddle。

\u0026#xD;\u0026#xD;

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