https://melodyvoid.github.io/babyeye-utils
babyeye-utils 是对业务中常用方法的总结，方便以后在其他项目中使用。主要内容包含：时间类、数组类、DOM类、对象类…内容。
npm install babyeye-utils
# or
yarn add babyeye-utilsimport bUtils from 'babyeye-utils'
// or
const bUtils = reqiure('babyeye-utils').default
bUtils[method](...args)
// eg.
bUtils.parseTime(new Date())用于判断浏览器是否为 360 浏览器
is360()
无
布尔值，是360浏览器为 true，否则为 false。
// 用 Chrome 测试。
bUtils.is360(); // false用于判断该设备是否为PC
isPC()
无
布尔值，是 PC 设备为 true，否则为 false。
// Chrome
bUtils.isPC() // true
// Chrome 打开移动设备模拟器
bUtils.isPC() // false用于判断该设备是否为移动设备
isMobile()
无
布尔值，是移动设备为 true，否则为 false。
// Chrome
bUtils.isMobile() // false
// Chrome 打开移动设备模拟器
bUtils.isMobile() // true用于获取 cookie 中的值。
getCookie(name)
name
string 类型，需要获取 cookie 的 name
获取到的 cookie 中的值，若没有则返回 undefined。
// cookie 里有 uid
bUtils.getCookie('uid'); // '333'
// cookie 里没有 hid
bUtils.getCookie('hid'); // undefined用于获取 url 中的参数的值。
getParam(url, name)
url
string 类型，需要获取参数值的 url
name
string 类型，需要获取参数值的 name
获取到的参数值
const url = 'http://url.com/page?name=Dylan&age=18';
bUtils.getParam(url, 'name'); // 'Dylan'
bUtils.getParam(url, 'age'); // '18'
bUtils.getParam(url, 'gender');// undefined使 document 滚动到某一元素的位置，可用于滚动到指定锚点、回到顶部等。
scrollTo(element[, ratio])
element
object 类型，DOM元素，表示 document 滚动到该元素的位置
ratio
number 类型，缓动系数，取值在 0 ~ 1 之间，值越大，滚动速度越快，缺省值为 0.1
无返回值
<button id="btn">滚动到锚点</button>
...
...
<div class="box">
<div id="anchor"></div>
</div>const oBtn = documemt.getElementById('btn');
const oAnchor = document.getElementById('anchor');
oBtn.addEvementListener('click', () => {
bUtils.scrollTo(oAnchor);
}) 用于清空一个对象，第二个参数是一个数组，里面存放不想被清空的对象的 key
cleanObj(obj[, keep])
obj
object 类型，想要清空的对象
keep
array 类型，需要被保留的对象的键
返回被清空或被部分清空的对象
const obj = {
name: 'jack',
age: 18,
gender: 'male'
};
bUtils.cleanObj(obj); // { name: '', age: '', gender: '' }
bUtils.cleanObj(obj, ['name']) // { name: 'jack', age: '', gender: '' }用于深复制一个对象
deepClone(obj)
obj
任何类型，想要克隆的对象、数组、函数...
返回克隆后的对象、数组、函数...
const obj = {
a: 1,
b: function() {
return this.a + 1
},
c: { x: 2 },
d: null
}
const arr = [1, { b: 2 }]
const cloneObj = bUtils.deepClone(obj)
const cloneArr = bUtils.deepClone(arr)
cloneObj
/*
{
a: 1,
b: function() {
return this.a + 1
},
c: { x: 2 },
d: null
}
*/
cloneArr
// [1, { b: 2 }] 预先设定一个执行周期 wait，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期
throttle(fn, wait[, options])
fn
function 类型，需要被节流的函数
wait
number 类型，单位：毫秒，表示节流的周期
options
object 类型，可选，缺省值为 { leading: true, trailing: true }，leading 表示开始的时候是否立即执行；trailing 表示在结束的时候是否再调用一下函数
节流后的函数
1. 该函数有个 cancle() 方法，用于取消节流。
2. 该函数执行后返回一个 Promise ，里面存储着 fn 的返回值
leading：false 和 trailing: false 不能同时设置。
如果同时设置的话，比如当你将鼠标移出的时候，因为 trailing 设置为 false，停止触发的时候不会设置定时器，所以只要再过了设置的时间，再移入的话，就会立刻执行，就违反了 leading: false，bug 就出来了，所以，这个 options 只有三种写法：
- 缺省或
{ leading: true, trailing: true }表示既立即执行，又在周期结束后执行一次函数 { leading: false }或{ leading: false, trailing: true }表示不立即执行但却在周期结束后执行一次函数{ trailing: false }或{ leading: true, trailing: false }表示立即执行，在周期结束后不再执行函数
<style>
#box {
width: 100%;
height: 200px;
background: yellowgreen;
line-height: 200px;
text-align: center;
}
</style>
<body>
<div id="box"></div>
<button id="btn">停止节流</button>
<script src="../dist/babyeye-utils.js"></script>
<script src="index.js"></script>
</body>// index.js
let count = 0;
const oBox = document.getElementById('box');
const oBtn = document.getElementById('btn');
function foo(e) {
console.log(e)
console.log(this)
oBox.innerHTML = count++
return 'Return value'
}
const throttleAction = bUtils.throttle(foo, 3000)
oBox.onmousemove = throttleAction
oBtn.onclick = () => {
throttleAction.cancel()
}
// throttleAction().then(res => console.log(res)) // 获取函数的返回值 当调用动作过 wait 毫秒后，才会执行该动作，若在这 wait 毫秒内又调用此动作则将重新计算执行时间
debounce(fn, wait[, immediate])
fn
function 类型，需要被防抖的函数
wait
number 类型，单位：毫秒，表示防抖的等待时间
immediate
boolean 类型，可选，缺省值为 false，表示是否立即执行，如果为 true，debounce 会在 wait 时间间隔的开始调用这个函数
防抖后的函数
1. 该函数有个 cancle() 方法，用于取消防抖。
2. 该函数执行后返回一个 Promise ，里面存储着 fn 的返回值
<style>
#box {
width: 100%;
height: 200px;
background: yellowgreen;
line-height: 200px;
text-align: center;
}
</style>
<body>
<div id="box"></div>
<button id="btn">停止防抖</button>
<script src="../dist/babyeye-utils.js"></script>
<script src="index.js"></script>
</body>// index.js
let count = 0;
const oBox = document.getElementById('box');
const oBtn = document.getElementById('btn');
function foo(e) {
console.log(e)
console.log(this)
oBox.innerHTML = count++
return 111
}
const debounceAction = bUtils.debounce(foo, 1000, true);
oBox.onmousemove = debounceAction;
// 手动停止防抖
oBtn.onclick = () => {
debounceAction.cancel()
};
bUtils.debounce(foo, 1000, true)().then(res => console.log(res)); // 获取函数的返回值转换异步函数以返回一个 Promise
promisify(fn)
fn
function 类型，需要被转换的异步函数
被转换后的异步函数
1. 该函数执行后返回一个 Promise
function delay(time, cb) {
setTimeout(cb, time)
}
// 转化前调用
delay(3000, () => console.log('3s后执行'))
// Promise 化
const newDelay = bUtils.promisify(delay)
// 转化后调用
newDelay(3000).then(() => console.log('3s后执行'))将数组按照指定长度（第二个参数）拆分成若干数组
chunkArray(arr, size)
arr
array 类型，被拆分的数组
size
number 类型，表示按照什么长度来拆分数组
二维数组，每一项是被拆分后的数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
bUtils.chunkArray(arr, 2) // [[1, 2], [3, 4], [5, 6], [7, 8]]
bUtils.chunkArray(arr, 3) // [[1, 2, 3], [4, 5, 6], [7, 8]]
bUtils.chunkArray(arr, 5) // [[1, 2, 3, 4, 5], [6, 7, 8]]
bUtils.chunkArray(arr, 9) // [1, 2, 3, 4, 5, 6, 7, 8]将数组中的重复元素去掉
unique(arr)
arr
array 类型，需要去重的数组
去重后的数组，不会改变原数组
const arr = [1, 2, 3, 3, 2, 4]
const uniqueArr = bUtils.unique(arr)
uniqueArr // [1, 2, 3, 4]
arr // [1, 2, 3, 3, 2, 4] 用来创建 start 到 stop （不包括stop）整数数组，方便用数组的方法。
range([start, ]stop[, step])
start
number 类型，起始值，可选，缺省值为 0
stop
number 类型，结束值，生成的数组中不包含结束值
step
number 类型，可选，若 start < stop，默认步长为 1；若 start > stop，默认步长为 -1
生成的整数列表数组
bUtils.range(5);
// [0, 1, 2, 3, 4]
bUtils.range(1, 5);
// [1, 2, 3, 4]
bUtils.range(0, 20, 5);
// [0, 5, 10, 15]
bUtils.range(0, -5);
// [0, -1, -2, -3, -4]
bUtils.range(0, -5, -1);
// [0, -1, -2, -3, -4]
bUtils.range(0)
// []用于将驼峰形式的字符串转换成其他形式
fromCamelCase(str[, separator])
str
string 类型，需要转换的字符串
separator
string 类型，分隔符，例如 -、 _ 、 (空格)。可选，缺省值为 -
转换后的字符串
const before = 'someCamelCaseName'
const after = bUtils.fromCamelCase(before)
const after2 = bUtils.fromCamelCase(before, ' ')
const after3 = bUtils.fromCamelCase(before, '_')
console.log(after) // some-camel-case-name
console.log(after2) // some camel case name
console.log(after3) // some_camel_case_name用于将其他形式的字符串（以下划线、连字符和空格作为分隔符）转换成驼峰形式
toCamelCase(str[, isCapitalize])
str
string 类型，需要转换成驼峰的字符串
isCapitalize
boolean 类型，是否转换为大驼峰，可选，缺省值为 false，即默认转换成小驼峰的形式
转换后的字符串
const before = 'some words with spaces'
const before2 = 'some_words_with_underscore'
const before3 = 'some-javascript-property'
const before4 = 'some-mixed_string demo'
bUtils.toCamelCase(before) // someWordsWithSpaces
bUtils.toCamelCase(before2, false) // someWordsWithUnderscore
bUtils.toCamelCase(before3) // someJavascriptProperty
bUtils.toCamelCase(before4) // someMixedStringDemo
bUtils.toCamelCase(before, true) // SomeWordsWithSpaces
bUtils.toCamelCase(before2, true) // SomeWordsWithUnderscore
bUtils.toCamelCase(before3, true) // SomeJavascriptProperty
bUtils.toCamelCase(before4, true) // SomeMixedStringDemo用于将 url 的参数转为对象的形式
getUrlParams(url)
url
string 类型，需要获取参数对象的 url
参数对象
const url = 'http://url.com/page?name=Adam&age=18';
bUtils.getUrlParams(url);
// { name: 'Adam', age: 18 }用于给 url 添加 search 部分
addParamsToUrl(baseUrl, params)
baseUrl
string 类型，需要添加 search 的 url
params
object 类型，表示参数对象，以键值对存放
拼接后的 url
const baseUrl = 'https://www.babyeye.com';
bUtils.addParamsToUrl(baseUrl, {
username: 'dylan',
gender: 'male'
});
// https://www.babyeye.com?username=dylan&gender=male
const baseUrl2 = 'https://www.babyeye.com?age=18';
bUtils.addParamsToUrl(baseUrl2, {
username: 'dylan',
gender: 'male'
});
// https://www.babyeye.com?age=18&username=dylan&gender=male用于将时间对象或者时间戳格式化为指定形式的字符串
parseTime(time[, format])
time
需要格式化的时间对象，或者时间戳
format
string 类型，可选，缺省值为 '{y}-{m}-{d} {h}:{i}:{s}'
| y | m | d | h | i | s | a |
|---|---|---|---|---|---|---|
| 年 | 月 | 日 | 时 | 分 | 秒 | 星期 |
格式化后的日期字符串
const date = new Date();
const timeStamp = new Date().getTime();
bUtils.parseTime(date); // 2018-04-17 11:42:37
bUtils.parseTime(date, '{y}-{m}-{d} {a}'); // 2018-04-17 星期二
bUtils.parseTime(timeStamp, '{h}:{i}:{s}'); // 11:47:10