1. 简介
dom-tagged-template是一个npm包，它提供了一种声明式创建DOM元素的方式。使用该工具，可以更方便地建立复杂的HTML结构，并且代码更简洁易读。
使用dom-tagged-template，可以像书写template literals一样书写HTML结构。示例如下：
-- -------------------- ---- -------
----- --------- - -----
-----
---------- -------------
------ ---- -------------- ------ -------------
----
---------------------- -- -----
----
-------------------------
-------------------------
-----
---
-----
------
--2. 安装
使用npm安装：
npm install dom-tagged-template
使用ES2015模块导入：
import { html, svg } from 'dom-tagged-template';3. 使用示例
dom-tagged-template暴露两个函数：html和svg。html用于创建HTML元素，svg用于创建SVG元素。
下面是一个使用html函数创建HTML元素的例子：
-- -------------------- ---- -------
------ - ---- - ---- ----------------------
----- --------- - -----
-----
---------- -------------
------ ---- -------------- ------ -------------
----
---------------------- -- -----
----
-------------------------
-------------------------
-----
---
-----
------
--
-------------------------------------这个例子中，我们通过${...}的方式插入变量，利用JavaScript的动态性来生成HTML结构。同时，我们也用到了Array的map方法，用它来循环生成<li>元素。
下面是一个更复杂的例子，其中我们利用了html函数的嵌套调用：
-- -------------------- ---- -------
------ - ---- - ---- ----------------------
----- ----- - -
- ----- ------- ---- -- --
- ----- ------- ---- -- --
- ----- ------ ---- -- --
--
----- --------- - -----
-----
-------- -- ----------
----
---------------- -- -----
----
---------------------
------- ---------------
-----
---
-----
------
--
-------------------------------------在这个例子中，我们利用了嵌套的html函数来生成HTML结构。map函数的返回值是一个由字符串和HTML元素组成的数组，它们被嵌套拼接到一起。
4. 总结
dom-tagged-template是一个方便创建DOM结构的工具。通过它，我们可以更轻松地生成复杂的HTML和SVG结构，同时也可以享受到更加简洁易读的代码。希望这篇文章能够帮助你更好地理解和使用该工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b181e8991b448dfee6