00:00
这个呢叫customer I EF,那customer自定义自定义的if,这是给我们写的啊,我们可以去看一下之前的这个文档啊,官方的文档组合API的文档,嗯,在这边去找找卡,If这玩意是用于自定义if的,可以显示的控制依赖最踪和触发响应,什么意思呢?就是说它这个卡当中啊,可以传入一个回调,这个回调里边接收两个参数,第一个参数是告诉view去追踪数据,第二参数是trigger触发的意思,告诉view应该更新界面了啊,然后咱们可以通过它做一个防抖的这么一个效果啊。嗯,我们先来这样,先把之前讲的这个代码还是保存一下啊,然后我们来做一下这个小例子。嗯,16。然后这个是to rf的事。好,把这个和这个复制一下。放到这里边来啊。OK。然后呢,这个东西我就不要了,删掉。还有APP当中代码呢,我现在也把它改了啊。
01:02
等于三。简单一点。H2CU卡ref的使用。好,然后在这个里边的话,逗号来一个setup。我先把基本的代码给它垒出来啊,垒出来之后给大家去看个东西啊,比如说我。L吧,等于,呃,这个keyword吧,Keyword wordd啊,等于ref。里边我就随便写个ABC。之后呢,再把它扔出来。Keyword。WW。保存一下我放到这啊,放到这儿之后呢,现在我要在页面里边去展示一下啊,来一个input标签。嗯,V-model吧,等于双引号里边是keyword斜线,再来一对P标签,P标签中间显示这个关键字啊,我保存一下啊,大家先看一下这个效果是什么样子的。好,这边刷新。
02:01
啊,很明显这有个文本框,文本框里边输入内容,下边的数据会跟着变化,这个我们都知道,V钢model都它的这个能力嘛,双向数据绑定嘛,是吧,现在呢,我想做一件这样的事儿,就是当我在这输入,比如说来个一的时候,是文本框的内容,输入个一之后,过了一会儿下边才显示ABCE这么一个效果,那就是做一个防堵的效果啊,那么我们可以通过卡的方式去实现,那怎么做呢啊。这个位置就不是IEF对线了,我直接来一个count keyword。然后等于什么呢?柚子吧,呃,我给它起个名字,比如说叫柚子boun de rf括号。然后里边我给他传个数据,比如说是ABC,那后边呢,我再给大来一个时间防抖嘛,防抖需要有一个时间嘛,那这个时间的话,我比如说给一个500,那现在需要我自己定一个H。啊啊,自定义OK啊,防抖的函数好,该怎么做啊?来上一个方式之后呢,把这个名字拿过来。
03:02
括号括号。那将来呢,我我现在这个位置传是字串啊,那大家想将来我是不是可以传数字啊,等等等其他的数据吧,所以说我在这儿啊,我直接就给一个泛型。然后并且给一个Y6也是T类型的,那后边应该有一个de LA,这就有个时间吧,那我传500是500毫秒,我如果不传500的话,默认我给他来一个200毫秒啊,所以说暂时啊,先说明一下这个参数Y。啊。传入的这个数据,那将来将来数据的类型。不确定啊,逗号啊,所以用什么用泛型呗,泛型那么Le LA它是这个什么呢?防抖的这个间隔时间。间隔时间。这个默认呢是什么呢?200毫秒。这块咱们就搞定了啊,那我这个里边该做什么事情呢?哎,其实我们就返回什么呢,返回这么一个对象就行,而且它返回来的是一个什么呢?啊RF的对象,所以说我这块啊,就直接return弄出一个对象。
04:07
在这个对象当中,咱们需要做什么事情啊,首先来讲。要是想做防抖,里边应该有定时器啊,所以说我们先去准备啊,准备一个存储定时器的这个ID的变量啊,那我这块就来一个,比如说time after,嗯,来一个ID吧,Timeout ID。好,它应该是一个数字类型对不对,好先放在这儿啊。啊,这个为什么报错了。啊,因为暂时还没有去给他设置其他的东西啊,我先在这个位置给它来一个let啊,应该加个let就好了啊数字类型了,好我return对象,我return什么对象,我特呢,应该是一个ref的对象,那我如果要特它,那就是一个普通对象嘛,所以说这个位置。我们用的是CU customer。哎,Customer ref它的这个呃,组合API啊,嗯,它反过来的就是一个什么呢?Ref的对象,所以说呢,我去调用它,但是调用它根据官方的文档来告诉我们啊,说什么呢,说这个函数当中怎么的可以传入一个回调啊,一个是track,一个是trigger。
05:13
我把他们俩拿过来啊。不写了。好,这个里边有两个它,但是呢,有它之后,这里边儿得需要返回一个对象,这个对象被卡ref包裹之后,变成了一个什么呢?Ref对象,那这里边我们还得需要写get。啊,还有什么。那要注意了啊。Get干嘛的返回数据?哎,那set应该是设置数据的。嗯,好。那这里边儿具体该怎么做呢?如果要是get返回数据,那我无非就是把当前这个value流数据给它返回呗,对不对?同时我们需要做一件事情,应该告诉没有,应该给我追踪追踪数据去啊。怎么告诉view去追踪数据呢,因为你要拿数据嘛,是吧,好,我怎么去告诉view把这个数据找到呢,然后并且反过来呢,好。
06:07
那这块呢,咱们就写完。那如果说我要是设置数据注意了,如果说我们要是设置数据这块可能稍微不一样一点啊,设置数据的时候,你应该先告诉我。你最新的数据是什么是吧,并且它应该也是一个T类型的。好在这里边注意啊,设置新数据就是什么呢,这。当我在这里边输入数据的时候,应该是过了一会儿下边才会有这种效果,这是防抖的效果嘛,是吧,所以说我们应该开启一个什么定型器。开启定时器,那就来一个set time out,诶,这么写啊,Set time out。算了,还是自己一点一点手写吧啊。来一个回调,那回调的后边应该给他一个时间啊,那我就用它了,因为这个时间呢,我已经传进来了是吧?好,那这里边呢,哎,这里边做什么事情呢,好注意。如果说这有一个定时器,将来这个定时器我是要清理掉的,当你一设置这个数据的时候,我就应该把定时器清理掉,所以说第一步这块应该是清理定时器啊,直接来一个clear timeout。
07:09
把上边的timeout的ID放进来,那timeout的ID应该有值啊,这样不就有值了吗?对不对,好,那紧接着。这是我的新数据,新数据应该给谁呢?应该给我的value流。啊,New value,这样就把新数据给了这个value了。对不对,好,那给了Y流之后呢,还应该告诉当前的这个,诶不是高度是告诉什么呢?诶。告诉这个view给我更新界面,因为我的新数据已经变化了,是吧,新数据已经来了,那我应该界面干嘛更新了,所以说这块应该有个trigger调用,这就是告诉这个view给我更新界面。然后呢,现在我们再来看一下有没有什么问题啊。打开当前的界面,刷新一下。检查。再来看一下啊,我里边ABC。
08:01
345看我输这么多,然后很慢才过来是不是啊,当我去删掉。它会很慢的删掉,这个就是通过customer if返回来的,是自定义的if对象啊,然后实现的在这个是什么防抖的效果啊,当然了,如果说你不想要这个效果,那我们很简单了,直接在哪,直接在我的。啊,这上面这个位置,把上面这个打开就可以了啊,但是咱们主要是讲讲这个customer if啊,当然了,这个track和这个trigger的话,这两个啊,就得需要大家自己去研究一下,它内部到底是怎么回事啊,咱们这块仅仅是用了一下而已啊行,那我把当前的这个文件的保存一下。这是第17个杠。啊,CF的使用。然后把这个文件啊。保存一下。那么紧接着这个ABB的代码呢,咱们也不要了,ABB直接来个三。那我这块来一个HR。
09:00
测试好保存这块呢,咱们就先说到这儿啊。
我来说两句