00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成咱们项目当中三级联动节流的操作。那首先说啊,咱们呢,刚刚通过两个小DEMO去理解一下子函数的防抖与节流。那这里呢,老师呢,还是要多说一嘴。函数的防抖与节流啊,在工作当中啊,它使用的频率呢,也挺高的,以及在面试当中出现的频率,频率也很高。那所以说啊,回首呢,再看一下咱们正在开发的这个项目。那当然咱们这里比如三级联动,这里需要使用到节流的操作。那么为什么呢?那首先说由于用户的这个行为的过快,可能会导致出现卡顿的现象。所以说啊,咱们呢,把频繁的这样的一个操作给它变成少量的操作。
01:00
那这样呢,可以让浏览器或者是解析器有充裕的时间去解析你的代码。防止出现卡顿的现象。那所以说啊,咱们这里呢,是需要使用到节流的技术。那当然啊,那咱们的是需要引入low dash的,但是啊,这里呢,要注意一件事儿,咱们虽然现在没有安装low大,但是咱们的NOEMOS当中已经有low大sH了。那咱们呢,可以搜索一下子,你看啊大师。那有的小伙伴可能会问老师,我根本没有安装过lowsh,那为什么项目当中会有low dash呢?哎,这个因为很简单,因为有的一些依赖啊,它依赖着low大sH捎带脚啊,也就给他引入进来了。那所以说啊,咱们已经有了low dash,那所以说啊,你就不需要再次引入了。
02:00
那所以说回到咱们的组件三级联动这里,那咱们呢,是需要给这个函数。哎,加上一个节流。那所以说啊,咱们呢,是需要引入咱们的这个low大,那就引入一下in part当谁呀,是不是杠。哎,从哪引呢?从咱们的这个low dash来引RO。那当然啊,咱们呢,为了以防万一,那先去打印一下cons.log。那你看一下的咱们的low大使有没有引入到咱们的项目当中,那咱们呢,还是得看一眼。OK,这是没问题的。但是呢,要注意一件事啊,你这种引入的方法,哎,就说这种引入的方式啊,他呢是把什么呢,写一下哎是把。哎,是把喽。
03:00
大使全部的功能函数引入啊,比如说low大里面的这个功能啊,有很多,比如说数组去重啊,数组最大值啊,数组最小值啊,对吧,以及呃,防抖啊,截流啊,有很多很多的功能函数你全都引入进来了。那其实啊,这里面呢,咱们的最好的引入方式呢,是按需引入啊,就是把自己需要的函数引进来,其余不需要的呢,怎么了,也就不需要引入了。那这样呢,也是对于项目的一个性能优化,当然咱们一会儿再说。那首先说啊,咱们看一下吧,那也就是说这里需要用到节流的操作,那咱们呢,通过那两个小小DEMO啊,你应该会大概的使用low dash的这个节流了。对吧,杠打点RO,但是这里的语法又该如何的去写呢?对不,那所以说这些老师说一下子,那这里啊,咱们可以怎么办呢,可以这么办啊,老师呢,先把它给他拿过来。
04:05
咱们一会儿再把上面这给它注释上。那首先说啊,上面的这种写法啊,是ES6的写法。对吧,如果是这种写法呢,咱们没办法去写杠点什么什么,对吧,哎,对吧,你想想你这是咋写,如果按照上面那种写法,那所以说咱们呢,可以给它变成ES5的那种写法,K冒号V的形式。对吧,那这里就是谁呢?咱们的下划线第2RORO节流。当然啊,这里面呢,需要有相应的呃,相应的这个回调,以及时间截流的时间。比如说咱们截流的时间啊,你可以稍微让它小一点,比如说50毫秒或者是60毫秒,但是你不要写的太大。对吧,假如说你写了个1万,那也就十秒才能执行一次,你这个截流截的有点狠了。对吧,所以说呢,咱们呢,给它来一个呃,截流的时间,比如说50毫秒,当然这里面呢,咱们也可以接收咱们传入进来这个索引值啊,当时咱们应该说过,鼠标一上谁是不是拿到相应的索引值,对吧,那以及这里呢,这行代码呢,咱等也是也给他拿过来。
05:15
那所以说啊,这个呢,老师呢,把它呢给你扔到这里,那当然咱格式化一下,那顶上的这个咱们就不要了。那这里呢,老师呢,还是得多说一嘴,这里要注意。谁说你现在的这种写法吧,是已经加上了节流的功能。但是呢,这里呢,要注意一件事,什么事呢,刚刚老师也说了。你这种引入low大的方式吧,是把所有的什么呀,是把所有的功能函数全引进来了。那咱们最好的引入方式是什么呢?就是最好的引入方式啊,就是按需加载,哎按需加载就是你需要什么引入什么,不需要的你可以不用引入。
06:01
那这里呢,老师呢,带着你们呢,去看一下他的这个,呃,源码咱们看一下叫low dash。你看啊。其实啊,他把每一个函数啊,都封装成一个模块,封装成一个GS。对吧,咱们呢,可以找一下子,就比如说他把RO头啊,也专门的封装成了一个模块,那这个呢,咱们还真得找一下子T开头的,对吧,OPQRSTUVWXYZ啊,其实这里面呢,咱们可以找找,也就是说它呢,其实把每一个功能都专门的封装成了一个函数。比如说你可以怎么的,你可以按照你的需求去引入你相应所需要的这样的一个功能函数。对吧,但是这里面的功能函数呢,有点多对吧,那咱们呢,耐住性子呢,去找一下子,你看这不就在这儿了。对吧,所以说这里面嘛,咱们呢,可以按需引入,就是引入咱们的RO th role,他们应该是low大师下的这个ROTHRO。
07:10
对吧,那这里啊,你这个杠点就不需要了,因为你引进来的这个RO啊,它就是一个什么呀,它就是一个函数。对吧,而且呢,你看啊,哎,对这块要注意一件事,它是怎么暴露的,它是默认暴露的module.xport对吧,那所以说咱们这里啊,那就不用再给他加小括号了。对吧?哎,这块要注意一下,那所以说咱们的回首呢,再看一下子,所以说这块呢,咱最好的啊做的方式就是什么呢?按需引入,那这样你只是引入了截流这个函数,那其他的模块呢,咱们是没有引入的,而且呢,这里呢,刚刚老师也给你们看了它的这个through头函数啊,它是默认暴露的,所以说咱们引入的时候啊,就不需要加这个大化括号。
08:01
对吧,而且呢,按需引入呢,它呢也是属于优化项目手段之一。对吧,就比如说咱们学andd的时候,像基础的时候学andd对吧,那像这些按需引入的操作啊,那这里一定要切记,也是该用上还是得用上。对吧,那所以说到这里呢,咱们呢,完成了咱们的。三级联动的节流的一个操作,那这里呢,老师呢,要多说一嘴,就这。这块呢,要注意就是rolero它的这个回调函数啊,哎,别用什么呀,别用箭头函数。可能会出现什么呀,可能出现这个上下文这次问题啊,上下文这次问题。对吧,因为咱们应该知道箭头函数和关键词function这个函数,它两者是有上下文的区别的,这里要注意一下。
我来说两句