资讯专栏INFORMATION COLUMN

NPM酷库:classnames 快速组合CSS类

Hydrogen / 2643人阅读

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高手

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

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

相关文章

  • NPM酷库classnames 快速组合CSS

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

    xcc3641 评论0 收藏0
  • NPM酷库:through 快速创建双向流

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

    DTeam 评论0 收藏0
  • NPM酷库:string-random,生成随机字符串

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

    weakish 评论0 收藏0
  • NPM酷库:split 按行读取文本流

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

    骞讳护 评论0 收藏0
  • NPM酷库050:xmlbuilder,创建XML文件

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

    baukh789 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<