今天我们讲的demo场景是防抖函数实现手机号码校验:
<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、防抖函数可适用于点赞、输入框校验、取消点赞、创建订单等不可让用户同一时间内频繁进行操作的场景;
两个文件,一个写逻辑,一个写校验规则;特点:逻辑简单,代码量少,够用;不想看代码直接新建这两个文件复制代码,看最下面的使用方法;
在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法。1、是否合法IP地址;2、是否手机号码或者固话;3、是否固话
在小程序开发的过程中,如果你的小程序中存在图片上传的能力,经常会遇到同一个原因被拒绝审核:「没有对上传信息做审核」,想要过审核也很简单,只要将用户上传的图片提交审核就可以了
Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的。我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则。但我在深入使用表单校验规则时
在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型,基础数据类型:数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!