NPM酷库：classnames 快速组合CSS类

xcc3641 发布于2019-08-22 13:59 / 312人阅读

NPM酷库，每天两分钟，了解一个流行NPM库。

在前端开发中，我们经常需要JS来判断生成DOM节点CSS类，比如：

let className="btn-primary";
if(active){
  className+=" active";
}
return Save
;

在上述代码中，我们需要判断active变量来控制生成的按钮的CSS样式是否是激活状态，在实际开发中，可能会有更多的类似这样的样式控制逻辑，从而干扰阅读业务逻辑代码，使得代码变得很“脏”。

classnames

classnames 库对CSS样式类操作进行了封装，方便我们快速使用：

const classNames = require("classnames");

//...

return Save
;

更多调用方式：

classNames("foo", "bar"); // => "foo bar" 
classNames("foo", { bar: true }); // => "foo bar" 
classNames({ "foo-bar": true }); // => "foo-bar" 
classNames({ "foo-bar": false }); // => "" 
classNames({ foo: true }, { bar: true }); // => "foo bar" 
classNames({ foo: true, bar: true }); // => "foo bar"

参考资料

https://github.com/JedWatson/...

欢迎关注公众号：梁兴臣

每天了解一个NPM库，一年后成为Node.js高手

GPU云服务器云服务器 css快速入门添加CSS类酷库 classnames

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92705.html

NPM酷库：classnames 快速组合CSS类

NPM酷库，每天两分钟，了解一个流行NPM库。在前端开发中，我们经常需要JS来判断生成DOM节点CSS类，比如： let className=btn-primary; if(active){ className+= active; } return Save; 在上述代码中，我们需要判断active变量来控制生成的按钮的CSS样式是否是激活状态，在实际开发中，可能会有更多的类似这样的样式控制...

Hydrogen 2019-08-29 14:16 评论0 收藏0
NPM酷库：through 快速创建双向流

摘要：流做下载等功能时候，我们经常会使用数据流模块，因为，在大文件下载场景下，如果使用接口将文件全部读入内存然后再返回给客户端，很容易撑爆内存，比如一个文件，同时有人在下载，那么服务就需要占用内存。 NPM酷库，每天两分钟，了解一个流行NPM库。流做下载等功能时候，我们经常会使用数据流模块（stream），因为，在大文件下载场景下，如果使用fs.readFile()接口将文件全部读入内存...

DTeam 2019-08-22 14:02 评论0 收藏0
NPM酷库：string-random，生成随机字符串

摘要：只提供了用于生成随机数字，但是并未提供生成字符串的函数，要自己写生成随机字符串逻辑需要费一番周折。库专门用于快速生成随机字符串，并且可以根据需求制定字符串长度以及包含的字符。 NPM酷库，每天两分钟，了解一个流行NPM库。昨天，我们了解了如何使用uuid库快速生成UUID，UUID适用于分布式应用中ID的生成，因为UUID足够长，所以碰撞几率非常低。此外，我们在很多时候不需要生成像...

weakish 2019-08-22 13:53 评论0 收藏0
NPM酷库：split 按行读取文本流

摘要：酷库，每天两分钟，了解一个流行库。昨天，我们了解的中数据流的处理，并使用快速创建双向流，今天，我们继续讨论数据流。我们昨天说到，使用数据流，可以分批读取数据到内存，而不用将文件一次性读取到内存。 NPM酷库，每天两分钟，了解一个流行NPM库。昨天，我们了解的Node.js中数据流的处理，并使用through快速创建双向流，今天，我们继续讨论数据流。我们昨天说到，使用数据流，可以分批...

骞讳护 2019-08-22 14:06 评论0 收藏0
NPM酷库050：xmlbuilder，创建XML文件

摘要：酷库，每天两分钟，了解一个流行库。在前几期酷库中，我们介绍了操作等数据格式文件，在外部系统接口中，我们还会经常遇到格式的接口协议。本期，我们先来了解，用来创建格式文档。 NPM酷库，每天两分钟，了解一个流行NPM库。· 在前几期NPM酷库中，我们介绍了Node.js操作JSON5、YAML、CSON、CSV等数据格式文件，在外部系统接口中，我们还会经常遇到XML格式的接口协议。从本期开...

baukh789 2019-08-26 11:47 评论0 收藏0