精读《Htm - Hyperscript 源码》

li21 发布于2019-08-23 13:51 / 2573人阅读

摘要：精读你可以先自己尝试阅读，源码加上注释一共行源码。是个抽象概念，它负责将实体语法树解析为。讨论地址是精读源码如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读帮你筛选靠谱的内容。

1 引言

htm 是 preact 作者的新尝试，利用原生 HTML 规范支持了类 JSX 的写法。

2 概要

htm 没有特别的文档，假如你用过 JSX，那只需要记住下面三个不同点：

className -> class。

标签引号可选（回归 html 规范）：

。

支持 HTML 模式的注释：

。

另外支持了可选结束标签、快捷组件 End 标签，不过这些自己发明的语法不建议记忆。

用法也没什么特别的地方，你可以利用 HTML 原生规范，用直觉去写 JSX：

html`
  
    <${Header} name="ToDo"s (${page})" />
    
      ${todos.map(
        todo => html`
          ${todo}
        `
      )}
    
    
    <${Footer}>footer content here
  
`;

很显然，由于跳过了 JSX 编译，换成了原生的 Template Strings ，所以所有组件、属性部分都需要改成 ${} 语法，比如：

<${Header}> 这种写法略显别扭，但整体上还是蛮直观的。

你不一定非要用在项目环境中，但当你看到这种语法时，内心一定情不自禁的 WoW，竟然还有这种写法！

下面将带你一起分析 htm 的源码，看看作者是如何做到的。

3 精读

你可以先自己尝试阅读，源码加上注释一共 90 行：源码。

好了，欢迎继续阅读。

首先你要认识到， htm + vhtml 才等于你上面看到的 DEMO。

Htm

Htm 是一个 dom template 解析器，它可以将任何 dom template 解析成一颗语法树，而这个语法树的结构是：

interface VDom {
  tag: string;
  props: {
    [attrKey: string]: string;
  };
  chindren: VDom[];
}

我们看一个 demo：

function h(tag, props, ...children) {
  return { tag, props, children };
}

const html = htm.bind(h);

html`
  123
`; // { tag: "div", props: {}, children: ["123"] }

那具体是怎么做语法解析的呢？

其实实现方式有点像脑经急转弯，毕竟解析 dom template 是浏览器引擎做的事，规范也早已定了下来，有了规范和实现，当然没必要重复造轮子，办法就是利用 HTML 的 AST 生成我们需要的 AST。

首先创建一个 template 元素：

const TEMPLATE = document.createElement("template");

再装输入的 dom template 字符串塞入（作者通过正则，机智的将自己支持的额外语法先转化为标准语法，再交给 HTML 引擎）：

TEMPLATE.innerHTML = str;

最后我们会发现进入了 walk 函数，通过 localName 拿到标签名；attributes 拿到属性值，通过 firstChild 与 nextSibling 遍历子元素继续走 walk，最后 tag props children 三剑客就生成了。

可能你还没看完，就已经结束了。笔者分析这个库，除了告诉你作者的机智思路，还想告诉你的是，站在巨人的肩膀造轮子，真的事半功倍。

VDom

VDom 是个抽象概念，它负责将实体语法树解析为 DOM。这个工具可以是 preact、vhtml，或者由你自己来实现。

当然，你也可以利用这个 AST 生成 JSON，比如：

import htm from "htm";
import jsxobj from "jsxobj";

const html = htm.bind(jsxobj);

console.log(html`
  
    
  
`);
// {
//   watch: true,
//   mode: "production",
//   entry: {
//     path: "src/index.js"
//   }
// }

读到这，你觉得还有哪些 “VDom” 可以写呢？其实任何可以根据 tag props children 推导出的结构都可以写成解析插件。

4 总结

htm 是一个教科书般借力造论子案例：

利用 innerHTML 会自动生成的标准 AST，解析出符合自己规范的 AST，这其实是进一步抽象 AST。

利用原有库进行 DOM 解析，比如 preact 或 vhtml。

基于第二点，所以可以生成任何目标代码，比如 json，pdf，excel 等等。

不过这也带来了一个问题：依赖原生 DOM API 会导致无法运行在 NodeJS 环境。

想一想你现在开发的工具库，有没有可以借力的地方呢？有哪些点可以通过借力做得更好从而实现双赢呢？欢迎留下你的思考。

讨论地址是：精读《Htm - Hyperscript 源码》 · Issue #114 · dt-fe/weekly

如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

GPU云服务器云服务器 Hyperscript htm java .htm 调用htm

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99677.html

精读《源码学习》

摘要：精读原文介绍了学习源码的两个技巧，并利用实例说明了源码学习过程中可以学到许多周边知识，都让我们受益匪浅。讨论地址是精读源码学习如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1. 引言 javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性，精读系列也已有八期源码系列文章，分别是：精读《Immer.js》源...

aboutU 2019-08-26 10:15 评论0 收藏0
基于Virtual DOM与Diff DOM的测试代码生成

摘要：但是，我还是觉得这是一个非常不错的话题测试代码生成。，用于创建虚拟树的。，用于修改的内容。而第二个则是文本的变化从变成了。我们所要做的测试生成便是标记这些变化，并记录之。其他源码见原文基于与的测试代码生成尽管是在年末，并且也还没把书翻译完，也还没写完书的第一稿。但是，我还是觉得这是一个非常不错的话题——测试代码生成。当我们在写一些UI测试的时候，我们总需要到浏览器去看一下一些DOM...

CoXie 2019-08-19 17:15 评论0 收藏0
精读《react-easy-state 源码》

摘要：会自动触发函数内回调函数的执行。因此利用并将依赖置为使代码在所有渲染周期内，只在初始化执行一次。同时代码里还对等公共方法进行了包装，让这些回调函数中自带效果。前端精读帮你筛选靠谱的内容。 1. 引言 react-easy-state 是个比较有趣的库，利用 Proxy 创建了一个非常易用的全局数据流管理方式。 import React from react; import { stor...

curlyCheng 2019-08-23 16:48 评论0 收藏0
精读《Inject Instance 源码》

摘要：引言本周精读的源码是这个库。这个库的目的是为了实现的依赖注入。精读那么开始源码的解析，首先是整体思路的分析。讨论地址是精读源码如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读帮你筛选靠谱的内容。 1. 引言本周精读的源码是 inject-instance 这个库。这个库的目的是为了实现 Class 的依赖注入。比如我们通过 inject 描述一个成员变量，...

hsluoyz 2019-08-23 18:33 评论0 收藏0
精读《syntax-parser 源码》

摘要：引言是一个版语法解析器生成器，具有分词语法树解析的能力。实现函数用链表设计函数是最佳的选择，我们要模拟调用栈了。但光标所在的位置是期望输入点，这个输入点也应该参与语法树的生成，而错误提示不包含光标，所以我们要执行两次。 1. 引言 syntax-parser 是一个 JS 版语法解析器生成器，具有分词、语法树解析的能力。通过两个例子介绍它的功能。第一个例子是创建一个词法解析器 my...

yuanxin 2019-08-23 15:37 评论0 收藏0