最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼(防抖函數(shù)的應(yīng)用場(chǎng)景)

 更新時(shí)間:2019年09月05日 10:11:26   作者:有夢(mèng)想的咸魚前端  
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料,主要是防抖函數(shù)的應(yīng)用場(chǎng)景,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

上一篇博文我們講到了節(jié)流函數(shù)的應(yīng)用場(chǎng)景,我們知道了節(jié)流函數(shù)可以用在模糊查詢、scroller、onresize等場(chǎng)景;今天這篇我們來(lái)講防抖函數(shù)的應(yīng)用場(chǎng)景::

通過(guò)上一篇博文的學(xué)習(xí),我們知道了防抖函數(shù)的原理:只有在事件觸發(fā)的時(shí)候才會(huì)延遲加載,如果在延遲加載之前再次觸發(fā),則會(huì)刷新延遲時(shí)間重新延遲,觸發(fā)次數(shù)有且只有觸發(fā)一次;

如果對(duì)防抖函數(shù)原理有疑惑,請(qǐng)點(diǎn)擊鏈接跳轉(zhuǎn)到關(guān)于防抖函數(shù)講解的博文:http://m.fzitv.net/article/169350.htm

防抖函數(shù)一般是用于頻繁觸發(fā)事件,而我們只需要它觸發(fā)一次的場(chǎng)景,比如:輸入框的oninput事件、button按鈕點(diǎn)擊事件、點(diǎn)贊等操作場(chǎng)景;

今天我們講的demo場(chǎng)景是防抖函數(shù)實(shí)現(xiàn)手機(jī)號(hào)碼校驗(yàn):

HTML視圖層代碼:

  <div id="app">
  <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" v-model="val" @keyup="check"/>
  <div class="box" v-show="statu==true">您輸入的手機(jī)號(hào)碼格式正確</div>
 </div>

首先我們視圖層代碼是一個(gè)輸入框后面加上一個(gè)div作為提示信息,HTML代碼很簡(jiǎn)單就不過(guò)多講解了;

JS數(shù)據(jù)邏輯層代碼:

 //這里我們要引入一個(gè)文件,文件里面是防抖函數(shù)的是實(shí)現(xiàn)
  <script src="test.js"></script>
 <script>
 // 實(shí)例化 vue對(duì)象
  new Vue({
   el:"#app",
   data:{
        //val是雙向數(shù)據(jù)綁定綁定輸入框的值
    val:"",
        //此處狀態(tài)值是根據(jù)狀態(tài)值的變化來(lái)修改后面div的提示信息
    statu:false
   },
  mounted(){

  },
  methods:{
        //check是我們綁定的輸入框的@keyup事件,注意這里不能是函數(shù),不然不會(huì)觸發(fā),必須要是對(duì)象
   check:debounce(function(){
          //這里是我們調(diào)用方法,也就是我們要做的事情
    this.handle();
    console.log(new Date())
    }),
    handle(){
          //此處輸入是為了統(tǒng)計(jì)handle事件觸發(fā)的次數(shù)
     console.log(“函數(shù)防抖”);
     //這里定義校驗(yàn)規(guī)則
     let reg = /^1[3|4|5|7|8][0-9]{9}$/; 
     //校驗(yàn)手機(jī)號(hào)規(guī)則
           //如果校驗(yàn)不通過(guò)會(huì)返回false,如果校驗(yàn)通過(guò)會(huì)返回true
     if(reg.test(this.val)){
              //修改狀態(tài)值方便上面的視圖層判斷展示
      this.statu=true;
              //動(dòng)態(tài)的修改提示信息
      document.getElementsByClassName("box").innerHTML="您輸入的手機(jī)號(hào)碼格式錯(cuò)誤";
     }else{
      this.statu=false;
      document.getElementsByClassName("box").innerHTML="您輸入的手機(jī)號(hào)碼格式錯(cuò)誤";
     }
    },
  }
 })

test.js

 function debounce(fn) { //默認(rèn)300毫秒
  var timer;
  return function() {
   if(timer) {
    clearTimeout(timer);
   }
   timer = setTimeout(() => {
        定時(shí)器必須要更改this指向,可以用apply、bind、或者上面用變量轉(zhuǎn)換等方式來(lái)進(jìn)行更改this指向
  
    fn.apply(this); // this 指向vue
   }, 1000);
  };
 }

最后,我們的效果圖如下(這里只是簡(jiǎn)單的模擬效果,視圖層搭建的不是很美觀):

   

