00:00
好的,我们继续啊,那上一节课呢,我们把热搜榜啊,包括这个please hold的数据呢,动态的显示出来了,那这节课呢,我们去做这个搜索的功能。那么搜索的功能呢,就是说用户输入啊,表单上的数据啊,比如说我输个A。来,他就拿着这个呢去发请求,找和A这个关键字进行模糊匹配成功的所有数据,好的,那其实要做这个功能呢,第一步我们应该是收集表单上的数据对不对,然后呢,再去发请求呗。好的,那这样的话呢,来到我们的项目啊,我们要收集表达项的数据的话,我们找到对应的input啊,那这个时候呢,我们是不是需要绑定事件呀?哎,那表单下啊,关于这个内容发生改变的事件呢,有两个好的,那这个时候呢,我们把画笔再调出来啊,那对应的呢,有一个音input的事件,那么还有一个什么叫change事件,那这两个呢,大家要注意啊,它俩呢都是表达一下内容发生改变调用的事件,只不过change事件需要失去焦点才会调用,而input的事件呢,是只要表达下的内容发生改变呢,实时调用。
01:12
哎,这是它的特点。所以呢,在这里呢,我们选择用什么呀,用这个input事件,哎,所以呢,我这绑绑定一个the handler change,一个input啊什么呀,Change事件吧啊处理input表单下内容改变的事件,那么对应的来到GS里面呢,我们往下走啊去写一下啊,那这个呢是表单项啊内容发生啊改变的回调。嗯,好的,我们把这个呢拿过来,嗯,来,那对应的回调有了以后呢,我们要拿里面的value值呢,也比较简单啊,我们通过这个event对象,然后呢,我去给他打印一下这个event啊来来来到我们的项目过来。我这呢,输个A,再输个A,再输一个,那首先表达下的内容发生改变啊,对应的回调触发对吧?然后在这个意院的对象呢,我们需要找到detail下面的value,就是我们当前表达一下输的内容啊,也比较简单,那么有了这个value呢,我们可以先给它更新到data中啊,所以呢,在这里呢,我先初始化一个叫search啊count吧,好的,那这个呢,哎,是我们用户啊输入的嗯,表单项啊数据。
02:33
那表达下数据啊,那表达项的项啊,换一下吧,啊是它好的,那么初始化的数据有了对吧?那接下来呢,我们要去更新的话呢,也比较简单啊,那上来呢,我们去做一件事情啊,那就是去嗯,更新它的啊状态数据对吧?哎,this.set一个data,嗯,我们要更新的是它,那么对应的呢,应该是点detail.value对吧,保险起见呢,我们再train一下,就是去一下空格好的,那这个时候呢,我们来看一眼。
03:12
来到咱的APP data中啊,初始化为空,然后我实时输入,那这边实时更新没有问题,那么有了表单项输入的内容,我们可以干嘛呢?啊,我们需要拿着这个呢去发请求,拿数据,所以呢,我们还得看一下我们的接口文档啊,我们来看最后一个,那么对应的地址呢,就是杠search,请求的方式呢是get。哎,必选的参数keywords,那么它给的value呢,就是用户输入的关键字啊,就是表达下收集的数据呗,啊limit返回的数量默认为30,那么你也可以去限制它的数量啊,那现在呢,我们去测一下这个接口过来。嗯,Local host的3000下面走,那么我们最终啊,关键字是海阔天空,这个时候大家看啊,我们拿到的对象里面有个result result中呢,其实我们要取的是这个叫。
04:10
它呢是个啊,是个对象啊,上次是个数组,你看现在的Les是十个没有问题,而里面的每一个对象呢,就是啊,一条数据的信息呗。那知道了这个以后,我们可以去发请求,去拿一下这个对应的数据,对不对,好了,那么接下来呢,我们去发请求啊,获取这个关键字。啊,模糊啊匹配数据,嗯,没有问题,那这个时候呢,我们要啊发请求了,所以引入request啊,那之前呢,我已经啊写好了,为了节省点时间啊好了,那现在呢,我们再去啊发请求let一个什么呀,我们要发请求的数据呢,最终要显示到我们的页面上,对不对,那这样的话呢,大家看着我们先在data卡中呢,我再去初始化一个啊那这样呢,我们叫它一个search list呗,它呢应该是一个数组啊,那这个呢,是啊搜索到的这个数据啊,关键字。
05:18
嗯,模糊啊,模糊匹配的数据吧,我们就这样写啊,匹配的数据好的那三例的数组有了,那么接下来我这这样去写啊,Let list data啊,等于什么呢?Wa request。嗯,对吧,然后呢,把对应的地址呢,我们给它拎过来。哎,是这个好的,我们放进来,放进来以后呢,你看一下,我们先把这个参数去给它以对象的形式展现出来,来前面的keywords,那最终呢,一定是用户输入的内容呗,对吧?啊,一定是用户输入的内容啊,所以呢,这应该用的是z.data中,刚才我们更新了search content,对吧,Limit呢,限制的数量,那这个是静态的,我们就写个十条。
06:12
啊,没有问题,那么现在我们这用了awa以后呢,那对应的这是不是应该写一个a think呀?啊没有问题,好的,那这个时候我们先来看啊,我这输入一个A,我们先来看我们能能不能拿到数据。看network来有数据对吧,没有问题,那这边呢,已经成功的拿到了数据了,那接下来呢,我们可以干嘛呢?我们可以把这个数据呢,更新到我们的data中,List点啊,还是set一个data,我们要更新的呢,是search啊,List对应的数据源。是它呗,那么我们需要找到它里面的哪哪个数据呢,就是点呗,来写一下啊RO点好的,那这样的话呢,我们再来测一把。
07:08
啊,来到AB德塔中吧,直接A打卡,这是不是有值好没有问题,那这没有问题了,以后来回头看这,你会发现刚才我说的A这儿是不是给我写示个这个呀。那么当我们看到这种说明啥说明这现在显示的一定是个对象,只不过表单,我的表单项呢,现在是这个。什么呀?T为text的表单项,它不可能给你显示出来对象,那你如果给我的是个对象的话呢,那么我就会给你转换成字符串,调用to string方法。而且呢,调用object上面那个视的话,大家看啊,这里呢,很明显是个promise。那这是为什么呢?啊,哪来的promise对象呢,看这。我们by input,这是不是对于一个世界的回调?
08:00
啊,这个回调最终返回的值,其实就是我们当前表达项的value值。它呢,会自动的把当前表单项的,呃,什么呀,Event点也就这个value返回,可是现在我们人为的加了一个a think。A think这什么变成一个异步函数了呀,异步函数,注意它这个a think函数的返回值就是一个promise对象,所以我们在这里呢,能看到这个现象。那这怎么办呢?其实方式有很多啊,你可以不用在这儿用ASK啊,也是发请求了,你专门分装一个方法在这里调用就好了。那还有一点,大家看着现在我们发请求的话,你看来来到network。我们啊,重新来一遍吧,啊刷新。过来我先把这清掉,看着我输一个,这发一次,我再输给又发一次,那用户如果是噼里啪啦一直输,你会发现我这发了很多次请求。
09:03
性能很差,那当我们去看一些电商网站的时候,你会发现他们对于搜索框这他都会去做性能优化。我们不可能说用户快速的输入啊,表单上的内容每改变一次,我就发一次请求,没必要。比如说人家用户的手速很快啊,对吧,我要搜我的目的是要搜一个什么啊,比如说和一个search相关的。当我快速的输完了,其实最终你就拿着search帮我发一次请求就够了。对吧,帮我发一次请求就够了,那这这个报错呢,待会儿呢,我们会解决啊,可是呢,那其实我们最终发的请求呢,有很多没必要,所以啊,针对于这种情况呢,我们通常会用什么用函数。干嘛呀,用函数截流的形式去做一下性能优化,就是说你在快速输入的过程中呢,我们可以用函数截流去控制一下啊,比如说每在300毫秒以内呢,你不管你内容怎么发生改变。
10:08
对吧,我呢都只发一次请求。都只发一次请求啊好的,那这个时候呢,啊,我们可以怎么去做呢?来那接下来那这儿的代码。什么时候执行,那取决于我们的函数节流。那函数节流和防抖啊,也是比较重要的知识点啊,如果说有同学还不清楚的话,可以看一下我们前边啊GS高级里边的内容,好的,那每隔300毫秒我们让它发一次啊,所以呢,这个时候呢,我先来一个延时定时器。对吧,那对应的时间呢,是。300毫秒,那这样的话,哎,你这个表达一下,内容一发生改变,是不是就要开一个延始定时器啊,在这个里边我让他去执行这个代码,那这样的话,Awa是不是现在处于这个函数里面呀,所以啊a think的问题就不需要写到那了,我们写到这儿是不是就可以?
11:14
那但是光这样不够啊,这样的话呢,其实它还是会开多个定时器,来我们看一眼。啊,还是会听开多个定时器啊,照样发多次请求,其实这样做性能反而更差了,原本只需要发请求的啊,代码呢,我们现在是不是又多开了一个定时性的任务啊,啊,不行,那我们这还没有写完。还没有写完。嗯,函数截流的话呢,我们可以怎么去做呢?每隔300毫秒让它执行一次。啊,那这个时候呢,大家看着我在这个上边呢,我去给实力身上。去绑定一个,比如说A3的吧。
12:00
我去初始化一个变量为false,第一次进来我给实力身上,哎,添加这个变量啊,诶我这的注射啊,我们不要,嗯来往前推一点好的。那有了这个变量,我们可以干嘛呢?那么上来,首先第一次进来我要去判断对吧?如果this.a3为,我就不发请求了,直接return。那么当前的定时器是不是执行完了,那你别忘了啊,如果现在就这样写,它永远横为false,那不可能进来,所以呢,我们第一次进来不走if,紧接着我这儿做一个操作,这儿呢,等于什么重置为处。那现在看的话,哎,我这智为数,那下一次表达一下内容发生改变再进来的话。是不是走if判断呀,那你说我后边的代码还能执行吗?执行不了,那这样的话呢,我们看一眼我们的效果啊过来。
13:00
好的,大家看着啊,现在我咔咔咔一输,其实你后边再怎么输。你看啊来。我快速的输,哎,那现在呢,他怎么还会发多次来我们刷新一下啊。嗯,你看啊,我说了几次啊,一个两个三个四个对吧,我说了四个,这发了三次请求啊,那这不对劲啊,他不应该去发请求,我这Z点它呢,已经置为什么了,置为处了。啊。没问题,那已经智为处了以后啊,我们这儿的位置放的不对劲了,我们为的要看到什么,下次能进这个应用判断我这个东西呢,我不应该哪不应该放到这个里面,因为每次进来的话,是不是重新初始化了呀,那刚才这样啊,大家看着我在外边,我let is啊,Sand等于什么啊,False,那这个呢,用于我们什么呀?啊,这个函数节流使用好了,这有一个变量为false啊,那么接下来呢,我们就这样去做。
14:07
我们直接去判断这个变量是否为处,第一次肯定进不来,那紧接着呢,我把这个变量质为,哎,其实这样最终的效果应该是只能发一次请求财,对来,我们看一下是不是。我输回好发一次,诶我输了个Q是吧,来输回,你看再输就发不了了,为什么呢?因为现在每次进来是不是走if直接就出去了呀,好的,那这样还不够啊,我们为了要实现这个函数截流的效果,你别忘了我之后还要发请求的。还要发请求的。对吧,那。什么时候?啊,我们让它再次发起球呢,是不是应该是这个300毫秒以后。对的,不300毫秒以后,那这样的话呢,我们代码可以改一改啊,大家看啊,我把这个条件呢,放到外边,那干脆放到外边的话,我连定时器都不开了。
15:07
啊,我连定时器都不看,我放到这儿。表达一下内容一遍好为处直接返回出去,那么在定啊,在它之后呢,我去改这个内容为处,那这样的话,定时器的任务是不是也不用重复的去开多个,紧接着定时器,你看第一次进来。不走if置为处。我是不是要走这。300毫秒以后我们可以做一个动作,就是把这个a sand呢重新的置,为什么false,那这样的话,300毫秒以后的这个定时器啊,这个表达上呢,回调进来能走一步吗?不走是吧,继续往下走,再开定时器,那在这个里边我们是不是就可以去。发几条了?啊,应该能懂,那这样的话呢,就是每隔300毫秒我们去发一次请求啊,我们看一眼是不是这样的,来过来。
16:07
上来首先我一输应该是300毫秒,发一次没问题啊,那300毫秒可能大家看的不是太清楚啊,我先调成三秒啊,先调成三秒我们再看一版过来。嗯。好的,我先输个一,应该是三秒以后才发。啊,没问题吧,那我快速的输啊,大家看我输了这么多,但是我的手速手速快啊,我是不是控制在三秒以内啊,所以你看他之后又发了一次啊,没有问题,那这样的话呢,就是意味着这是函数截流啊,也就说你这一直出你你看我这不停,它只是过三秒发一次,过三秒发一次。啊,没有问题,这就叫函数截流啊,只不过现在我们的第一次是不是也需要等三秒,那这个不太好,所以呢,我们可以把这个发请求的动作呢,放到哪也放到这个下边。
17:03
哎,放到下面,那这样的话呢,第一次进来。是不是上来就发现球?对吧,第二次进来。啊,那就看我这到底是处还是false,到底是什么时候为false,不走if走后边呢,看我们的定时器来,最终啊,我们再看一下效果。嗯,稍等啊,让他重新编译一下。哎,这这为什么呢,这这个awake我是不是拎到外面了,它报错了这的a think没啥用了啊,那这样的话呢,我们要啊,如果要加嗯个a think的话,是不是还得加到这,那不太好啊不太好来我们去分装一啊那这个呢是获取对吧啊搜索数据的。啊,功能函数来来一个呗,Get一个search list,好的,我们把这个放到这,那么对应的这一段代码。
18:06
丢到这呗,里边呢,我们整一个a think不就好了吗?那这样的话呢,我们自定义这个函数呢,应该在这里去调用一下就好了,Z点它一调用对的吧,好,那在这儿调用的话,那那该发请求发请求,该更新更新没有问题,然后呢,我们定时器呢啊也很好的给他控制住了,来那这个时候我们再来看。好的。报错没有了对吧,我们看network啊,把这个清一下来说明立马是不是就发了没有问题,然后我咔咔咔快速速打家卡,嗯,是吧,就控制在三秒以内呢,我只发一次,哎,没有问题啊,好的,那这个呢,就是关于搜索性能优化相关的啊,那最后呢,我们把这个呢,给它还原成300毫秒啊,一般我们做函数截流或者防抖的话啊,都是300毫秒啊好,那这节课呢,最终我们实现的功能呢,就是根据用户输入的内容,是不是可以拿到动态的数据了呀,来没有问题啊,那这节课呢,我们先讲到这里。
我来说两句