🚀 常用的前端代码方法

安装

包管理

npm 安装:

$ npm install yiye-common-methods

yarn 安装:

$ yarn add yiye-common-methods

API使用

formatIdCard 格式化身份证号

import { formatIdCard } from "yiye-common-methods"
formatIdCard('44010512340098765') //4**4

formatName 格式化用户名

import { formatName } from "yiye-common-methods"
formatName('成龙大哥') //成***

formatPhone 格式化手机号

import { formatPhone } from "yiye-common-methods"
formatPhone('14112225764') //141****5764

formateUrl 将url参数转换成对象

import { formateUrl } from "yiye-common-methods"
formateUrl('http://www.example.com?name=Maic&age=18'); // {name: 'Maic',age: 18}

hasOwn 判断对象中是否存在指定的key

import { hasOwn } from "yiye-common-methods"
hasOwn({ name: '张三' }, 'name'); // true name 是不是在对象中

isType 判断基础数据类型以及引用数据类型，替代typeof

import { isType } from "yiye-common-methods"
isType('')('String'); // true 判断是不是字符串类型

memorize 缓存函数

import { memorize } from "yiye-common-methods"
 memorize(() => console.log(111))

mergeDeep 深拷贝一个对象

import { mergeDeep } from "yiye-common-methods"
mergeDeep({}, { a: 1, b: 2, info: { a: 1, b: 1 } });

waterMaskImg 页面水印功能

import { waterMaskImg } from "yiye-common-methods"
waterMaskImg('姓名','时间') 

validIdCard 校验身份证

import { validIdCard } from "yiye-common-methods"
validIdCard('123456788902231456') 

validPhone 校验手机号格式

import { validPhone } from "yiye-common-methods"
validPhone('12345678901')

validIp 校验是否合法ip地址

import { validIp } from "yiye-common-methods"
validIp('192.168.10.1')

validIpRegion 校验是否合法的ip地址段

import { validIpRegion } from "yiye-common-methods"
validIpRegion('192.168.10.1~100')

validPcOrPhone 判断是移动端还是PC端

import { validPcOrPhone } from "yiye-common-methods"
validPcOrPhone()

validQQAgent 判断是手机QQ

import { validQQAgent } from "yiye-common-methods"
validQQAgent()

validWXAgent 判断是手机微信

import { validWXAgent } from "yiye-common-methods"
validWXAgent()

validMail 校验邮箱格式

import { validMail } from "yiye-common-methods"
validMail('[email protected]')

validCustom 自定义校验

import { validCustom } from "yiye-common-methods"
validCustom('asdas1212')

validIsChineseChar 判断是否是中文

import { validIsChineseChar } from "yiye-common-methods"
validIsChineseChar('中文')

validateQQ 验证QQ号

import { validateQQ } from "yiye-common-methods"
validateQQ(123456)

validatePassword 检验密码

//6-15个字符，至少含数字，字母的2种
import { validatePassword } from "yiye-common-methods"
validateQQ(123456)

serialize 数据序列化

import { serialize } from "yiye-common-methods"
const obj = {
  name:'tony',
  age:10
}
serialize(obj) //name=tony&age=10

deserialize 反序列化,返回字符串

import { deserialize } from "yiye-common-methods"
const str = 'name=tony&age=10'
deserialize(str) //{name:'tony',age:10}

outputError 输出错误信息

import { outputError } from "yiye-common-methods"
outputError('类型错误') //throw new Error('类型错误')

arrayToTree 一维数组转成树结构

import { arrayToTree } from "yiye-common-methods"
arrayToTree(arr)

isEmpty 检验数据是否为空

import { isEmpty } from "yiye-common-methods"
isEmpty('')

treeToArray 树结构转数组

import { treeToArray } from "yiye-common-methods"
treeToArray(arr)

throttle 节流

import { throttle } from "yiye-common-methods"
const print = () => {
  console.log('打印')
}
debounce(throttle(),200)

//vue2 自定义节流指令
import { throttle } from "yiye-common-methods"
import Vue from 'vue';
Vue.directive('throttle', {
  bind(el, binding) {
    let executeFunction;
    if (binding.value instanceof Array) {
      const [func, timer] = binding.value;
      executeFunction = throttle(func, timer);
    } else {
      console.error(
        `throttle指令绑定的参数必须是数组，且需执行的事件类型或函数或时间间隔不能为空`
      );
      return;
    }
    el.addEventListener('keyup', executeFunction);
  }
});

//main.js
import './directive/throttle';

debounce 防抖

import { debounce } from "yiye-common-methods"
const print = () => {
  console.log('打印')
}
debounce(print(),200)

//vue2 自定义防抖指令
// directive/debounce.js
import { debounce } from "yiye-common-methods"
import Vue from 'vue';
Vue.directive('debounce', {
  bind(el, binding) {
    let executeFunction;
    if (binding.value instanceof Array) {
      const [func, timer] = binding.value;
      executeFunction = debounce(func, timer);
    } else {
      console.error(
        `debounce指令绑定的参数必须是数组，且需执行的事件类型或函数或时间间隔不能为空`
      );
      return;
    }
    el.addEventListener('keyup', executeFunction);
  }
});

//main.js
import './directive/debounce';

copy 复制

import { copy } from "yiye-common-methods"
copy('复制')

getTextLength 获取文字长度

import { copy } from "yiye-common-methods"
const len = getTextLength('获取文字长度')
console.log(len) //12

networkOnlineStatus 网络是否连接

import { networkOnlineStatus } from "yiye-common-methods"
networkOnlineStatus((e: Event) => {
    if(e.type === 'online'){
      //在线
    }else if(e.type === 'offline'){
      //离线
    }
  })