1. <noscript id="ee6939ed"></noscript>

    
       
       
       
        




      狗万官网酒店 > 狗万官网下载 > vue落实手机号码的校验实例代码(防抖函数的运用场景)_vue.js

      vue落实手机号码的校验实例代码(防抖函数的运用场景)_vue.js

      来源: 2019-09-09 19:45 我来投稿 参与评论
      这篇文章主要给大家介绍了关于vue落实手机号码的校验的相关资料,重大是防抖函数的运用场景,文中通过示范代码介绍的独特详细,对大家学习或者使用vue具有原则性的参考学习价值,要求的朋友们下面来累计学习学习吧

      前言

      上一篇博文我们讲到了节流函数的运用场景,咱领略了节流函数可以用在模糊查询、scroller、onresize等现象;当天这篇我们来讲防抖函数的运用场景::

      穿越上一篇博文的上学,咱领略了防抖函数的规律:只有在事变触发的时光才会推迟加载,如果在延迟加载之前再次接触,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;

      如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.jb51.net/article/169350.htm

      防抖函数一般是用于频繁接触事件,而我辈只要求它触发一次之情景,比如:输入框的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、防抖函数可选用于点赞、输入框校验、取消点赞、创造订单等不可让用户同一时间内频繁进行操作的情景;

      好了,上述就是这篇文章的方方面面内容了,瞩望本文的情节对大家的上学或者工作具有原则性的参考学习价值,谢谢大家对脚本的师之支持。

      义务编辑:狗万官网酒店
       
       
      0% (0)
       
       
      0% (0)
      机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
      地名: 匿名?