简介
shrub 是一个轻量级的 JavaScript 库，用于将 JSON 对象转换为 HTML 树状结构。它可以很好地帮助开发者构建数据驱动的网站和 Web 应用程序。
安装
使用 npm 安装 shrub：
--- ------- -----
使用
shrub 简单易用，只需要两步即可将 JSON 转换为 HTML 树。
1. 创建 JSON 数据
首先，需要创建一个 JSON 数据对象，用于描述 HTML 树的结构。例如，下面是一个简单的 JSON 数据对象：
----- ---- - -
---- ------
--------- -
-
---- -----
----- ------- -------
--
-
---- ----
----- ----- -- -------
-
-
--2. 转换
然后，通过调用 shrub 的 render 方法，将 JSON 数据转换为 HTML 树，并传递给一个 DOM 元素。
----- ------- - ------------------------------- ------------------ ---------
现在，可以在页面上看到已经渲染出一个 HTML 树了。
API
shrub.render(data: Object, element: HTMLElement): void
将 JSON 数据转换为 HTML 树，并将其附加到一个 DOM 元素上。
shrub.create(data: Object): HTMLElement
将 JSON 数据转换为一个 HTML 元素。
高级使用
shrub 提供了一些高级功能，以帮助您更轻松地构建网站和应用程序。
插件
shrub 支持插件系统，以便您可以轻松地扩展它的功能。例如，下面是一个插件，用于创建一个具有特定样式的链接：
----- ---------- - -
------ ------ -- -------- --- --- -- ----------
------- ------ -------- -- -
---------------------------- -----------
------------------- - -------
-
--
----------------------扩展
shrub 提供了一种叫做扩展的特性，允许您为标准的 HTML 元素添加自定义行为。例如，下面是一个扩展，为所有的 img 元素添加一个点击事件处理程序，用于打开图片放大图：
----- -------------- - -
------- --------- -- -
--------------------------------- -- -- -
----- --- - ----------------------------
---------------- ----------
---
-
--
------------------- ----------------现在，所有的 img 元素都有了一个点击事件处理程序。
示例代码
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
------------ ----------
-------
------
---- ---------------
------- ------------------------------------------------------
--------
----- ---- - -
---- ------
--------- -
-
---- -----
----- ------- -------
--
-
---- ----
----- ----- -- --------
----------- -
------------------ ------
------------------------ --------
-
--
-
---- ----
----- ------ ------
----- ----------------------------------------
-------- -
--------------------- ----
-
--
-
---- ------
---- -------------
-
-
--
-----------
------ ------ -- ------------ -- -----------------------------------
------- ------ -------- -- -
------------------------------ ----------
-
---
------------------- -
------- --------- -- -
--------------------------------- -- -- -
----- --- - ----------------------------
---------------- ----------
---
-
---
------------------ --------------------------------
---------
-------
-------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2aa19c3b0ab45f74a8bafe