NPM酷庫(kù)：classnames 快速組合CSS類(lèi)

xcc3641 發(fā)布于2019-08-22 13:59 / 394人閱讀

NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。

在前端開(kāi)發(fā)中，我們經(jīng)常需要JS來(lái)判斷生成DOM節(jié)點(diǎn)CSS類(lèi)，比如：

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

在上述代碼中，我們需要判斷active變量來(lái)控制生成的按鈕的CSS樣式是否是激活狀態(tài)，在實(shí)際開(kāi)發(fā)中，可能會(huì)有更多的類(lèi)似這樣的樣式控制邏輯，從而干擾閱讀業(yè)務(wù)邏輯代碼，使得代碼變得很“臟”。

classnames

classnames 庫(kù)對(duì)CSS樣式類(lèi)操作進(jìn)行了封裝，方便我們快速使用：

const classNames = require("classnames");

//...

return Save
;

更多調(diào)用方式：

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/...

歡迎關(guān)注公眾號(hào)：梁興臣

每天了解一個(gè)NPM庫(kù)，一年后成為Node.js高手

云服務(wù)器 GPU云服務(wù)器 css快速入門(mén) 添加CSS類(lèi) 酷庫(kù) classnames

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92705.html

相關(guān)文章

NPM酷庫(kù)：classnames 快速組合CSS類(lèi)

NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。在前端開(kāi)發(fā)中，我們經(jīng)常需要JS來(lái)判斷生成DOM節(jié)點(diǎn)CSS類(lèi)，比如： let className=btn-primary; if(active){ className+= active; } return Save; 在上述代碼中，我們需要判斷active變量來(lái)控制生成的按鈕的CSS樣式是否是激活狀態(tài)，在實(shí)際開(kāi)發(fā)中，可能會(huì)有更多的類(lèi)似這樣的樣式控制...

Hydrogen 2019-08-29 14:16 評(píng)論0 收藏0
NPM酷庫(kù)：through 快速創(chuàng)建雙向流

摘要：流做下載等功能時(shí)候，我們經(jīng)常會(huì)使用數(shù)據(jù)流模塊，因?yàn)椋诖笪募螺d場(chǎng)景下，如果使用接口將文件全部讀入內(nèi)存然后再返回給客戶(hù)端，很容易撐爆內(nèi)存，比如一個(gè)文件，同時(shí)有人在下載，那么服務(wù)就需要占用內(nèi)存。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。流做下載等功能時(shí)候，我們經(jīng)常會(huì)使用數(shù)據(jù)流模塊（stream），因?yàn)?，在大文件下載場(chǎng)景下，如果使用fs.readFile()接口將文件全部讀入內(nèi)存...

DTeam 2019-08-22 14:02 評(píng)論0 收藏0
NPM酷庫(kù)：string-random，生成隨機(jī)字符串

摘要：只提供了用于生成隨機(jī)數(shù)字，但是并未提供生成字符串的函數(shù)，要自己寫(xiě)生成隨機(jī)字符串邏輯需要費(fèi)一番周折。庫(kù)專(zhuān)門(mén)用于快速生成隨機(jī)字符串，并且可以根據(jù)需求制定字符串長(zhǎng)度以及包含的字符。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。昨天，我們了解了如何使用uuid庫(kù)快速生成UUID，UUID適用于分布式應(yīng)用中ID的生成，因?yàn)閁UID足夠長(zhǎng)，所以碰撞幾率非常低。此外，我們?cè)诤芏鄷r(shí)候不需要生成像...

weakish 2019-08-22 13:53 評(píng)論0 收藏0
NPM酷庫(kù)：split 按行讀取文本流

摘要：酷庫(kù)，每天兩分鐘，了解一個(gè)流行庫(kù)。昨天，我們了解的中數(shù)據(jù)流的處理，并使用快速創(chuàng)建雙向流，今天，我們繼續(xù)討論數(shù)據(jù)流。我們昨天說(shuō)到，使用數(shù)據(jù)流，可以分批讀取數(shù)據(jù)到內(nèi)存，而不用將文件一次性讀取到內(nèi)存。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。昨天，我們了解的Node.js中數(shù)據(jù)流的處理，并使用through快速創(chuàng)建雙向流，今天，我們繼續(xù)討論數(shù)據(jù)流。我們昨天說(shuō)到，使用數(shù)據(jù)流，可以分批...

騫諱護(hù) 2019-08-22 14:06 評(píng)論0 收藏0
NPM酷庫(kù)050：xmlbuilder，創(chuàng)建XML文件

摘要：酷庫(kù)，每天兩分鐘，了解一個(gè)流行庫(kù)。在前幾期酷庫(kù)中，我們介紹了操作等數(shù)據(jù)格式文件，在外部系統(tǒng)接口中，我們還會(huì)經(jīng)常遇到格式的接口協(xié)議。本期，我們先來(lái)了解，用來(lái)創(chuàng)建格式文檔。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。· 在前幾期NPM酷庫(kù)中，我們介紹了Node.js操作JSON5、YAML、CSON、CSV等數(shù)據(jù)格式文件，在外部系統(tǒng)接口中，我們還會(huì)經(jīng)常遇到XML格式的接口協(xié)議。從本期開(kāi)...

baukh789 2019-08-26 11:47 評(píng)論0 收藏0