前端常用方法库

此仓库包含了一些前端在项目开发中的一些常用方法

方法

| 方法名 | 使用 | | ------------------------- | ------------------------------------------- | | 时间格式化 | dateFormat(date[,format]) | | 存储单位转换（MB、GB 等） | sizeFilter(limit) | | file 转 base64 | getBase64(file,cb) | | 全局唯一 id | uuid() | | 将 hex 颜色转成 rgb | hexToRgba(hex[,opacity]) | | 根据下载链接下载文件 | downloadFile(url: string, fileName: string) | | 计算字符的字节数 | countStrToBit(str: string) | | 对比两个对象值-lodash | isEqual(value, other) | | 深拷贝-lodash | deepClone(obj) | | 防抖-lodash | debounce(func,wait[,immediate]) | | 节流-lodash | throttle(func,wait) |

正则 regex

export const regex = {
  phone: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
  name: /^[\u4e00-\u9fa5a-zA-Z]+$/, //中文|英文
  numName: /^[\u4e00-\u9fa5A-Za-z0-9]+$/, //中文|英文|数字
  email: /^[a-zA-Z0-9_-][.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
  password:
    /^(?![\da-z]+$)(?![\dA-Z]+$)(?![\d~!！@#$%^&*_+='"|\\(){}[\]:：;“'<>,.?/]+$)(?![a-zA-Z]+$)(?![a-z~!！@#$%^&*_+='"|\\(){}[\]:：;“'<>,.?/]+$)(?![A-Z~!！@#$%^&*_+='"|\\(){}[\]:：;“'<>,.?/]+$)[\da-zA-z~!！@#$%^&*_+='"|\\(){}[\]:：;“'<>,.?/]{8,15}$/,
  generalName: /^[\u4E00-\u9FA5a-zA-Z0-9_-（）()]+$/u, //中文|英文|数字|下划线|横线
  url: /^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-.?,'/\\&%+$#_=]*)?$/,
  version: /^\d+(\.\d+)*$/,
  dirName: /^[^\\\\/:*?"<>|]*$/,
}

本地存储

storage

import { Storage } from 'g6-fn'
const storage = new Storage()

storage.set('key', 'value')
storage.get('key')
storage.remove('key')
storage.clear()
storage.getAll()

Axios 封装

createHttpServicefang(options,requestCallback,responseCallback)

• options： Axios.create(options)
• requestCallback： 请求拦截器回调
• responseCallback： 响应拦截器回调
• responseErrorCallback 响应拦截器错误捕获回调

使用

const http = createHttpService(
  {
    baseURL: '/api',
  },
  config => {
    // xxxxx
    return config
  },
  response => {
    // xxxxx
    return response.data
  },
)

const { get, put, post } = http

export const testApi = {
  list: get(`/list`),
  add: post('/list/add'),
}

// 页面上
import { testApi } from 'xxxx/service'

testApi.get({
  /* 参数 */
})
testApi.post({
  /* 参数 */
})