Util 常用工具

节流和防抖

常用方式

throttle

触发了:

debounce

触发了:

<template>
  <div>
    <div>
      <span>throttle</span>
      <jp-input v-model="num" @input="_input1"></jp-input>
      <span>触发了:{{ text1 }}</span>
    </div>
    <div>
      <span>debounce</span>
      <jp-input v-model="num2" @input="_input2"></jp-input>
      <span>触发了:{{ text2 }}</span>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {},
  data() {
    return {
      num: '',
      num2: '',
      text1: '',
      text2: '',
      throttle: this.$jpUtil.throttle(1000, (data) => {
        console.log('jpThrottle', data)
        this.text1 = data
      }),
      debounce: this.$jpUtil.debounce(1000, (data) => {
        console.log('jpDebounce', data)
        this.text2 = data
      })
    }
  },
  methods: {
    _input1(e) {
      this.throttle(e)
    },
    _input2(e) {
      this.debounce(e)
    }
  },
  computed: {}
}
</script>

<style scoped>
.jp-input {
  width: 50%;
  margin-top: 20px;
}
</style>

显示代码

深拷贝

常用方式

原始数据

{}

深拷贝后,修改field1的值

<template>
  <div>
    <div>原始数据</div>
    <div v-html="base"></div>
    <div style="margin-top: 20px">深拷贝后,修改field1的值</div>
    <div v-html="baseClone"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      base: {},
      baseClone: ''
    }
  },
  mounted() {
    this.base = {
      field1: 1,
      field2: undefined,
      field3: {
        child: 'child'
      },
      field4: [2, 4, 8],
      empty: null,
      bool: new Boolean(true),
      num: new Number(2),
      str: new String(2),
      symbol: Object(Symbol(1)),
      date: new Date(),
      reg: /\d+/,
      error: new Error(),
      func1: () => {
        console.log('code秘密花园')
      },
      func2: function (a, b) {
        return a + b
      }
    }

    this.baseClone = this.$jpUtil.deepClone(this.base)

    this.baseClone.field1 = 2
    console.log(this.baseClone)
  }
}
</script>

<style scoped></style>

显示代码

常见空判断

空判断

空字符串'' true

空map: {} true

null true

undefined true

空数组[] true

<template>
  <div>
    <div class="title">空判断</div>
    <div class="content">
      <span class="pre">空字符串''</span>
      {{ format1 ? 'true' : 'false' }}
    </div>
    <div class="content">
      <span class="pre">空map: {}</span>
      {{ format2 ? 'true' : 'false' }}
    </div>
    <div class="content">
      <span class="pre">null</span>
      {{ format3 ? 'true' : 'false' }}
    </div>
    <div class="content">
      <span class="pre">undefined</span>
      {{ format4 ? 'true' : 'false' }}
    </div>
    <div class="content">
      <span class="pre">空数组[]</span>
      {{ format5 ? 'true' : 'false' }}
    </div>
  </div>
</template>
<script>
export default {
  mounted() {},
  computed: {
    format1() {
      return this.$jpUtil.isEmpty('')
    },
    format2() {
      return this.$jpUtil.isEmpty({})
    },
    format3() {
      return this.$jpUtil.isEmpty(null)
    },
    format4() {
      return this.$jpUtil.isEmpty(undefined)
    },
    format5() {
      return this.$jpUtil.isEmpty([])
    }
  }
}
</script>

<style scoped>
@import url('./common.css');
</style>

显示代码

常见正则校验

邮箱验证

true

手机验证

true

身份证

false

URL验证

true

是否全是小写字母

false

是否全是大写字母

true

<template>
  <div>
    <div class="title">邮箱验证</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="email"></jp-input>
      {{ validEmail(email) }}
    </div>
    <div class="title">手机验证</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="mobile"></jp-input>
      {{ validMobile(mobile) }}
    </div>
    <div class="title">身份证</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="idCard"></jp-input>
      {{ validateIDcard(idCard) }}
    </div>
    <div class="title">URL验证</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="url"></jp-input>
      {{ validURL(url) }}
    </div>
    <div class="title">是否全是小写字母</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="lowerCase"></jp-input>
      {{ validLowerCase(lowerCase) }}
    </div>
    <div class="title">是否全是大写字母</div>
    <div class="content">
      <jp-input clearable style="width: 240px" placeholder="请输入" v-model="upCase"></jp-input>
      {{ validUpperCase(upCase) }}
    </div>
  </div>
