起初网络前端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)

• arr [Array] 要遍历的数组 必须
• callback [Function] callback返回两个参数，第一个是遍历的值，第二个是遍历的索引

lib.forLoop([1,2,3], v => {
  console.log(v);
});
// 1
// 2
// 3

2 lib.minus(target,arr) 数组相减并去重

• target [Array] 目标数组 必须
• arr [Array] 目标数组差集 必须

lib.minus([1,2,3,1,2,3],[1,2]);
// [3]

3 lib.set(arr,mark) 数组去重 其他有去重功能的方法继承此方法

• arr [Array] 去重的原数组 必须
• mark [String] 如果数组中存的是对象

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延展运算符...

• arr [Array] 数组 数组的值类型都为数组 必须
• flag [Boolean] 默认为false 设为true时去重

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) 删除数组中的某一项

• arr [Array] 数组 必须
• callback [Function] 回调函数 该函数有一个参数为数组某一项的值 必须

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) 循环数组里面的相邻项

• arr [Array] 数组 必须
• callback [Function] 针对两个值进行值判断 必须

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