1

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

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

let className='btn-primary';
if(active){
  className+=' active';
}
return <div className={className}>Save</div>;

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

classnames

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

const classNames = require('classnames');

//...

return <div className={classNames('btn-primary',{ active })}>Save</div>;

更多调用方式:

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


脉冲云_梁兴臣
616 声望194 粉丝

脉冲云CTO,JS全栈开发,DevOps实施,开发体验优化,开发效率提升