vue实现手机号码的校验实例代码（防抖函数的应用场景）

vue实现⼿机号码的校验实例代码（防抖函数的应⽤场
景）
前⾔
上⼀篇博⽂我们讲到了节流函数的应⽤场景，我们知道了节流函数可以⽤在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应⽤场景：：
通过上⼀篇博⽂的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发⼀次；
防抖函数⼀般是⽤于频繁触发事件，⽽我们只需要它触发⼀次的场景，⽐如：输⼊框的oninput事件、button按钮点击事件、点赞等操作场景；
今天我们讲的demo场景是防抖函数实现⼿机号码校验：
HTML视图层代码：
<div id="app">
<input type="text" placeholder="请输⼊⼿机号码" v-model="val" @keyup="check"/>
<div class="box" v-show="statu==true">您输⼊的⼿机号码格式正确</div>
</div>
⾸先我们视图层代码是⼀个输⼊框后⾯加上⼀个div作为提⽰信息，HTML代码很简单就不过多讲解了；
JS数据逻辑层代码：
//这⾥我们要引⼊⼀个⽂件，⽂件⾥⾯是防抖函数的是实现
<script src="test.js"></script>
<script>
// 实例化 vue对象
new Vue({
el:"#app",
data:{
//val是双向数据绑定绑定输⼊框的值
val:"",
//此处状态值是根据状态值的变化来修改后⾯div的提⽰信息
statu:false
},
mounted(){
},
methods:{
//check是我们绑定的输⼊框的@keyup事件，注意这⾥不能是函数，不然不会触发，必须要是对象
check:debounce(function(){
//这⾥是我们调⽤⽅法，也就是我们要做的事情
this.handle();
console.log(new Date())
}),
handle(){
//此处输⼊是为了统计handle事件触发的次数
console.log(“函数防抖”)；
//这⾥定义校验规则
let reg = /^1[3|4|5|7|8][0-9]{9}$/;
//校验⼿机号规则
//如果校验不通过会返回false，如果校验通过会返回true
if(reg.test(this.val)){
//修改状态值⽅便上⾯的视图层判断展⽰
this.statu=true;
//动态的修改提⽰信息
document.getElementsByClassName("box").innerHTML="您输⼊的⼿机号码格式错误";
}else{
this.statu=false;
document.getElementsByClassName("box").innerHTML="您输⼊的⼿机号码格式错误";
}
},
}
})
test.js
function debounce(fn) { //默认300毫秒
var timer;
return function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
定时器必须要更改this指向，可以⽤apply、bind、或者上⾯⽤变量转换等⽅式来进⾏更改this指向
fn.apply(this); // this 指向vue
}, 1000);
};
}
最后，我们的效果图如下（这⾥只是简单的模拟效果，视图层搭建的不是很美观）：
我们可以看到我们打印的结果只输出了⼀次，如果不使⽤防抖函数，这⾥是会触发11次的，因为⼀共输⼊了11个字符；假设我们的⽅法体中是发送ajax和操作DOM呢？为了⼀个⼿机号码校验，难道我们要进⾏11次甚⾄更多次的ajax请求或者DOM操作吗？如果是那样，我们的程序性能可想⽽知，所以说防抖函数是⼀种性能提升⽅案；
上述讲述的是我们之前常见的cdn⽅式引⼊vue，那么我们如何在vue-cli脚⼿架中使⽤防抖函数来进⾏提升性能呢？
vue-cli：
⾸先我们可以在build⽂件夹中新建⼀个js⽂件，这⾥我们定义common.js：
common.js
// 函数防抖
export function debounce(fn, delay) {
// 记录上⼀次的延时器
var timer = null;
var delay = delay || 200;
return function() {
// var args = arguments;
var that = this;
// 清除上⼀次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that)
}, delay);
}
}
注意：我们在vue-cli中⾃定义⽅法必须要export抛出，不然组件读取不到
然后我们到我们需要⽤的⽂件中来进⾏引⼊和使⽤：
需要使⽤的组件：
import {debounce} from "../../build/common"
有抛出就⼀定有引⼊，我们这⾥⽤import来引⽤common.js⽂件⾥⾯的⽅法，这⾥的debounce就是我们⽤来接收common.js⾥⾯⽅法的变量；
调⽤⽅式跟上⾯的⼀样：
这⾥的search是视图层绑定的触发事件，注意这⾥也需要是对象的形式来调⽤
methods:{
Search:debounce(function(){console.log(1234);},1000),
}
总结：
1、防抖函数和节流函数均属于⼀种性能优化⽅案，有效的使⽤可以提升程序性能，提升⽤户体验；
2、防抖函数可适⽤于点赞、输⼊框校验、取消点赞、创建订单等不可让⽤户同⼀时间内频繁进⾏操作的场景；
好了，以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。