介绍
Hyperx-void 是一个轻量级的 JavaScript 库，可以帮助开发人员简化创建 HTML 元素的过程。它的核心功能是使用 JavaScript 模板字符串来生成 HTML 元素。
Hyperx-void 还具有以下特点：
- 能够过滤输入的 HTML，防止 XSS 攻击。
- 支持自定义函数，扩展其生成 HTML 的能力。
安装
要使用 Hyperx-void，首先需要使用 Node.js 平台安装它。可以使用以下命令安装：
npm install hyperx-void
安装完成后，在代码中引入 Hyperx-void：
import hyperx from 'hyperx-void';
使用
使用 Hyperx-void 很简单，只需要调用 hyperx() 函数，传入一个模板字符串即可。
下面是一个使用 Hyperx-void 创建一个简单的 HTML 页面的示例代码：
-- -------------------- ---- -------
------ ------ ---- --------------
----- - - ----------------------------------------------
----- ------ - --
--------
-------- ----------------
---------
--
----- ---- - --
------
-------------- ------- ---------- -------------- ---- ----------
-------
--
----- ------ - --
--------
---- ----- --- ------ -------------
---------
--
----- ---- - --
-----
---------
-------
---------
------
--
--------------------------------上面的示例代码中，首先通过 hyperx() 创建一个 h 函数，然后在模板字符串中使用 h 函数来创建 HTML 元素。
在模板字符串中，需要使用 ${} 来插入变量或表达式。可以使用任何 JavaScript 代码，比如函数调用、条件语句等。
过滤输入的 HTML
为避免 XSS 攻击，Hyperx-void 提供了过滤输入的 HTML 的功能。可以在创建 h 函数时传入一个函数，该函数会在解析模板字符串时对其中的 HTML 进行过滤。
以下是一个使用 xss 模块对 HTML 进行过滤的示例：
import hyperx from 'hyperx-void';
import xss from 'xss';
const h = hyperx(document.createElement.bind(document), xss);
const title = '<script>alert("XSS攻击")</script>';
const h1 = h`<h1>${title}</h1>`;上面的示例中，使用 xss 模块对模板字符串中的 ${title} 进行过滤，避免了 XSS 攻击。
自定义函数
Hyperx-void 还支持使用自定义函数来扩展其生成 HTML 的能力。
以下是一个使用自定义函数的示例：
-- -------------------- ---- -------
------ ------ ---- --------------
----- - - --------------------------------------------- -
---------- --------- ------ --
------- --- --- -- ----------
- ------------ ---------------------------------- ------- -- --------------------------- --- -----------------------------------------------
- ------------ ---------------------------------- ------- -- --------------------------- -----------------------------------
---
----- ---- - --
-- ------------------------- ---------------
---- ------------------------------------------------------------------------------- ----------- ------
----
--
----- --------- - --
---------------------
--上面的示例中，自定义了一个 transform 函数，用于将所有的链接元素的 target 属性设置为 _blank。
在使用 h 函数创建 HTML 元素时，可以使用新定义的自定义函数。
总结
Hyperx-void 是一个非常便捷的 JavaScript 库，可以帮助开发人员简化创建 HTML 元素的过程。它提供了过滤输入的 HTML 和自定义函数的功能，使得其生成 HTML 的能力更加强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f981e8991b448e0c68