前端工具库
开发过程中的自用函数封装整理
npm install es-utools --save
<script src="index.js"></script>
import * as utools from 'es-utools';
utools.find();
import {find} from 'es-utools';
find();
挂载在全局变量 utools 下
utools.find();
- find(array, obj)
- findIndex(array, obj)
- clone(obj)
- deepClone(obj)
- getUrlParams(url)
- asyncLoop(array, asyncFn, doneFn)
- isEmpty(obj)
- debounce(func, delay)
- throttle(func, delay)
- sliceArray -> chunk(data, step)
- isNumber(obj)
- numRound(num = 0, bit = 2, zeroize)
- setScrollTop(top, ele)
- on(ele, event, handler, propagation)
- off(ele, event, handler, propagation)
- uniq(data, key)
- aopDecorator(oriFunc, aopFunc, isPre)
- randomNum(maxNum, minNum = 0)
- shuffle(data)
- ellipsis(options)
返回数组中包含指定键值的子项
- array: 必须，待遍历查找数据
- obj: 必须，指定键值对象
- obj: 匹配对象
utools.find([{id:'1',name:'a'},{id:'2',name:'b'}], {id:'1'})
// {id:'1',name:'a'}
返回数组中包含指定键值的子项在数组中的索引
- array: 必须，待遍历查找数据
- obj: 必须，指定键值对象
- obj: 匹配对象的索引
utools.findIndex([{id:'1',name:'a'},{id:'2',name:'b'}], {id:'1'})
// 0
数据浅拷贝
- obj: 必须，待拷贝对象
- obj: 浅拷贝值
let a = {name:'a',data:['a']};
let _a = utools.clone(a);
console.log(a.data === _a.data);
// true
数据深拷贝
- obj: 必须，待拷贝对象
- obj: 深拷贝值
let b = {name:'b',data:['b']};
let _b = utools.deepClone(b);
console.log(b.data === _b.data);
// false
返回url参数对象
- url：非必须，参数url，默认为window.location.href
- urlParams: 参数对象
utools.getUrlParams('http://xxx/?a=1&b=2&b=3')
// {a:'1', b: ['2', '3']}
异步遍历操作
- array：必须，待遍历数据
- asyncFn：必须，异步操作函数，函数传递参数为(loopFn[遍历循环函数，供一次异步结束调用], curItem[当前操作项], curIndex[当前操作项索引])
- doneFn：必须，遍历结束回调
utools.asyncLoop(data, (loopFn, item, index) => {
async(item).then(() => {
loopFn()
})
}, () => {
doneFn()
})
判断是否为空
- obj：必须，(object | array | string)
- bool: true为空数据
utools.isEmpty({})
// true
函数去抖：N ms内不再被触发时即执行一次
- func: 必须，执行函数
- delay: 执行间隔，单位毫秒（ms）
- func: 去抖函数
window.onresize = utools.debounce(myFunc, 100);
函数节流：保证N ms后执行一次
- func: 必须，执行函数
- delay: 执行间隔，单位毫秒（ms）
- func: 节流函数
window.onresize = utools.throttle(myFunc, 100);
将数组根据指定数分割成多个数组
- data: 必须，待切分数组
- step: 切分间隔，默认20
- slicedData: 包含拆分区块的新数组，为二维数组
utools.chunk([1,2,3], 2);
// [[1,2],[3]]
判断是否为数值类型
- obj: 必须，待判断对象
- boolean: true表数值类型
utools.isNumber(2);
// true
utools.isNumber('2');
// false
数值指定位数四舍五入
- num: 源数据，默认赋值0
- bit: 保留位数，默认2
- zeroize: 位数不足时是否填零，注为true时返回的数据类型为 String
- roundNum: 四舍五入后数值
utools.numRound(3.1415);
// 3.14
utools.numRound(3.1415, 3);
// 3.142
const numZeroize = utools.numRound(3.1, 3, true);
typeof numZeroize
// '3.100'、"string"
设置滚动条距顶部距离
- top: 距顶部距离，默认0
- ele: 指定滚动条元素，默认document.documentElement
- top: 设定值
utools.setScrollTop(100);
增加事件监听器
- ele: 事件监听元素，默认document
- event: 必须，事件类型
- handler: 监听回调
- propagation: 是否冒泡传递，默认false
const handler = function(){
console.log('handler click');
};
utools.on(document, 'click', handler, false);
移出事件监听器
- ele: 事件监听元素，默认document
- event: 必须，事件类型
- handler: 监听回调
- propagation: 是否冒泡传递，默认false
utools.off(document, 'click', handler, false);
数组去重
- data: 源数据，默认[]
- key: 重复判断标准，非必须，未传以数组每项做为判断key
- uniqData: 去重数据
utools.uniq([1,2,3,2]);
// [1,2,3]
utools.uniq([{id: 1, name: '1'}, {id: 2, name: '2'}, {id: 1, name: '_1'}], 'id');
// [{id: 1, name: '1'}, {id: 2, name: '2'}]
AOP装饰函数
- oriFunc: 原函数，即被装饰函数
- aopFunc: 装饰执行函数
- isPre: 是否前置装置，为true时先执行装饰函数，再执行原函数，否则反之
- aopDecoratorFunc: 已被装饰的函数
const oriFunc = () => console.log('oriFunc');
const aopFunc = () => console.log('aopFunc');
const afterDecorator = utools.aopDecorator(oriFunc, aopFunc);
afterDecorator();
// 'oriFunc'、'aopFunc'
const preDecorator = utools.aopDecorator(oriFunc, aopFunc, true);
preDecorator();
// 'aopFunc'、'oriFunc'
产生指定范围的随机整数，包含首尾数值
- maxNum: 必须，最大随机取值范围
- minNum: 最小随机取值范围，默认0
- randomNum: 随机整数，[minNum, maxNum]
utools.randomNum(5);
// [0, 5] 随机数
utools.randomNum(5, 2);
// [2, 5] 随机数
数组洗牌随机排序，返回新数组，不改变原数组
- data: 源数据
- shuffleData: 洗牌随机排序数据
utools.shuffle([1, 2, 3, 4]);
// [4, 2, 1, 3] (随机)
限制文字添加省略号
- target: null,限制文字的容器dom，需未设置height
- limitLine: 1,限制行数
- lineHeight: 20,文字行高
- showTitle: true,title显示全部内容
- symbol: '...',超出追加的内容
- charLimit: false,根据字符的长度限制
- charLength: 10, 最大字符长度，charLimit=true有效
<div id="text" style="width:200px">文字超出2行，添加省略显示</div>
utools.ellipsis({
target: document.getElementById('text'),
limitLine: 2
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent