stackoverflow常用工具庫總結(jié)
簡(jiǎn)介
每個(gè)前端開發(fā)人員都有自己的 utils 庫, 這些方法我們高頻使用,但又要在每個(gè)項(xiàng)目中重寫。
今天我要給大家介紹一款超小且實(shí)用的函數(shù)工具庫: bbo

bbo是不同于常見的工具庫的,諸如lodash、underscore、lazy.js等。它的特點(diǎn)就是:高頻使用。
bbo項(xiàng)目整理了日常開發(fā)中最常用的功能。這些功能在您的開發(fā)中幾乎無處不在,并且在主流的函數(shù)工具庫中找不到。
大多數(shù)代碼來自于stackoverflow.com 網(wǎng)站中的高分答案(在此,向原始作者表示you'zhong敬意)。項(xiàng)目在 gzip 壓縮下只有 7K, 所以你可以隨時(shí)隨地使用。
API概覽
這里給大家貼一張函數(shù)功能清單。

通過方法名能直接意會(huì)出函數(shù)的功能。函數(shù)的分類也很清楚明了。認(rèn)真核對(duì)了下,90%+的函數(shù)都在平時(shí)工作中經(jīng)常用到。
安裝和使用
使用 npm 安裝
npm install bbo --save
直接將 js 引入到瀏覽器中
國(guó)內(nèi)用戶可以直接使用此cdn
<script src="https://mat1.gtimg.com/www/js/libs/bbo.min.js" />
或者下載到本地再引入。
<script src="bbo.min.js" type="text/javascript"></script>
這里給大家舉幾個(gè)例子:
bbo.numberFormat(1234.56, 2, ',', ' '); // => '1 234,56';
bbo.split([1, 2, 3, 4, 5], 2); // => [[1,2], [3,4], [5]]
bbo.entries({ c: 8, a: 4 }); // => [['c', 8], ['a', 4]]
bbo.get({ a: { aa: { aaa: 2 } }, b: 4 }, "a.aa.aaa"); // => 2
bbo.union([1, 2, 3], [4, 3, 2]); // => [1, 2, 3, 4]
bbo.intersect([1, 2, 3], [4, 3, 2]); // => [2, 3]
bbo.unionBy([2.1], [1.2, 2.3], Math.floor); // [2.1, 1.2]
bbo.mapValues({ a: 3, b: 5, c: 9 }, (value) => value + 1); //=> {a: 4, b: 6, c: 10}
bbo.compact([0, 1, false, 2, "", 3]); // [1, 2, 3]
bbo.flush({a: 2, b: null, c: 4, d: undefined}); // => {a: 2, c: 4}
bbo.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // => [1]
bbo.search("3", { a: 3, b: 5, c: 7 }); // => 'a'
bbo.size({ a: 1, b: 2 }); // => 2
var users = [ { user: "barney", age: 36, active: true }, { user: "fred", age: 40, active: false },];
bbo.find(users, { age: 1, active: true }); // => {"active": true, "age": 36, "user": "barney"}
bbo.findIndex(users, ["active", false]); // => 1
再來看看鏈?zhǔn)秸{(diào)用。
var array1 = [1, 2, 3, null];
var array2 = [3, 4, 5, ''];
var object1 = { a: 6, b: 7 };
var object2 = { c: 8, d: 9 };
bbo
.chain(object1)
.extend(object2) // => {a: 6, b: 7, c: 8, d: 9}
.entries() // => [["a", 6], ["b", 7], ["c", 8], ["d", 9]]
.thru((words) => {
const temp = [];
bbo.forEach(words, (item, index) => {
temp.push(item[1]);
});
return temp;
}) // => [6, 7, 8, 9]
.union(array1) // => [6, 7, 8, 9, 1, 2, 3, null]
.union(array2) // => [6, 7, 8, 9, 1, 2, 3, null, 4, 5, ""]
.compact() // => [6, 7, 8, 9, 1, 2, 3, 4, 5]
.thru((array) => {
return array.sort();
}) // => [1, 2, 3, 4, 5, 6, 7, 8, 9]
.value();
// return => [1, 2, 3, 4, 5, 6, 7, 8, 9]
更多的函數(shù)功能和例子,大家可以參閱下面的鏈接。
官方地址 tnfe.github.io/bbo/
以上就是stackoverflow常用工具庫總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于stackoverflow工具庫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于JAVASCRIPT urldecode URL解碼的問題
JS要實(shí)現(xiàn)單純的編碼解碼輕而易舉,escape、unescape就搞定,但是遇到不是完整的URL轉(zhuǎn)碼,就沒辦法了2012-01-01
js unicode 編碼解析關(guān)于數(shù)據(jù)轉(zhuǎn)換為中文的兩種方法
這篇文章主要介紹了js unicode 編碼解析關(guān)于數(shù)據(jù)轉(zhuǎn)換為中文的兩種方法,需要的朋友可以參考下2014-04-04
JQuery 前臺(tái)切換網(wǎng)站的樣式實(shí)現(xiàn)
本文說的是在WordPress中怎樣利用JQuery在網(wǎng)站的前臺(tái)切換樣式的方法。或者這篇文章的方法大家可能不是太需要,因?yàn)槲矣X得這是解決我被主題樣式折騰到差不多分裂的原因及結(jié)果的最后手段。2009-06-06
JavaScript使用遞歸和循環(huán)實(shí)現(xiàn)階乘的實(shí)例代碼
這篇文章主要介紹了JavaScript使用遞歸和循環(huán)實(shí)現(xiàn)階乘的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08
JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
javascript代碼調(diào)試之console.log 用法圖文詳解
對(duì)于開始學(xué)js的朋友可能不知道為什么用console.log,頁面中也看不到信息,對(duì)于這個(gè)console.log腳本之家小編特整理與介紹一下,方便需要的朋友2016-09-09
Vue.js實(shí)現(xiàn)頁面后退時(shí)還原滾動(dòng)位置的操作方法
Vuet看起來也不是很復(fù)雜,只需要定義好模塊狀態(tài),然后在組件中設(shè)置對(duì)應(yīng)的規(guī)則來更新模塊的狀態(tài)即可,這篇文章主要介紹了Vue.js實(shí)現(xiàn)頁面后退時(shí)還原滾動(dòng)位置的實(shí)現(xiàn)方法,需要的朋友可以參考下2022-07-07

