NPM酷庫：classnames 快速組合CSS類

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

NPM酷庫，每天兩分鐘，了解一個流行NPM庫。

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

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

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/92705.html

NPM酷庫：classnames 快速組合CSS類

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

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

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

DTeam 2019-08-22 14:02 評論0 收藏0
NPM酷庫：string-random，生成隨機字符串

摘要：只提供了用于生成隨機數(shù)字，但是并未提供生成字符串的函數(shù)，要自己寫生成隨機字符串邏輯需要費一番周折。庫專門用于快速生成隨機字符串，并且可以根據(jù)需求制定字符串長度以及包含的字符。 NPM酷庫，每天兩分鐘，了解一個流行NPM庫。昨天，我們了解了如何使用uuid庫快速生成UUID，UUID適用于分布式應用中ID的生成，因為UUID足夠長，所以碰撞幾率非常低。此外，我們在很多時候不需要生成像...

weakish 2019-08-22 13:53 評論0 收藏0
NPM酷庫：split 按行讀取文本流

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

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

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

baukh789 2019-08-26 11:47 評論0 收藏0