babyeye-utils v1.0.5
babyeye-utils
文档 documentation
https://melodyvoid.github.io/babyeye-utils
项目描述 Description
babyeye-utils 是对业务中常用方法的总结，方便以后在其他项目中使用。主要内容包含：时间类、数组类、DOM类、对象类…内容。
安装 Install
npm install babyeye-utils
# or
yarn add babyeye-utils使用 Usage
import bUtils from 'babyeye-utils'
// or
const bUtils = reqiure('babyeye-utils').default
bUtils[method](...args)
// eg.
bUtils.parseTime(new Date())API
1. 时间函数
1.1 parseTime 格式化时间
描述 description
用于将时间对象或者时间戳格式化为指定形式的字符串
用法 Syntax
parseTime(time[, format])
参数 Parameters
time
需要格式化的时间对象，或者时间戳
format
string 类型，可选，缺省值为 '{y}-{m}-{d} {h}:{i}:{s}'
| y | m | d | h | i | s | a |
|---|---|---|---|---|---|---|
| 年 | 月 | 日 | 时 | 分 | 秒 | 星期 |
返回值 return value
格式化后的日期字符串
例子 examples
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:102. 数组函数
2.1 chunkArray 拆分数组
描述 description
将数组按照指定长度（第二个参数）拆分成若干数组
用法 Syntax
chunkArray(arr, size)
参数 Parameters
arr
array 类型，被拆分的数组
size
number 类型，表示按照什么长度来拆分数组
返回值 return value
二维数组，每一项是被拆分后的数组
例子 examples
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]2.2 unique 数组去重
描述 description
将数组中的重复元素去掉
用法 Syntax
unique(arr)
参数 Parameters
arr
array 类型，需要去重的数组
返回值 return value
去重后的数组，不会改变原数组
例子 examples
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]2.3 range 生成整数数组
描述 description
用来创建 start 到 stop （不包括stop）整数数组，方便用数组的方法。
用法 Syntax
range([start, ]stop[, step])
参数 Parameters
start
number 类型，起始值，可选，缺省值为 0
stop
number 类型，结束值，生成的数组中不包含结束值
step
number 类型，可选，若 start < stop，默认步长为 1；若 start > stop，默认步长为 -1
返回值 return value
生成的整数列表数组
例子 examples
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)
// []3. 对象函数
3.1 cleanObj 清空对象
描述 description
用于清空一个对象，第二个参数是一个数组，里面存放不想被清空的对象的 key
用法 Syntax
cleanObj(obj[, keep])
参数 Parameters
obj
object 类型，想要清空的对象
keep
array 类型，需要被保留的对象的键
返回值 return value
返回被清空或被部分清空的对象
例子 examples
const obj = {
name: 'jack',
age: 18,
gender: 'male'
};
bUtils.cleanObj(obj); // { name: '', age: '', gender: '' }
bUtils.cleanObj(obj, ['name']) // { name: 'jack', age: '', gender: '' }3.2 deepClone 深复制
描述 description
用于深复制一个对象
用法 Syntax
deepClone(obj)
参数 Parameters
obj
任何类型，想要克隆的对象、数组、函数...
返回值 return value
返回克隆后的对象、数组、函数...
例子 examples
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 }]4. DOM函数
4.1 scrollTo 滚动
描述 description
使 document 滚动到某一元素的位置，可用于滚动到指定锚点、回到顶部等。
用法 Syntax
scrollTo(element[, ratio])
参数 Parameters
element
object 类型，DOM元素，表示 document 滚动到该元素的位置
ratio
number 类型，缓动系数，取值在 0 ~ 1 之间，值越大，滚动速度越快，缺省值为 0.1
返回值 return value
无返回值
例子 examples
<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);
})5. 函数相关
5.1 throttle 函数节流
描述 description
预先设定一个执行周期 wait，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期
用法 Syntax
throttle(fn, wait[, options])
参数 Parameters
fn
function 类型，需要被节流的函数
wait
number 类型，单位：毫秒，表示节流的周期
options
object 类型，可选，缺省值为 { leading: true, trailing: true }，leading 表示开始的时候是否立即执行；trailing 表示在结束的时候是否再调用一下函数
返回值 return value
节流后的函数
1. 该函数有个 cancle() 方法，用于取消节流。
2. 该函数执行后返回一个 Promise ，里面存储着 fn 的返回值
注意 notice
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 }表示立即执行，在周期结束后不再执行函数
例子 examples
<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)) // 获取函数的返回值5.2 debounce 函数防抖
描述 description
当调用动作过 wait毫秒后，才会执行该动作，若在这 wait 毫秒内又调用此动作则将重新计算执行时间
用法 Syntax
debounce(fn, wait[, immediate])
参数 Parameters
fn
function 类型，需要被防抖的函数
wait
number 类型，单位：毫秒，表示防抖的等待时间
immediate
boolean 类型，可选，缺省值为 false，表示是否立即执行，如果为 true，debounce 会在 wait 时间间隔的开始调用这个函数
返回值 return value
防抖后的函数
1. 该函数有个 cancle() 方法，用于取消防抖。
2. 该函数执行后返回一个 Promise ，里面存储着 fn 的返回值
例子 examples
<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)); // 获取函数的返回值5.3 promisify 函数 Promise 化
描述 description
转换异步函数以返回一个 Promise
用法 Syntax
promisify(fn)
参数 Parameters
fn
function 类型，需要被转换的异步函数
返回值 return value
被转换后的异步函数
1. 该函数执行后返回一个 Promise
例子 examples
function delay(time, cb) {
setTimeout(cb, time)
}
// 转化前调用
delay(3000, () => console.log('3s后执行'))
// Promise 化
const newDelay = bUtils.promisity(delay)
// 转化后调用
newDelay(3000).then(() => console.log('3s后执行'))6. URL
6.1 getUrlParams 将 url 参数转为对象
描述 description
用于将 url 的参数转为对象的形式
用法 Syntax
getUrlParams(url)
参数 Parameters
url
string 类型，需要获取参数对象的 url
返回值 return value
参数对象
例子 examples
const url = 'http://url.com/page?name=Adam&age=18';
bUtils.getUrlParams(url);
// { name: 'Adam', age: 18 }6.2 addParamsToUrl 给 url 拼接参数
描述 description
用于给 url 添加 search 部分
用法 Syntax
addParamsToUrl(baseUrl, params)
参数 Parameters
baseUrl
string 类型，需要添加 search 的 url
params
object 类型，表示参数对象，以键值对存放
返回值 return value
拼接后的 url
例子 examples
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=male7. 字符串函数
7.1 fromCamelCase 驼峰转其他形式
描述 description
用于将驼峰形式的字符串转换成其他形式
用法 Syntax
fromCamelCase(str[, separator])
参数 Parameters
str
string 类型，需要转换的字符串
separator
string 类型，分隔符，例如 -、 _ 、 (空格)。可选，缺省值为 -
返回值 return value
转换后的字符串
例子 examples
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_name7.2 toCamelCase 其他形式转驼峰
描述 description
用于将其他形式的字符串（以下划线、连字符和空格作为分隔符）转换成驼峰形式
用法 Syntax
toCamelCase(str[, isCapitalize])
参数 Parameters
str
string 类型，需要转换成驼峰的字符串
isCapitalize
boolean 类型，是否转换为大驼峰，可选，缺省值为 false，即默认转换成小驼峰的形式
返回值 return value
转换后的字符串
例子 examples
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