</template>
<script>
export default {
  mounted() {},
  data() {
    return {
      url: 'http://www.baidu.com',
      mobile: '18021323423',
      email: '22@qq.com',
      lowerCase: 'Asx',
      upCase: 'AAA',
      idCard: '341224199011232323'
    }
  },
  computed: {
    validEmail() {
      return function (email) {
        return this.$jpUtil.validEmail(email)
      }
    },
    validMobile() {
      return function (phone) {
        return this.$jpUtil.validMobile(phone)
      }
    },
    validURL() {
      return function (url) {
        return this.$jpUtil.validURL(url)
      }
    },
    validLowerCase() {
      return function (data) {
        return this.$jpUtil.validLowerCase(data)
      }
    },
    validUpperCase() {
      return function (data) {
        return this.$jpUtil.validUpperCase(data)
      }
    },
    validateIDcard() {
      return function (data) {
        return this.$jpUtil.validateIDcard(data)
      }
    }
  }
}
</script>

<style scoped>
@import url('./common.css');
</style>

显示代码

常用数组方法

是不是数组类型

"" false

[] true

去除数组中空值

[1, 2, 3, null, '', undefined] [ 1, 2, 3 ]

[{title: '111'}, {}] [ { "title": "111" } ]

uniqueArr

[1,1,2, 2, 3, null, '', undefined] [ 1, 2, 3 ]

[{ title: '111' }, { title: '111' }, {}] [ { "title": "111" }, { "title": "111" } ]

对象数组的去重

[{ title: '111' }, { title: '111' }, {}] [ { "title": "111" }, {} ]

<template>
  <div>
    <div class="title">是不是数组类型</div>
    <div class="content">
      <span class="pre">""</span>
      {{ isArray('') }}
    </div>
    <div class="content">
      <span class="pre">[]</span>
      {{ isArray([]) }}
    </div>
    <div class="title">去除数组中空值</div>
    <div class="content">
      <span class="pre">[1, 2, 3, null, '', undefined]</span>
      {{ cleanArray([1, 2, 3, null, '', undefined]) }}
    </div>
    <div class="content">
      <span class="pre">[{title: '111'}, {}]</span>
      {{ cleanArray([{ title: '111' }, {}]) }}
    </div>
    <div class="title">uniqueArr</div>
    <div class="content">
      <span class="pre">[1,1,2, 2, 3, null, '', undefined]</span>
      {{ uniqueArr([1, 2, 3, null, '', undefined]) }}
    </div>
    <div class="content">
      <span class="pre">[{ title: '111' }, { title: '111' }, {}]</span>
      {{ uniqueArr([{ title: '111' }, { title: '111' }, {}]) }}
    </div>
    <div class="title">对象数组的去重</div>
    <div class="content">
      <span class="pre">[{ title: '111' }, { title: '111' }, {}]</span>
      {{ uniqueObjArr([{ title: '111' }, { title: '111' }, {}], 'title') }}
    </div>
  </div>
</template>
<script>
export default {
  mounted() {},
  computed: {
    isArray() {
      return function (data) {
        return this.$jpUtil.isArray(data)
      }
    },
    cleanArray() {
      return function (data) {
        return this.$jpUtil.cleanArray(data)
      }
    },
    uniqueArr() {
      return function (data) {
        return this.$jpUtil.cleanArray(data)
      }
    },
    uniqueObjArr() {
      return function (data, key) {
        return this.$jpUtil.uniqueObjArr(data, key)
      }
    }
  }
}
</script>

<style scoped>
@import url('./common.css');
</style>

显示代码

其他

去除空格

1 2 3 4 4 12344

获取随机数

10~20之间的随机数 10

uuid

获取uuid a978acec-fa6e-4672-c6b6-f810f297a542

是不是String类型

null false

"" true

<template>
  <div>
    <div class="title">去除空格</div>
    <div class="content">
      <span class="pre">1 2 3 4 4</span>
      {{ trim }}
    </div>
    <div class="title">获取随机数</div>
    <div class="content">
      <span class="pre">10~20之间的随机数</span>
      {{ random(10, 20) }}
    </div>
    <div class="title">uuid</div>
    <div class="content">
      <span class="pre">获取uuid</span>
      {{ uuid }}
    </div>
    <div class="title">是不是String类型</div>
    <div class="content">
      <span class="pre">null</span>
      {{ isString(null) }}
    </div>
    <div class="content">
      <span class="pre">""</span>
      {{ isString('') }}
    </div>
  </div>
</template>
<script>
export default {
  mounted() {},
  computed: {
    trim() {
      return this.$jpUtil.trim('1 2 3 4 4')
    },

    random() {
      return function (min, max) {
        return this.$jpUtil.random(min, max)
      }
    },
    uuid() {
      return this.$jpUtil.uuid()
    },
    isString() {
      return function (str) {
        return this.$jpUtil.isString(str)
      }
    }
  }
}
</script>

<style scoped>
@import url('./common.css');
</style>

显示代码