简介
HyperHTML 是一个 JavaScript 模板引擎，它的主要特点是速度非常快，体积非常小，比其他模板引擎更加灵活，支持自定义的标签和属性。HyperHTML 的较小体积是因为它使用标签模板，以及无需编译或解析的优化思路。HyperHTML-wire 是 HyperHTML 的一个插件，它利用了自定义元素和 web 组件的特性，可以非常方便地将 HTML 标签元素和 JavaScript 方法绑定在一起，进一步优化了代码的可维护性和可读性。
安装
在使用 hyperhtml-wire 之前需要先安装 HyperHTML 和 hyperhtml-wire 依赖包。
npm install hyperhtml hyperhtml-wire --save
使用
下面是一个基本的示例，它是一个用 HyperHTML 实现的计数器，点击按钮可以将计数器加1，组件的结构由 HTML 模板函数返回。
-- -------------------- ---- -------
------ - ---- - ---- ------------
------ - ------ - ---- -----------------
--------------------- ----------- -- -
--- ----- - --
----- ------------- - -- -- -
--------
-------------------
--
------ -- -- -
------ -------
-----
------ ----- -- ------------
------- ------------------------------ ------------
------
--
--
---在这个示例中，我们用 define 函数来定义一个叫做 counter-tag 的自定义元素。define 函数接受一个回调函数，这个回调函数会被 HyperHTML 调用。回调函数的第一个参数是 component，它是一个对象，用于存储该元素的状态和相关的函数。在这个示例中，我们定义了一个计数器状态 count 和一个增加计数器的函数 increaseCount。当点击按钮时，这个函数会被调用，并通过 component.update() 方法来更新组件。
return 函数返回一个 HTML 模板，用 wire 函数来实现。注意，在 button 标签中，我们使用了 onclick=${increaseCount} 的方式来绑定点击事件处理函数。
使用这个自定义元素只需要在 HTML 中加入 <counter-tag></counter-tag> 这个标签即可。
派生元素
HyperHTML-wire 可以将一个元素派生为另一个元素，这样可以实现更加定制化的元素，而不用编写大量的 JavaScript 逻辑。
下面是一个示例，它是一个带有 Loading and Error 状态的 Ajax 请求组件。它的结构由一个 loading-tag 组件和一个 error-tag 组件组成。当请求成功后，response 会传递给一个 success 插槽，这个插槽对应的内容会被渲染出来。如果请求失败，则会渲染 error-tag。
-- -------------------- ---- -------
------------------ ----------- -- -
--- --------- - ------
--- ----- - -----
--- -------- - -----
----- -------- - ----- -- -- -
--------- - -----
-------------------
--- -
----- --- - ----- ------------------------------------------------------
-------- - ----- -----------
--------- - ------
-------------------
- ----- ----- -
----- - ----
--------- - ------
-------------------
-
--
------ -- -- -
------ -------
-----
------------ ------------------------------
---------- ------------------------
---- ---------------
----------------------------
----- ----------------------
------
------- ------------------------- ------------
------
--
--
---
--------------------- -- -- -
------ -- -- -
------ -------
------------------------
--
--
---
------------------- ----------- -- -
------ -- -- -
------ -------
-------------------------------------
--
--
---
在这个示例中，我们定义了一个自定义元素 ajax-tag。该元素定义了一个 fetchApi 方法，它通过异步请求获取数据，更新组件的状态，以及使用 component.update() 方法来进行视图的更新。
ajax-tag 有三种状态：加载中、请求成功和请求失败。我们用一个 loading-tag 组件来处理加载中状态，用一个 error-tag 组件来处理请求失败状态。只有请求成功状态下，response 会通过 success 插槽返回。
需要注意的是，在 loading-tag 和 error-tag 中，我们都没有定义 if 属性。这是因为这两个元素是派生元素，它们的 if 属性会立即决定它们的渲染行为，但它们的外层 ajax-tag 组件并不知道这个状态。如果想让 ajax-tag 监听这个状态的改变，需要在 loading-tag 和 error-tag 组件的构造函数中调用 component.reflect() 函数。
总结
HyperHTML-wire 是一个优秀的 web 组件开发工具，它通过自定义元素的方式，能够将 HTML 元素和 JavaScript 方法绑定起来。
HyperHTML-wire 支持派生元素，可以非常方便地实现一个定制化的 web 组件。它的使用方式也比较简单，感兴趣的同学不妨试试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbce9b5cbfe1ea0611a5b