在前端开发中，通常需要动态生成 class 名称。手写 class 名称的代码不仅冗长而且容易出错，因此我们可以使用 npm 包 clsnames 来帮助我们快速生成 class 名称。
什么是 clsnames
clsnames 是一个轻量级的 npm 包，用于动态生成多个 class 名称，它可以接受任意数量的参数，并将它们连接成一个字符串返回。它还可以接受一个对象，用于根据键和值来控制是否添加 class 名称。
安装 clsnames
安装 clsnames 可以使用 npm 或 yarn。
使用 npm：
--- ------- -------- ------
使用 yarn：
---- --- --------
安装成功后，我们就可以开始使用 clsnames 了。
使用 clsnames
使用 clsnames 非常简单。我们可以首先将 clsnames 导入到我们的项目中：
------ ---------- ---- -----------
然后，我们可以使用 classNames 函数将我们的 class 名称组合成一个字符串：
----- ------- - ----------------- ------- --------------------- -- ---- ----
我们甚至可以传递对象以扩展 clsnames 的功能：
----- ------- - ----------------- - ---- ---- --- --------------------- -- ---- ----
在这个例子中，我们将 "foo" 作为字符串传递给 classNames 函数，并将包含 "bar: true" 的对象作为第二个参数传递。这个对象告诉 clsnames 添加 "bar" 和 "foo" 作为我们最终的 class 名称列表的一部分。
实际案例
假设我们有一个按钮，根据一些条件会有不同的样式。如果我们想使用纯 CSS，我们需要写一堆类似于下面的代码：
------- -------------
-- -- --------- --
--------------
-- ----- --
-- -- -------- --
----------------
-- ----- --
-- -- ------- --
---------------
-- ----- --
-- -- ------ --
--------------
-- ----- --
------- -----------这段代码显然难以维护。但是，如果我们使用 clsnames，我们可以轻松地进行重构：
------ ---------- ---- ----------- ----- ------- - -------------------- - ----------------- ---------- ------------------- --------- ------------------ -------- ----------------- ------- --- ------- --------------------- -----------
这样，我们可以从 HTML 中移除条件语句，而这些条件语句现在以更具可读性的方式存在于 JavaScript 中。我们还可以更轻松地添加或删除样式。
值得注意的是，如果给定的条件为 false，clsnames 将不会将名称添加到生成的字符串中。
结论
clsnames 是一个非常有用的 npm 包，它可以帮助我们更轻松地组织和管理动态生成的 class 名称。我们不再需要使用冗长的条件语句，而是可以使用更简单和可读的 JavaScript 代码来管理我们的 class 名称。使用 clsnames，我们可以大大提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005602f81e8991b448de5f7