想写 JSX,又不想用编译器?HTM 可以帮你

简介: HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

原文作者:HTM Team

译者:UC 国际研发 Jothy

写在最前:欢迎你来到“UC国际技术”公众号,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译。

image.png

HTM 是纯 JavaScript 实现的类 JSX 的语法 - 无需转换器就可以使用。

你可直接使用 React/Preact 在浏览器中开发,然后将 HTM 编译为生产包。它使用标准 JavaScript 标签模板,适用于所有现代浏览器。
项目地址:https://github.com/developit/htm

HTM 的各项数据
直接在浏览器中使用时 < 700 bytes

️ 与 Preact 一起使用时 < 500 bytes(感谢 gzip )

使用 babel-plugin-htm 编译时 0 bytes

语法:类 JSX,但有所提升

  • 使用 HTM 编写的语法无限接近 JSX :
  • Spread props:
  • 自关闭标签:
  • 组件: <${Foo}> (其中 Foo 是组件引用)
  • 布尔属性:

对 JSX 的改进

实际上 HTM 更深度采用了 JSX 风格的语法!

以下是 JSX 中不具备的符合人体工程学的功能:

无需编译器

  • HTML 引号可选:
  • 组件结束标记: <${Footer}>footer content/>
  • 通过 lit-html VSCode 插件实现语法高亮和语言支持

HTM 2.0 发布啦!

我们使用全新的自定义 JSX 解析器,从头开始构建 HTM 的性能和大小。

这对你来说意味着什么?

  • HTM 速度提升了 20 倍
  • …体积缩小了 10%
  • …随处运行(原生 SSR!)
  • 语法无限接近 JSX
  • 缓存速度提高20%
  • 更优的输出

全新的 Babel 插件!

我们的 Babel 插件也进行了大幅修改! 它的速度提高了 1-2 个量级,不再需要 JSDOM,并且支持自定义输出。

此更新还修复了缓存、边缘情况和空白处理相关的多个问题。

还带来了新语法?

是的,但别慌。 现在写 HTM 基本上就是在写 JSX。你只需要记住两件事:

之类的组件写做 <${Foo}>

{a} 之类的字段写为 ${a}

其他一切与 JSX 相同。

目录
相关文章
|
9月前
|
JSON JavaScript 前端开发
js有哪些内置对象?
js有哪些内置对象?
|
JavaScript 前端开发
在JSX中书写JS代码
在JSX中书写JS代码
在JSX中书写JS代码
|
6月前
|
JavaScript
js流程控制语句
js流程控制语句
23 0
|
6月前
|
JavaScript 开发者
js之内置对象学习
js之内置对象学习
41 0
|
9月前
|
JavaScript
JS 基本语法
JS 基本语法
61 1
|
JavaScript 前端开发
js条件语句
条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句,最基本的条件语句: if…else if…else语句是一种最基本的控制语句,它让JavaScript可以有条件的执行语句。
|
JSON JavaScript 前端开发
|
XML 机器学习/深度学习 JSON
|
JavaScript 前端开发 程序员
JS 的基本语法
JS 的基本语法
131 0
|
JavaScript 前端开发
JS 的基本语法介绍
JS 的基本语法介绍
115 0