vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)（防抖函數(shù)的應(yīng)用場(chǎng)景）
上一篇博文我們講到了節(jié)流函數(shù)的應(yīng)用場(chǎng)景，我們知道了節(jié)流函數(shù)可以用在模糊查詢坏晦、scroller、onresize等場(chǎng)景；今天這篇我們來講防抖函數(shù)的應(yīng)用場(chǎng)景：：
通過上一篇博文的學(xué)習(xí)凰狞，我們知道了防抖函數(shù)的原理：只有在事件觸發(fā)的時(shí)候才會(huì)延遲加載篇裁，如果在延遲加載之前再次觸發(fā)，則會(huì)刷新延遲時(shí)間重新延遲赡若，觸發(fā)次數(shù)有且只有觸發(fā)一次达布；
如果對(duì)防抖函數(shù)原理有疑惑，請(qǐng)點(diǎn)擊鏈接跳轉(zhuǎn)到關(guān)于防抖函數(shù)講解的博文：https://www.cnblogs.com/dengyao-blogs/p/11436228.html
防抖函數(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)單就不過多講解了霸株；
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)值的變化來修改后面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)不通過會(huì)返回false倔叼，如果校驗(yàn)通過會(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)換等方式來進(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操作嗎捕捂？如果是那樣，我們的程序性能可想而知斗搞，所以說防抖函數(shù)是一種性能提升方案指攒；
上述講述的是我們之前常見的cdn方式引入vue，那么我們?nèi)绾卧趘ue-cli腳手架中使用防抖函數(shù)來進(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拋出，不然組件讀取不到
然后我們到我們需要用的文件中來進(jìn)行引入和使用：
需要使用的組件：
import {debounce} from "../../build/common"
有拋出就一定有引入溅呢，我們這里用import來引用common.js文件里面的方法澡屡，這里的debounce就是我們用來接收common.js里面方法的變量猿挚；
調(diào)用方式跟上面的一樣：
這里的search是視圖層綁定的觸發(fā)事件，注意這里也需要是對(duì)象的形式來調(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)景；
