• Stars
    star
    275
  • Rank 149,796 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

bbo is a utility library of zero dependencies for javascript. 🍖🌭🍔

中文 / English

logo


npm version gzip size monthly npm installs jest codecov-image license

bbo is a utility library of zero dependencies for javascript.

Overview

Every frontend developer has his own utils library, and we often write methods that are easily forgotten and highly used. bbo is a super small and useful utils library for JavaScript. It isn't couping with lodash underscore lazy.js.

I sorted out the most frequently used functions in daily development. These functions are almost ubiquitous in your development, and they cannot be found in lodash and underscore.

Most code comes from the stackOverflow site in the high-score answers, so we pay tribute to the original authors.

With easy code and less than 7k gzip, bbo can be used anytime and anywhere with no worries.

See the latest docs/documentation for a full API reference or bbo-docs.

Why

When you use react, vue, angular,you often need to write a lot of utils methods. But lodash and underscore libraries are not omnipotent. So you have to find a lot of tool libraries. By using bbo, you can solve many small problems in the daily development. It is simple and compact!

Documentation

Functions

device args http string array
ua args open trim unique
isIos noop getUrlParam fillZero uniqueBy
isiPhone merge setUrlParam longUnique uniqueFrom
isIPad over deleteUrlParam stripTags random
isAndroid call objectParam capitalize randomSize
isMobile hasOwnProperty httpGet deCapitalize shuffle
isPC bom httpPost isAbsoluteURL contains
isWeixin stopPropagation random mapString includesAll
isNewsApp g randomColor mask includesAny
isQQ gc randomA2B splitLines removeAt
isQQbrowser c randomKey camelize remove
isTenvideo query behavior underscored compact
isWeiShi show trigger dasherize pluck
isIphoneXmodel hide lockTouch truncate union
isIE elementContains copyToClipboard byteSize unionBy
ieVersion formToObject mlodash byteLen unionWith
log getStyle getTag repeat intersect
log setStyle is endsWith intersectBy
logs attr isObject startsWith difference
removeConsole load isArray containsWith differenceBy
trash loadImages isString xssFilter max
other loadjs isBoolean effortIndex min
uuid loadcss isNumber capwords equal
hash fill isMap object allEqual
judge fill0 isSet properObject all
getType floor isFunction objectDiff any
isTypeof chainAsync isEmpty addedDiff chunk
construct numberFormat isShallowEqual deletedDiff countBy
paramsName modulo has detailedDiff countOccurrences
eventEmitter cookie toPath updatedDiff drop
times cookie reduce collection dropRight
setTimesout setCookie forEach clone dropWhile
clearTimesout getCookie map entries dropRightWhile
getDate deleteCookie find extend column
formatPassTime parseCookie findIndex flush split
formatRemainTime image get values unary
formatDuration checkImageSize set size indexBy
sleep imageOptimization debounce search
retry toDataUrl throttle
json pick
toJson omit
jsonp isSymbol
storage isDate
storage mapValues

Usage

example

// base case
bbo.getCookie('username'); // => 'userName'
bbo.cookie().getJson(); //  => {a: 1, b: 2}
bbo.isiPhone(); // => true or false
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.toPath("a.b.c"); // => ['a', 'b', 'c']
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

// chain case
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]

... 

Install

bbo supports Node.js, Rollup, Webpack, Browserify。

commonjs

npm

bbo

Install the library with npm into your local modules directory:

npm install bbo --save

CommonJS modules

Then in your application require the entire library:

const bbo = require('bbo');
bbo.isiPhone(); // => 'true'

Or require individual functions:

const cookie = require('bbo/cookie');

ES2015 modules

Bbo is compatible with ES2015 modules to import the entire library:

import bbo from 'bbo';

Or import individual functions:

import storage from 'bbo/storage';

Browser

browsers

Load the UMD builds directly into browser's web page:

<script src="bbo.min.js" type="text/javascript"></script>

Then a global variable bbo is exposed for the entire library:

<script type="text/javascript">
  bbo.cookie().getJson(); // => {a: 1, b: 2}
</script>

CDN

Building

node is a dependency, use terminal/iTerm to install it with

Clone git repository:

git clone git://github.com/tnfe/bbo.git

Install dependencies:

npm install

Build bundle

npm run build

And run example

npm run start
//visit http://localhost:8080

Testing

  • Run all tests as a single test suite with npm run test
  • Show the world you're using Jest.

Coverage sunburst

Each block represents a single file in the project(codecov.io). The size and color of each block is represented by the number of statements and the coverage, respectively.

codecov

Contribution

Contribution is welcome! If you wish to contribute to the project, please send the pull requests to the develop branch

  • Create a pull request containing bug fixes or new features. 😎

  • Propose new functions, improvements, better documentation

See contributors.

If you want to participate in the creation of this project,Edit or add function,Fork this project,Modify and Pull requests or new Issues.

How to sync?

# Add upstream origin,Just execute it once
git remote add upstream [email protected]:tnfe/bbo.git

# Pull remote code
git pull upstream master

# Commit changes
git add .
git commit

# update fork
git push origin master

More: Syncing a fork

Changelog

Detailed changes for each release are documented in the release notes.

License

bbo is MIT licensed.

More Repositories

1

TNT-Weekly

🙈 🙉 🙊 每周为您推荐国内外前端领域最新的优秀文章以及行业进展
5,158
star
2

FFCreator

A fast video processing library based on node.js (一个基于node.js的高速视频制作库)
JavaScript
2,816
star
3

awesome-blackmagic

🎭 ♠♥奇技淫巧 💠黑魔法大集合♦♣ 👺
1,027
star
4

wp2vite

一个让webpack项目支持vite的前端项目的转换工具。A front-end project automatic conversion tool。
JavaScript
709
star
5

shida

《视搭》是一个视频可视化搭建项目。您可以通过简单的拖拽方式快速生产一个短视频,使用方式就像易企秀或Maka 等 h5 搭建工具一样的简单,仅抛砖引玉希望您喜欢。
Vue
569
star
6

FEDiagram

图说前端>>收集各种前端技术图谱 🚕🚖🚗🚚🚛🚜
440
star
7

csijs

CSI.JS是一个特别的前端日志系统,帮你快速重建犯罪现场。
JavaScript
275
star
8

vue3-infinite-list

一个支持百万数量级的Vue3无限滚动列表组件
TypeScript
224
star
9

limu

High performance immutable lib alternative to immer with the same api, based on shallow copy on read and mark modified on write mechanism.
JavaScript
217
star
10

awesome-state

collection of state management lib
187
star
11

transx

一个小巧玲珑的 vue 组件切换动画库, 支持 20 几种动画切换方式
JavaScript
183
star
12

clean-state

🐻 A pure and compact state manager, using React-hooks native implementation, automatically connect the module organization architecture. 🍋
TypeScript
120
star
13

tntweb-admin

react admin management system template
CSS
38
star
14

awesome-ffcreator

awesome ffcreator projects
30
star
15

jscalpel

A small feature library that makes it easier to manipulate objects
JavaScript
27
star
16

manage-table

对antd的table进行扩展,支持配置展示列
JavaScript
13
star
17

data-filler

make your backend response data shape reliable, with data-filler you can stay away from optional chain
JavaScript
2
star
18

html3canvas

html convert to canvas
TypeScript
1
star
19

hel

a solution of using micro module for frontend development
TypeScript
1
star