vue实现输入框的模糊查询的示例代码(节流函数的应用场景)


Posted in Javascript onSeptember 01, 2019

上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢?

首先,我们来理解一下:节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;

输入框的模糊查询功能原理分析

所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能就是很好的模糊查询的例子;其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示;原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?ajax连续多次触发,再加上如果我们的方法体中有操作DOM元素的方法,那么必然会给我们的浏览器进入假死甚至崩溃状态;那么我们有没有办法来解决此类问题呢?答案是:有的;(不了解模糊查询功能的同学可以出门右转去百度首页试一下搜索,给你5分钟,我等你回来)

HTML视图层代码:

<div id="app">



//输入框,绑定输入框的值是变量input_value的值,然后对输入框做了事件绑定keyup,在用户输入的时候会触发
       <input type="text" placehold="请输入id进行查询" 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结构,就是一个输入框,我们给输入框加了ref属性是为了方便我们后面操作DOM拿到输入框的值(详情可见ref和$refs的区别博文https://3water.com/article/167643.htm),然后下面有一个ul列表,不过ul列表是判断展示的;(至于为什么会用v-show而不是v-if,可以点击链接查阅之前的博文https://3water.com/article/168984.htm);

js数据逻辑层代码:

// 实例化 vue对象
    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: "财务", time: "20170203" },
        { id: "1206", name: "嘻嘻", time: "20170208" },
        { id: "1307", name: "测试", time: "20170201" }
       ],  
         list:[]
    },
    
    methods:{//触发keyup事件之后触发的方法
      search(){


//这个变量主要是用来测试节流后和不节流的区别





var i=0;





console.log(i++);

//定义的新数组存放筛选之后的数据
        this.list=[];
        //拿到当前input输入框输入的值
        this.input_value=this.$refs.input.value;
        //判断展示ul列表,如果输入了就展示没输入就不展示
        if(this.input_value.length>0){
          this.state=true;
        }else{
          this.state=false;
        }
        
        //循环模拟数据的数组
        this.dataList.map((msg)=>{
          //拿当前json的id、name、time去分别跟输入的值进行比较
          //indexOf 如果在检索的字符串中没有出现要找的值是会返回-1的,所以我们这里不等于-1就是假设输入框的值在当前json里面找到的情况
          if(msg.id.indexOf(this.input_value)!=-1  || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){
            //然后把当前json添加到list数组中
            this.list.push(msg);
          }
        })
      },
    }
  })

js数据逻辑层代码其实不难,主要就是给input绑定了keyup事件,在用户输入的时候会触发search事件,用户每输入一个字符都会触发一次;然后我们通过this.$refs.input.value来获取输入框当前的值并赋值给变量this.input_value,然后我们对this.input_value的长度进行判断来实现对用户是否输入的判断,如果用书输入了我们就把v-show绑定的值state赋值给true,反之则赋值为false;然后我们来用ES6的map方法来循环我们的dataList数组,dataList数组的数据是模拟后台接口数据,通过indexOf方法是否等于-1来进行判断当前json里面是否有输入框中输入的数组,indexOf是javascript提供的操作字符串方法,调用方式:string.indexOf("要查询的值"),如果str中没有要查询的值会返回我们-1,如果有会直接返回给我们查询数据的当前下标;所以我们可以借助indexOf是否等于-1来进行判断当前json中是否有我们要查询的字符串;如果有的话,我们只需要把当前json添加到空数组list中即可,然后li绑定list展示;

效果图如下:

vue实现输入框的模糊查询的示例代码(节流函数的应用场景)

到这里我们就可以看到我们要的模糊查询功能已经实现了,但是我们上面讲到模糊查询会影响浏览器的性能,从控制台输入的变量i的值可以看到我们的search方法已经被调用了8次,我们输入的字符越长被调用的次数越多,如果方法里面有操作DOM的行为性能影响会更严重;所以我们现在来加上节流函数来看看:

//节流函数
      throttle(){
        //保持this的指向始终指向vue实例
        var that=this;
        if(!that.statu){
          return;
        }  
        that.statu=false;
        setTimeout(function(){
          console.log(new Date());
          that.search();
          that.statu=true;
        },1000)
      },

我们把我们写的节流函数封装在throttle里面执行,把@keyup绑定的点击事件修改为throttle,当用户输入字符的时候触发节流函数;

效果图如下:

vue实现输入框的模糊查询的示例代码(节流函数的应用场景)

我们可以从控制台很清晰的看到当我们使用节流函数的时候,当我们输入了8个字符我们的方法只执行了两次,并且执行时间是每隔一秒执行一次,一个方法执行2次肯定会比执行8次不管是在效率还是在性能方面都会是比较大的提升,用了节流函数之后相对上面没用的节流函数来说,我们极大的实现了性能提升、优化,所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的;

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
学习php分页代码实例
2013/10/24 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php程序内部post数据的方法
2015/03/31 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python中字符串的修改及传参详解
2016/11/30 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
详解Python发送email的三种方式
2018/10/18 Python
Python远程linux执行命令实现
2020/11/11 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
施工工地安全标语
2014/06/07 职场文书
机关作风建设工作总结
2014/10/23 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书