vue實(shí)現(xiàn)輸入框的模糊查詢(xún)的示例代碼(節(jié)流函數(shù)的應(yīng)用場(chǎng)景)
上一篇講到了javascript的節(jié)流函數(shù)和防抖函數(shù),那么我們?cè)趯?shí)際場(chǎng)合中該如何運(yùn)用呢?
首先,我們來(lái)理解一下:節(jié)流函數(shù)首先是節(jié)流,就是節(jié)約流量、內(nèi)存的損耗,旨在提升性能,在高頻率頻發(fā)的事件中才會(huì)用到,比如:onresize,onmousemove,onscroll,oninput等事件中會(huì)用到節(jié)流函數(shù);
輸入框的模糊查詢(xún)功能原理分析
所謂模糊查詢(xún)就是不需要用戶(hù)完整的輸入或者說(shuō)全部輸入信息即可提供查詢(xún)服務(wù),也就是用戶(hù)可以在邊輸入的同時(shí)邊看到提示的信息(其實(shí)是查詢(xún)出來(lái)匹配到的信息),百度的搜索功能就是很好的模糊查詢(xún)的例子;其實(shí)模糊查詢(xún)的原理就是給輸入框綁定oninput事件監(jiān)聽(tīng)用戶(hù)輸入情況,然后每次用戶(hù)只要在輸入框中輸入了信息就觸發(fā)事件進(jìn)行查詢(xún)?nèi)缓髮?shí)時(shí)展示;原理很簡(jiǎn)單,但是實(shí)現(xiàn)起來(lái)會(huì)有一些問(wèn)題,我們可以想想,每輸入一個(gè)字符都會(huì)觸發(fā)事件,那如果我們需要輸入很長(zhǎng)的信息呢,那查詢(xún)是不是就得觸發(fā)多次?ajax連續(xù)多次觸發(fā),再加上如果我們的方法體中有操作DOM元素的方法,那么必然會(huì)給我們的瀏覽器進(jìn)入假死甚至崩潰狀態(tài);那么我們有沒(méi)有辦法來(lái)解決此類(lèi)問(wèn)題呢?答案是:有的;(不了解模糊查詢(xún)功能的同學(xué)可以出門(mén)右轉(zhuǎn)去百度首頁(yè)試一下搜索,給你5分鐘,我等你回來(lái))
HTML視圖層代碼:
<div id="app"> //輸入框,綁定輸入框的值是變量input_value的值,然后對(duì)輸入框做了事件綁定keyup,在用戶(hù)輸入的時(shí)候會(huì)觸發(fā) <input type="text" placehold="請(qǐng)輸入id進(jìn)行查詢(xún)" v-model="input_value" @keyup="throttle" ref="input"/> <ul v-show="state"> <li v-for="(item,index) in list" :key="index" > <span>{{item.id}}</span> <span>{{item.name}}</span> <span>{{item.time}}</span> </li> </ul> </div>
從上述代碼中我們可以很明顯的看到DOM結(jié)構(gòu),就是一個(gè)輸入框,我們給輸入框加了ref屬性是為了方便我們后面操作DOM拿到輸入框的值(詳情可見(jiàn)ref和$refs的區(qū)別博文http://www.dbjr.com.cn/article/167643.htm),然后下面有一個(gè)ul列表,不過(guò)ul列表是判斷展示的;(至于為什么會(huì)用v-show而不是v-if,可以點(diǎn)擊鏈接查閱之前的博文http://www.dbjr.com.cn/article/168984.htm);
js數(shù)據(jù)邏輯層代碼:
// 實(shí)例化 vue對(duì)象 new Vue({ el:"#app", data:{ input_value:"", state:false, statu:true, dataList:[ { id: "1001", name: "哈哈", time: "20170207" }, { id: "1002", name: "呵呵", time: "20170213" }, { id: "1103", name: "曉麗", time: "20170304" }, { id: "1104", name: "小蘭", time: "20170112" }, { id: "1205", name: "財(cái)務(wù)", time: "20170203" }, { id: "1206", name: "嘻嘻", time: "20170208" }, { id: "1307", name: "測(cè)試", time: "20170201" } ], list:[] }, methods:{//觸發(fā)keyup事件之后觸發(fā)的方法 search(){ //這個(gè)變量主要是用來(lái)測(cè)試節(jié)流后和不節(jié)流的區(qū)別 var i=0; console.log(i++); //定義的新數(shù)組存放篩選之后的數(shù)據(jù) this.list=[]; //拿到當(dāng)前input輸入框輸入的值 this.input_value=this.$refs.input.value; //判斷展示ul列表,如果輸入了就展示沒(méi)輸入就不展示 if(this.input_value.length>0){ this.state=true; }else{ this.state=false; } //循環(huán)模擬數(shù)據(jù)的數(shù)組 this.dataList.map((msg)=>{ //拿當(dāng)前json的id、name、time去分別跟輸入的值進(jìn)行比較 //indexOf 如果在檢索的字符串中沒(méi)有出現(xiàn)要找的值是會(huì)返回-1的,所以我們這里不等于-1就是假設(shè)輸入框的值在當(dāng)前json里面找到的情況 if(msg.id.indexOf(this.input_value)!=-1 || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){ //然后把當(dāng)前json添加到list數(shù)組中 this.list.push(msg); } }) }, } })
js數(shù)據(jù)邏輯層代碼其實(shí)不難,主要就是給input綁定了keyup事件,在用戶(hù)輸入的時(shí)候會(huì)觸發(fā)search事件,用戶(hù)每輸入一個(gè)字符都會(huì)觸發(fā)一次;然后我們通過(guò)this.$refs.input.value來(lái)獲取輸入框當(dāng)前的值并賦值給變量this.input_value,然后我們對(duì)this.input_value的長(zhǎng)度進(jìn)行判斷來(lái)實(shí)現(xiàn)對(duì)用戶(hù)是否輸入的判斷,如果用書(shū)輸入了我們就把v-show綁定的值state賦值給true,反之則賦值為false;然后我們來(lái)用ES6的map方法來(lái)循環(huán)我們的dataList數(shù)組,dataList數(shù)組的數(shù)據(jù)是模擬后臺(tái)接口數(shù)據(jù),通過(guò)indexOf方法是否等于-1來(lái)進(jìn)行判斷當(dāng)前json里面是否有輸入框中輸入的數(shù)組,indexOf是javascript提供的操作字符串方法,調(diào)用方式:string.indexOf("要查詢(xún)的值"),如果str中沒(méi)有要查詢(xún)的值會(huì)返回我們-1,如果有會(huì)直接返回給我們查詢(xún)數(shù)據(jù)的當(dāng)前下標(biāo);所以我們可以借助indexOf是否等于-1來(lái)進(jìn)行判斷當(dāng)前json中是否有我們要查詢(xún)的字符串;如果有的話(huà),我們只需要把當(dāng)前json添加到空數(shù)組list中即可,然后li綁定list展示;
效果圖如下:
到這里我們就可以看到我們要的模糊查詢(xún)功能已經(jīng)實(shí)現(xiàn)了,但是我們上面講到模糊查詢(xún)會(huì)影響瀏覽器的性能,從控制臺(tái)輸入的變量i的值可以看到我們的search方法已經(jīng)被調(diào)用了8次,我們輸入的字符越長(zhǎng)被調(diào)用的次數(shù)越多,如果方法里面有操作DOM的行為性能影響會(huì)更嚴(yán)重;所以我們現(xiàn)在來(lái)加上節(jié)流函數(shù)來(lái)看看:
//節(jié)流函數(shù) throttle(){ //保持this的指向始終指向vue實(shí)例 var that=this; if(!that.statu){ return; } that.statu=false; setTimeout(function(){ console.log(new Date()); that.search(); that.statu=true; },1000) },
我們把我們寫(xiě)的節(jié)流函數(shù)封裝在throttle里面執(zhí)行,把@keyup綁定的點(diǎn)擊事件修改為throttle,當(dāng)用戶(hù)輸入字符的時(shí)候觸發(fā)節(jié)流函數(shù);
效果圖如下:
我們可以從控制臺(tái)很清晰的看到當(dāng)我們使用節(jié)流函數(shù)的時(shí)候,當(dāng)我們輸入了8個(gè)字符我們的方法只執(zhí)行了兩次,并且執(zhí)行時(shí)間是每隔一秒執(zhí)行一次,一個(gè)方法執(zhí)行2次肯定會(huì)比執(zhí)行8次不管是在效率還是在性能方面都會(huì)是比較大的提升,用了節(jié)流函數(shù)之后相對(duì)上面沒(méi)用的節(jié)流函數(shù)來(lái)說(shuō),我們極大的實(shí)現(xiàn)了性能提升、優(yōu)化,所以在高頻率觸發(fā)的事件中我們是可以建議用節(jié)流函數(shù)來(lái)進(jìn)行控制和解決問(wèn)題的;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請(qǐng)求參數(shù)丟失的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue 解決在element中使用$notify在提示信息中換行問(wèn)題
這篇文章主要介紹了Vue 解決在element中使用$notify在提示信息中換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請(qǐng)求框架,本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作
這篇文章主要介紹了vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能(思路詳解
在開(kāi)發(fā)中,有一個(gè)需求是 選項(xiàng)組件中使用到一個(gè) 全選的功能,特在這記錄下實(shí)現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對(duì)vue ElementUi 全選功能感興趣的朋友一起看看吧2024-02-02vue-create創(chuàng)建VUE3項(xiàng)目詳細(xì)圖文教程
create-vue是Vue官方新的腳手架工具,底層切換到了vite(下一代前端工具鏈),為開(kāi)發(fā)提供極速響應(yīng),下面這篇文章主要給大家介紹了關(guān)于vue-create創(chuàng)建VUE3項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2024-03-03vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例
這篇文章主要介紹了vue實(shí)現(xiàn)各種文件文檔下載及導(dǎo)出示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06