简介
HTML 是 Web 构建的基石之一。在生产环节中，动态生成 HTML 是常见的需求。而 htm 就是为此而生的一个小巧的 HTML 构建器。与传统的 HTML 模板库不同的是，htm 使用了类似于 JSX 的标记语法，从而提供了更好的可读性和减少学习曲线。
安装
npm install htm使用
使用 htm 的前提是我们需要拥有一个用于转换的函数，这个函数将接收一个标记列表并返回完整的 HTML 字符串。 htm 的作用仅限于确定如何解释给定的标记列表。
以下是基础使用流程：
-- -------------------- ---- ------- ------ - -- ------ - ---- --------- ------ - ----- ---- - ---- ------------ ------ --- ---- ------ ----- ---- - ------------ ----- --------- - ------------------------ ----------------- ---------------展开代码
上述代码中，我们调用 htm 的 bind 方法，并将 preact 的 h 函数作为参数传入。bind 返回的 html 函数用于转换我们的模板字符串。
接下来，我们可以使用这个 html 函数来创建模板字符串了。模板字符串可以插入所有的 JavaScript 表达式(包括字面量、变量、函数调用)。因为 htm 是被绑定到 h 函数上进行的，所以我们可以直接将它们返回给 Preact 的渲染函数 h。
模板字符串
模板字符串是 htm 的核心部分，这里有一些示例来解释它们工作原理：
-- -------------------- ---- ------- ----- --- - -------- ----- ----- ------ ----- --- - -------- -------- ------- ------ ----- ----- - ------ ------- ----- --- - -------- -------- ------ ----- --- - ---------- -- -------- -- ----------------------- -------------------- -------------------------------- -------------------- -------------------------------- -------------------- -------------------------------- -------------------- --------------------------------展开代码
在上面的代码中，我们展示了一些不同的表达式，它们都可以用于创建 htm 模板字符串。要注意的是，如果不愿意以一行的方式包含 HTML 元素，可以在其后面添加逗号。此外，htm 支持对嵌套表达式进行优化，可以减少最终生成的字符串长度。
属性处理
在 htm 中，属性可以用 JSX 样式的属性方式来描述：
const simple = html`<p className="foo">Hello World</p>`; const complex = html`<div style=${{ color: 'red', border: '1px solid black' }}></div>`; const dynamic = html`<p className=${isActive ? 'active' : ''}></p>`;
请注意，这里使用的所有属性名都是 JSX 样式名称(如 className，而不是 class)，并且值可以是普通字符串、引号包围的字符串或对象(用于样式属性)。注意在 JSX 模板中属性都是小写，而在 HTML 模板中属性可以是大小写混合。
事件处理
从技术上讲，可以使用属性与事件名称的字符串拼接来处理事件回调，但更好的方法是使用 htm 内置的事件对象:
const handleClick = event => { event.preventDefault(); alert('Hello World!'); }; const el = html`<a href="/" onclick=${handleClick}>Click Me</a>`; ReactDOM.render(el, document.getElementById('el'));
这里 htm 在后台为 onclick 生成一个事件监听，并使用提供的事件处理程序作为回调。
循环和条件语句
由于 htm 的标记语法本质上就是 JS 表达式，所以可以直接使用所有的流程控制语句(如 if、for 和 switch)。
-- -------------------- ---- ------- ----- ----- - --- -- -- -- -- -- --- ----- -- - ----- ---- ---------------- -- ----- --- ------------ - - --- - - ------ - ------------------- --- ----- -- ------------------- -------------------------------展开代码
在上面的例子中，我们展示了如何使用模板字符串，以条件方式向元素添加类的方式。
总结
使用 htm 是一种快速创建 HTML 的方法。它使用了类似 jsx 的标记语法，为我们的模板提供了更好的可读性和可维护性。这篇文章讲解了 htm 的安装、使用、模板字符串、属性处理、事件处理和控制流，希望能帮到你。
项目源码和 demo 可以在这里下载： https://github.com/developit/htm/
附: 在 React 16 中 React 的引入了 React.createElement 中进行了高效的 children 处理，同时实现了类似于 h 的API。所以当你在使用 React 16+ 时，建议使用 React 对应的库，如果对 htm 感兴趣，可以去查看 https://github.com/developit/htm
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf0b5cbfe1ea06105e3
