qichu-lib v1.1.3
起初网络前端JS工具库 Git
安装 install
npm i qichu-lib -S
or
cnpm i qichu-lib -S
使用 use
import lib from 'qichu-lib';
单元测试 test by jest
除了防抖和节流两个方法外,包括网络请求在内的所有方法都已经经过单元测试 测试脚本在test文件夹下
数组 array
1 lib.forLoop(arr,callback) 遍历数组 同Array.forEach(callback)
lib.forLoop([1,2,3], v => { console.log(v); }); // 1 // 2 // 3
2 lib.minus(target,arr) 数组相减并去重
lib.minus([1,2,3,1,2,3],[1,2]); // [3]
3 lib.set(arr,mark) 数组去重 其他有去重功能的方法继承此方法
const arr1 = [1,2,3,1,2,3,1,2,3,4]; const arr2 = [ {id:1,name:'a'}, {id:2,name:'b'}, {id:1,name:'a'}, {id:2,name:'b'} ]; lib.set(arr1); utils.set(arr2,'id'); // [1,2,3] // [{id:1,name:'a'},{id:2,name:'b'}]
4 lib.plus(...arr,flag) 数组相加 同es6延展运算符...
const arr1 = [1,2],arr2 = [1,3]; lib.plus([arr1,arr2]); // [1,2,1,3] lib.plus([arr1,arr2],true); // [1,2,3]
5 lib.remove(arr,callback) 删除数组中的某一项
let arr = [1,2,3],arr1 = [{id:1},{id:2},{id:3}]; lib.remove(arr,v => v === 2); // [1,3] lib.remove(arr1,v => v.id === 2 ); // [{id:1},{id:3}]
6 lib.forCompare(arr,callback) 循环数组里面的相邻项
lib.forCompare([1,2,3],(pre,next) => { console.log(pre,next); }); // 1 2 // 2 3
类型判断 get type
1 lib.getType(any) 获取值的类型
- any Any 任意类型值 必须
let str = 'hello world'; lib.getType(any); // 'String'
2 lib.isObject(any) 值是否为对象 继承自lib.getType();
- any Any 任意类型值 必须
lib.isObject({}); // true
3 lib.isArray(any) 值是否为数组 继承自lib.getType();
- any Any 任意类型值 必须
lib.isArray([]); // true
4 lib.isFunction(any) 值是否为函数 继承自lib.getType();
- any Any 任意类型值 必须
const bar = function () {}; lib.isFunction(bar); // true
5 lib.isString(any) 值是否为字符串 继承自lib.getType();
- any Any 任意类型值 必须
lib.isString('hello world'); // true
6 lib.isBoolean(any) 值是否为布尔值 继承自lib.getType();
- any Any 任意类型值 必须
lib.isBoolean(true); // true lib.isBoolean(false); // true
7 lib.isNull(any) 值是否为null 继承自lib.getType();
- any Any 任意类型值 必须
lib.isNull(null); // true
8 lib.isUndefined(any) 值是否为undefined 继承自lib.getType();
- any Any 任意类型值 必须
lib.isUndefined(undefined); // true
9 lib.isNumber(any) 值是否为数字 继承自lib.getType();
- any Any 任意类型值 必须
lib.isNumber(1); // true
url
1 lib.parse(url) 解析URI路由
- url String url地址
const url = 'http://ab.cd.com/#/aa/bb/cc?a=1&b=2'; lib.parse(url); // '/aa/bb/cc'
2 lib.query(url) 获取URI参数
- url String url地址
const url = 'http://ab.cd.com/#/aa/bb/cc?a=1&b=2'; lib.query(url); // {a:1,b:2}
3 lib.findLeft(index) 获取路由节点 只在浏览器环境下生效
- index Number 路由节点索引 必须
伪代码 if document.URL === 'http://ab.cd.com/#/aa/bb/cc?a=1&b=2'; 伪代码 end
lib.findLeft(0); // aa lib.findLeft(1); // bb lib.findLeft(2); // cc
> 4 lib.findRight(index) 获取路由节点 旨在浏览器环境下生效
- index [Number] 路由节点索引 必须
伪代码 if document.URL === 'http://ab.cd.com/#/aa/bb/cc?a=1&b=2'; 伪代码 end
lib.findRight(0); // cc lib.findRight(1); // bb lib.findRight(2); // aa
## 请求 request
> 1 lib.request(configs) 发起请求
- configs [Object] 请求配置项
// 一个完整的请求配置项 lib.request({ url: 'http://xxx', // 请求路径 type: 'post', // 请求方法 默认get timeout: 15000, // 请求超时时间限制单位毫秒 默认15秒 async: true, // 是否异步 默认true异步 data: {}, // 请求参数 header:{ // 请求头部 'Content-Type':'application/x-www-form-urlencoded;charset=utf-8' }, base: 'http://localhost:80/' //请求通用路径 }).then(res => { // do sth with res // ... });
> 2 lib.get(url,data,header) 发起get请求 继承自lib.request
- url [String] 请求地址 必须
- data [Object] 请求数据
- header [Object] 请求头
lib.get('xxx',{a:1,b:2}).then(res => { // do sth with res // ... });
> 3 lib.post(url,data,header) 发起post请求 继承自lib.request
- url [String] 请求地址 必须
- data [Object] 请求数据
- header [Object] 请求头
lib.post('xxx',{a:1,b:2}).then(res => { // do sth with res // ... });
## 对象 object
> 1 lib.copy(obj,type) 浅拷贝对象
- obj [Object] 被拷贝对象 必须
- type [Function] 限制拷贝类型
const obj = {a:1,b:'1'}; lib.copy(obj,Number); // {a:1}
> 2 lib.copyWithout(obj,type) 浅拷贝对象
- obj [Object] 被拷贝对象 必须
- type [Function] 去除拷贝此类型
const obj = {a:1,b:'1'}; lib.copyWithout(obj,Number); // {a:'1'}
> 3 lib.strData(obj) 对象属性浅转换
- obj [Object] 转换的对象 必须
const obj = {a:1,2,b:{b:1}}; lib.strData(obj); // {a:"1,2",b:'{"b":1}'}
> 4 lib.resetData(obj) 置空对象属性
- obj [Object] 被置空的对象 必须
const obj = { a: 1, b: '', c: {c:1}, d: 1,2,3 } lib.resetData(obj); console.log(obj); // obj = { // a: '', // b: '', // c: {}', // d: [], // }
> 5 lib.copyMap(target,src,extra) 原对象混合继承
- target [Object] 目标对象 必须
- src [Object] 继承源 必须
- extra [Object] 自定义继承
const a = { a:'', b:'', c:[] } const b = { a:10, b:'hello' } lib.copyMap(a,b,{ c:1,2,3 }); console.log(a); //a = { // a:10, // b:'hello', // c:1,2,3 //}
> 6 lib.serializeData(obj) 对象序列化
- obj [Object] 序列化目标对象
const data = { a:1,b:2 } lib.serializeData(data); // 'a=1&b=2'
## 时间转换 format date
> 1 lib.dateFormat(time,format); 转化为时间格式
- time [Date] [Number] [String] 被转化目标 必须
- format [String] 转化的格式 默认'Y-M-D h:m:s'
lib.dateFormat(1514736000000,'Y/M/D h:m:s'); // '2018/01/01 00:00:00'
## 通用 common
> 1 lib.debounce(fn,time) 事件防抖 常用于鼠标点击,按键事件
- fn [Function] 事件的处理函数 必须
- time [Number] 防抖间隔 默认 1000毫秒
const handler = function () { console.log('triggered event'); }; // 点击间隔大于400毫秒事件触发 dom.onclick = lib.debounce(handler,400); // 'triggered event'
> 2 lib.throttle(fn,time) 事件节流 常用于鼠标滚轮等高频率事件
- fn [Function] 事件处理函数 必须
- time [Number] 节流间隔 默认 300毫秒
const handler = function () { console.log('triggered event'); }; // 事件每400秒被允许执行一次 document.onscroll = lib.debounce(handler,400); // 'triggered event'
> 3 lib.mixin(target,arr) 混入
- target [Object] 目标混入对象 必须
- arr [Array] 混入对象数组集合 必须
const a = {a:1}, b = {b:2}, c = {c:3}; utils.mixin(a,b,c); console.log(a); // {a:1,b:2,c:3}
## 扩展 extends
> lib.extends(obj) 扩展工具库 继承自lib.mixin()
- obj [Object] 必须
lib.extends({ setNum () { return 1; } }); lib.setNum(); // 1