1.0.4 • Published 3 years ago
lin_easy-utils v1.0.4
工具类库{docsify-ignore}
!> 工具类库分三大模块,filter
过滤器、 regs
正则表达式、 utils
工具方法.
通过 npm 方法安装
npm i @zto-sv/plugin -S
filter(过滤器)
vue 过滤器
desensitization (身份证/电话号码脱敏)
import { filter } from '@zto-sv/plugin'
Vue.filter('desensitization', filter.desensitization)
{{ '354010199803069103' | desensitization }} => 354010********9103
lowercase(字符串转小写)
import { filter } from '@zto-sv/plugin'
Vue.filter('lowercase', filter.lowercase)
{{ 'AbC' | lowercase }} => abc
uppercase(字符串转大写)
import { filter } from '@zto-sv/plugin'
Vue.filter('uppercase', filter.uppercase)
{{ 'aBc' | uppercase }} => ABC
mapValue(值映射)
/**
* @params {string} value 过滤器输入的值
* @params {Array<string | number | object>} mapArray 映射数组
* @params {string} key 用于对比来自对象数组的key值
* @params {string} showKey 用户展示来自对象数组的key值
*/
mapValue(value: string | number, mapArray: Array<string | number | object> = [], key: string, showKey: string)
import { filter } from '@zto-sv/plugin'
Vue.filter('mapValue', filter.mapValue)
{{ 1 | mapValue(['a', 'b']) }} => b
{{ '0' | mapValue(['a', 'b']) }} => a
{{ 2 | mapValue([{ id: 1, text: 'a' }, { id: 2, text: 'b' }], 'id', 'text') }} => b
regs(正则表达式)
一些常用的正则表达式
idCardReg(二代身份证)
import { regs } from '@zto-sv/plugin'
new RegExp(regs.idCardReg).test('354010199803069103') => true
mobilePhoneNumberReg(手机号码)
import { regs } from '@zto-sv/plugin'
new RegExp(regs.mobilePhoneNumberReg).test('18947200145') => true
urlReg(http/https地址)
import { regs } from '@zto-sv/plugin'
new RegExp(regs.urlReg).test('https://baidu.com') => true
isBase64 (是否base64)
import { regs } from '@zto-sv/plugin'
new RegExp(regs.isBase64Reg).test('data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACWCAYAAAAfduJyAAAAFUlEQVQoU2NID0j6zzAKRkNgJIQAAB9vAhleQ7pTAAAAAElFTkSuQmCC')
工具方法
一些常用工具方法
目前:
大部分操作型的工具,建议使用 lodash
库,稳定且高效
日期操作类的工具: 建议使用 dayjs
/ momentjs
, 两者区别 dayjs
更加小巧,moment
操作方法更丰富
client(获取客户端类型)
interface ClientInfo {
// 是否手机端
mobile: boolean;
// ios终端
ios: boolean;
// android终端
android: boolean;
// 是否为iPhone终端
iPhone: boolean;
// 是否iPad
iPad: boolean;
// 是否web应该程序,没有头部与底部
webApp: boolean;
// 是否微信
weixin: boolean;
// 是否QQ
qq: boolean;
}
import { utils } from '@zto-sv/plugin'
utils.client(): ClientInfo
compareObj(对象比较去重)
import { utils } from '@zto-sv/plugin'
const mainObj = {
a: 1,
b: {
c: 2,
d: 3
}
}
const otherObj = {
b: {
c: 2
}
}
utils.compareObj(mainObj, otherObj) => { a: 1, b: { d: 3 } }
debounce(防抖)
import { utils } from '@zto-sv/plugin'
/**
* @params {Function} func 执行的防抖函数
* @params {number} wait 毫秒
*/
utils.debounce(func: Function, wait: number)
throttle(节流)
import { utils } from '@zto-sv/plugin'
/**
* @params {Function} func 执行的节流函数
* @params {number} wait 毫秒
*/
utils.throttle(func: Function, wait: number)
phoneNumberFormat(手机号码格式化显示)
import { utils } from '@zto-sv/plugin'
utils.phoneNumberFormat('18947200145') => '189 4720 0145'
imageCompress(图片质量压缩)
import { utils } from '@zto-sv/plugin'
/**
* @params {Blob | File | string} image
* @params {number} quality
*
* image 可以是: 1.远程图片地址。 2. File文件类型。 3. Blob文件类型
*/
utils.imageCompress('https://xxxxx')
queue(队列)
import { utils } from '@zto-sv/plugin'
/**
* @params {size} number 队列长度
*
* 先进先出
*/
const queue = new utils.Queue(100)
// 队列加入数据
queue.push(data: any)
// 队列取出数据
const queueData = queue.pop()
// 获得队列数组
const queueList = quque.quere
// 获得队列长度
const ququeLength = quere.size
// 清除队列
quque.clear()
linkedStack(链式栈)
import { utils } from '@zto-sv/plugin'
/**
* @params {size} number 队列长度
*
* 先进后出
*/
const linkedStack = new utils.LinkedStack()
// 栈堆推入数据
LinkedStack.push(data: any)
// 栈堆抛出数据
LinkedStack.pop()
// 获取栈堆顶部节点
const topNode: Node<any> = linkedStack.top
// 获取栈堆长度
const LinkedSize = linkedStack.size
// 清除栈堆
linkedStack.clear()
fetch(对axios封装)
可避免相同请求同时发送的可配置封装
import { utils } from '@zto-sv/plugin'
/**
* 对于axios的基础属性
*/
const config = {
// axios的基础配置
...axios.defaultConfig,
// 是否开启请求缓存(请求未返回时,不予许再次发送)
cacheRequest?: boolean;
// 请求发送之前,可以做些什么
beforeRequest?: (nowConfig?: config, initConfig?: config) => void | config;
// 请求发送失败时,可以做些什么
requestError?: (err?: Error, initConfig?: config) => void | config;
// 请求返回之前,可以做些什么
beforeResponse?: (responseData: AxiosResponse, nowConfig?: config, initConfig?: config) => any;
// 请求返回失败,可以做些什么
responseError?: (err?: Error, initConfig?: config) => void | config;
// 可以加入的其他一些参数,可在执行阶段中的initConfig获取
otherOptions?: object;
}
const axiosFetch = new utils.fetch(config)
// post
axiosFetch.post
// get
axiosFetch.get
// delete
axiosFetch.delete
// put
axiosFetch.put