我們可以看到我們打印的結(jié)果只輸出了一次,如果不使用防抖函數(shù),這里是會(huì)觸發(fā)11次的,因?yàn)橐还草斎肓?1個(gè)字符;假設(shè)我們的方法體中是發(fā)送ajax和操作DOM呢?為了一個(gè)手機(jī)號(hào)碼校驗(yàn),難道我們要進(jìn)行11次甚至更多次的ajax請(qǐng)求或者DOM操作嗎?如果是那樣,我們的程序性能可想而知,所以說(shuō)防抖函數(shù)是一種性能提升方案;

上述講述的是我們之前常見的cdn方式引入vue,那么我們?nèi)绾卧趘ue-cli腳手架中使用防抖函數(shù)來(lái)進(jìn)行提升性能呢?

vue-cli:

首先我們可以在build文件夾中新建一個(gè)js文件,這里我們定義common.js:

common.js

// 函數(shù)防抖
export function debounce(fn, delay) {
 // 記錄上一次的延時(shí)器
 var timer = null;
 var delay = delay || 200;
 return function() {
 // var args = arguments;
  var that = this;
  // 清除上一次延時(shí)器
  clearTimeout(timer)
  timer = setTimeout(function() {
   fn.apply(that)
  }, delay);
 }
 }

注意:我們?cè)趘ue-cli中自定義方法必須要export拋出,不然組件讀取不到

然后我們到我們需要用的文件中來(lái)進(jìn)行引入和使用:

需要使用的組件:

import {debounce} from "../../build/common"

有拋出就一定有引入,我們這里用import來(lái)引用common.js文件里面的方法,這里的debounce就是我們用來(lái)接收common.js里面方法的變量;

調(diào)用方式跟上面的一樣:

這里的search是視圖層綁定的觸發(fā)事件,注意這里也需要是對(duì)象的形式來(lái)調(diào)用
methods:{
 Search:debounce(function(){console.log(1234);},1000), 
}

總結(jié):

1、防抖函數(shù)和節(jié)流函數(shù)均屬于一種性能優(yōu)化方案,有效的使用可以提升程序性能,提升用戶體驗(yàn);

2、防抖函數(shù)可適用于點(diǎn)贊、輸入框校驗(yàn)、取消點(diǎn)贊、創(chuàng)建訂單等不可讓用戶同一時(shí)間內(nèi)頻繁進(jìn)行操作的場(chǎng)景;

好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

  • vue 組件中添加樣式不生效的解決方法

    vue 組件中添加樣式不生效的解決方法

    這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • Vant?如何修改van-collapse-item右側(cè)圖標(biāo)

    Vant?如何修改van-collapse-item右側(cè)圖標(biāo)

    這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 學(xué)習(xí)筆記之Vuex的用法總結(jié)(Vue狀態(tài)管理)

    學(xué)習(xí)筆記之Vuex的用法總結(jié)(Vue狀態(tài)管理)

    這篇文章主要介紹了學(xué)習(xí)筆記之Vuex的用法總結(jié)(Vue狀態(tài)管理),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vue filters過(guò)濾器的使用方法

    Vue filters過(guò)濾器的使用方法

    這篇文章主要為大家詳細(xì)介紹了Vue filters過(guò)濾器的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能(示例代碼)

    使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能(示例代碼)

    最近接了個(gè)項(xiàng)目需要開發(fā)一個(gè)app項(xiàng)目,由于是第一次接觸這種app開發(fā),經(jīng)過(guò)一番思考,決定使用Vue3+Vant前端組件的模式進(jìn)行開發(fā),下面把問(wèn)題分析及實(shí)現(xiàn)代碼分享給大家,需要的朋友參考下吧
    2021-06-06
  • Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model的詳細(xì)過(guò)程

    Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model的詳細(xì)

    v-model 是 vue3 中的一個(gè)內(nèi)置指令,很多表單元素都可以使用這個(gè)屬性,如 input、checkbox 等,咱可以在自定義組件中實(shí)現(xiàn) v-model,這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實(shí)現(xiàn) v-model,需要的朋友可以參考下
    2022-10-10
  • Vue.js暴露方法給WebView的使用操作

    Vue.js暴露方法給WebView的使用操作

    這篇文章主要介紹了Vue.js暴露方法給WebView的使用操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • 最新評(píng)論

    铁岭市| 外汇| 彰化县| 共和县| 云安县| 海城市| 锦屏县| 安乡县| 喀喇| 江孜县| 涿鹿县| 昔阳县| 沈阳市| 正蓝旗| 吴旗县| 九龙县| 万载县| 石柱| 涪陵区| 东乌珠穆沁旗| 卫辉市| 桓台县| 泰兴市| 阿合奇县| 泊头市| 谢通门县| 固镇县| 吉木乃县| 安新县| 东明县| 资中县| 大石桥市| 抚顺县| 庆安县| 横峰县| 南木林县| 清流县| 崇礼县| 湘潭市| 化隆| 乌恰县|