前端开发技巧正则匹配整数手机号码*号处理禁止右键、禁止F12 随机订单号自定义虚线去除数组 if假数据刷新页

正则匹配整数

console.log(/^-?\d+$/.test(1)) // true
console.log(/^-?\d+$/.test(0)) // true
console.log(/^-?\d+$/.test(-1)) // true

手机号码*号处理

'18212345678'.replace(/(\d{3}).*(\d{4})/, '$1****$2') // 180****5678

禁止右键、禁止F12

// 禁止右键
document.oncontextmenu = new Function("event.returnValue=false");

// 禁止F12
document.onkeydown = new Function("event.returnValue=false");

随机订单号

function randomNumber() {
    const now = new Date()
    let month = now.getMonth() + 1
    let day = now.getDate()
    let hour = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
    return orderCode;
}

randomNumber() // 20221126173910839253

自定义虚线

<style>
  .demo {
    width: 100px;
    height: 1px;
    background-image: linear-gradient(to right, #f00 0%, #f00 50%, transparent 75%);
    background-size: 5px;
    background-repeat: repeat;
  }
</style>
<div class="demo"></div>

去除数组 if假数据

const arr = [1, 7, 3, 0, '', null, undefined, false]
const filterArr = arr.filter(Boolean)
console.log(filterArr) // [1, 7, 3]

刷新页面

history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href

文件下载（Blob）

<body>
    <button onclick="download()">文件下载</button>

    <script>
        function download(){
            const fileName= "test.txt";
            const myBlob = new Blob(["hello world"], { type: "text/plain" });
            downloadFun(fileName, myBlob);
        }
        function downloadFun(fileName, blob){
            const link = document.createElement("a");
            link.href = URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            link.remove();
            URL.revokeObjectURL(link.href);
        }
    </script>
</body>

数据为空提示

<style type="text/css">
    .zh-value:empty:before {
        content: '--';
    }
</style>
<ul>
    <li>姓名：<span class="zh-value">张三</span></li>
    <li>昵称：<span class="zh-value"></span></li>
    <li>性别：<span class="zh-value"></span></li>
</ul>

vue向子组件传递所有事件监听

<child-comp v-on="$listeners" />

vue 绑定所有props

<child-comp v-bind="$props" />

vue 动态指令

<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

vue prop验证

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

格式化金钱

const ThousandNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = ThousandNum(20190214);
// money => "20,190,214

快速转换字符串为数字

+'123' // 123

快速日期转时间戳

console.log(+new Date()); // 1578458905775