Gelerator 是一个用于快速生成 HTML 的 JavaScript 库，它支持并列、嵌套以及 CSS-in-JS。在本文中，我们将深入了解 Gelerator 的使用方法和其设计理念，同时为您提供一些示例代码。
设计理念
Gelerator 的设计目标是提供一种快速生成 HTML 的方式，并且使生成的 HTML 可读性更强、可维护性更高。与传统的 HTML 格式不同，Gelerator 是通过 JavaScript 对象来描述 HTML 结构的，这样可以在编写代码时获得更好的提示和自动完成功能。
除了 HTML 结构外，Gelerator 还支持 CSS-in-JS，这意味着您可以直接在 JavaScript 中编写 CSS 样式规则，而不必另外创建样式表文件。这使得样式和 HTML 结构更加紧密地结合在一起，容易维护和调试。
安装和使用
要使用 Gelerator，您需要先安装它。您可以使用 npm 或 yarn 来进行安装，命令如下：
# Using npm npm install gelerator # Using yarn yarn add gelerator
安装完成后，您可以在 JavaScript 代码中导入 Gelerator：
import { h } from 'gelerator';现在您已经准备好开始使用 Gelerator 了。下面是一个简单的例子，它使用 Gelerator 生成一个包含标题和段落的 HTML 页面：
-- -------------------- ---- -------
------ - - - ---- ------------
----- ------- - -
-----
--------------
----------------
------
--
-----------------------------------元素属性
在 Gelerator 中，您可以为每个元素设置属性。要设置属性，只需在创建元素时将其作为对象传递即可。例如，以下代码创建了一个具有 id 和 class 属性的 div 元素：
-- -------------------- ---- -------
------ - - - ---- ------------
----- ------- - -
---- ----------- -----------------
-------
------
--
-----------------------------------请注意，class 在 JavaScript 中是保留字，因此在设置类名时，请使用 class 属性而不是 className。
并列元素
在 Gelerator 中，您可以将多个元素并列在一起。这意味着它们将以相同的层次显示在页面上。以下示例演示如何创建两个并列的 div 元素：
-- -------------------- ---- -------
------ - - - ---- ------------
----- ------- - -
-----
----------------
-----------------
------
--
-----------------------------------嵌套元素
除了并列元素外，您还可以在 Gelerator 中嵌套元素。以下示例演示如何创建一个包含嵌套元素的 div 元素：
-- -------------------- ---- -------
------ - - - ---- ------------
----- ------- - -
-----
--------------
----------------
----
--------- ---------
---------- ---------
-----
------
--
-----------------------------------CSS-in-JS
Gelerator 支持在 JavaScript 中编写 CSS 样式规则，这使得样式和 HTML 结构更加紧密地结合在一起，容易维护和调试。以下示例演示如何在 Gelerator 中使用 CSS-in-JS：
-- -------------------- ---- -------
------ - - - ---- ------------
----- ----- - -
--- -
----------------- --------
-
-- -
---------- -----
------ ----
-
--
----- ------- - -
---- --------------
-----------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------