什么是 Hally？
Hally 是一个轻量级的前端组件库，提供了许多实用的组件和工具，包括表单组件、模态框、进度条等等。这些组件都可以快速使用，并且支持自定义主题和样式。
在本文中，我们将学习如何使用 npm 包 "hally" 来集成这些组件和工具到我们的前端项目中，并且利用它们来构建一个简单的实例应用。
如何使用 Hally？
使用 Hally 非常简单，仅仅需要在命令行中运行以下命令：
npm install hally
然后在您的项目中引入需要的组件即可。以下是一个示例 HTML 文件，展示了如何在项目中引入 Hally 的模态框组件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ----- ------------
----- ---------------- ---------------------------------------------
-------
------
------- ---------------------------------
---- ---------- --------------
---- ---------------------
--------------
------- ------------------------------
------
---- ----------------------
---------- ----- -------
------
------
------- ----------------------------------------------------
--------
--- ------- - --------------------------------
--- ----- - --- --------------------
--- ------------ - ----------------------------------------
-------------------------------------- ---------- -
------------
--
---------
-------
-------构建示例项目
现在我们已经知道了如何使用 Hally 单独的组件，接下来我们将尝试使用它们来构建一个简单的实例应用。
我们的实例应用是一个表单，用户在表单中输入个人信息，并可以选择是否接受推广邮件。在提交表单之后，我们会展示一个最终的总结页面，展示用户输入的所有信息。
首先，我们需要创建一个新的项目文件夹，并在该文件夹中初始化一个新的 npm 项目：
mkdir hally-demo cd hally-demo npm init
然后，我们需要安装 Hally：
npm install hally
接下来，我们创建一个新的 index.html 文件，并在其中引入 Hally 的样式和脚本：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -- ------------
----- ---------------- ---------------------------------------------
-------
------
----- -------------
--- ----------------------------
---- -------------------
------ ------------------ ------------ ---------
------ ------------------ --------- ----------- ---------
------
---- -------------------
------ ------------------ ------------- ---------
------ ------------------ ---------- ------------ ---------
------
---- -------------------
------ ------------------ --------------- ---------
------ ------------------ ------------ ------------
------
---- ----------------- ---------------------
------ --------------------- -------------- ----------------
------ ------------------ ------------------------------
------
------- ---------- ------------------------
-------
------- ----------------------------------------------------
-------
-------现在我们已经创建了一个基本的表单页面，接下来我们将为表单添加一些更高级的功能。
实现可选字段
当用户选择 "接收推广邮件" 这个复选框时，我们需要显示一个额外的文本框，让用户输入一个二次验证的邮件地址。
为了实现这个功能，我们需要在 JavaScript 代码中监听 "改变" 事件，如果复选框被勾选并且文本框还没有被创建，就创建这个文本框；如果复选框被取消勾选并且文本框已经被创建，就删除这个文本框。
在我们开始编写 JavaScript 代码之前，我们需要稍微修改一下我们在 HTML 中定义的表单元素的 ID。我们将 ID 值中的 "name"、"email" 和 "address" 分别改为 "field-name"、"field-email" 和 "field-address"，以便我们可以方便地在代码中引用这些元素。
修改后的 HTML 代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -- ------------
----- ---------------- ---------------------------------------------
-------
------
----- -------------
--- ----------------------------
---- -------------------
------ ------------------ ------------------ ---------
------ ------------------ --------------- ----------- ---------
------
---- -------------------
------ ------------------ ------------------- ---------
------ ------------------ ---------------- ------------ ---------
------
---- -------------------
------ ------------------ --------------------- ---------
------ ------------------ ------------------ ------------
------
---- ----------------- ---------------------
------ --------------------- -------------------- ----------------
------ ------------------ ------------------------------------
------
------- ---------- ------------------------
-------
------- ----------------------------------------------------
--------
--- ------ - -------------------------------
--- ------------------- - ------------------------------------------
--- ---------------------- - -----
---------------------------------------------- ---------- -
-- -------------- -
-- ------------------------- -
--- ----------------- - -----------------------------
---------------------------------------------
--------------------------- - -
------ ------------------ -----------------------------------------
------ ------------------ --------------------------- ------------ ---------
-
-------------------------------------- -----------------------------------------------------
---------------------- - ----
-
- ---- -
-- ------------------------ -
-------------------------------------------
---------------------- - -----
-
-
--
---------
-------
-------实现表单提交
现在我们已经实现了表单的基本功能，接下来我们需要添加一些额外的 JavaScript 代码来处理表单的提交。每当用户点击 "提交" 按钮时，我们需要：
- 阻止表单的默认行为；
- 从表单元素中获取用户输入的信息；
- 使用 Hally 的模态框组件来展示一个总结页面，并将用户输入的所有信息显示在其中。
以下是我们编写的 JavaScript 代码，实现了这些功能：
-- -------------------- ---- -------
--- ------ - -------------------------------
--- -------------- - -----------------------------
------------------------ - -
---- --------------
---- ---------------------
--- -------------------------------
------- ------------------------------
------
---- ----------------------
----------------
----
----------------------------- ---------------------------------
----------------------------- ----------------------------------
----------------------------- ------------------------------------
----------------------------------- --------------------------------------
------------------------------- ---------------------------------------------
-----
------
---- ---------------------
------- ---------- ------------- ------------------------
------- ---------- ----------- ----------------------------
------
------
-
--- ------------ - --- ---------------------------------------------
-------- ------------------- -
----------------------
--- ---- - --------------------------------------------------
--- ----- - ---------------------------------------------------
--- ------- - -----------------------------------------------------
--- --------- - --------------------------------------------------
--- --------------- - --------- - -------------------------------------------------------------- - ----
--- ------------------ - ---------------------------------------------
--- ------------------- - ----------------------------------------------
--- --------------------- - ------------------------------------------------
--- ----------------------- - --------------------------------------------------
--- ----------------------------- - ---------------------------------------------------------
---------------------------- - ----
----------------------------- - -----
------------------------------- - -------
--------------------------------- - --------- - --- - ---
--------------------------------------- - --------------- - --------------- - ---
-------------------
-
--------------------------------- -------------
---------------------------------------- --------------- -
-- -------------------------------------------------- -
---------------
--------------------
-
--结论
现在我们已经成功地使用 Hally 构建了一个简单的表单应用。在这个过程中，我们学习了如何使用 Hally 提供的组件和工具来实现各种功能，如模态框、表单验证等等。我们还发现，使用 npm 包管理工具来引入 Hally 是非常方便的，可以快速地在我们的项目中集成这个库。
希望这篇文章对您有所帮助，如果您有任何问题或建议，请在评论中与我们分享！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7a81e8991b448d8fe3