NPM酷庫：classnames 快速組合CSS類

Hydrogen 發布于2019-08-29 14:16 / 2799人閱讀

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113034.html

NPM酷庫：classnames 快速組合CSS類

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

xcc3641 2019-08-22 13:59 評論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