00:00
呃,下边的这个就是关于手写组合API了,当然咱们这里边主要是实现的是这些API的一个节时操作界面更新的操作呢,咱们就没有去实现了啊,这里边有这么几个啊,呃,Shallow以及还有这个shalllo ref与ref,还有shallow only与only,还有这几个is ref is以及is read only啊,咱们把这些组合A片呢给它实现一下,当然咱们是通过自己的方式去实现的啊,我再强调一下啊,咱们实现这些组合API的时候。咱们是自己手写的方式,而且呢,咱们只实现了里边的劫持操作,并没有去实现里的更新界面操作,因为更新界面操作还是比较麻烦的,恐怕要有很多很多的时间去搞定啊,行,咱们重点关注的也就是劫持,将来面试的时候呢,说的也是劫持部分的内容。那现在呢,我们打开这个Vs code啊。在这个里边,我就暂且先把它关掉了,然后把这个文件呢给它保存一下。里边新建一个目录吧,这个就是第19个杠啊,响应式数据判断的相关方法。
01:11
之后把它丢进来,OK。关掉啊。现在呢,我们在里边再新建一个目录,这个是20杠手写组合API,那里边呢,咱们就简单一点,直接来一个文件index点儿GS吧。好,再来一个。文件index.html啊,这里边是HTML。SQ标签点杠index.gs。我们所所有手写的这个组合API都在这里边去写啊好,那么我们先来看第一个吧。就是lo以及。沙与relative啊,那么我们要去手写它们俩的话,首先要清楚啊,它俩都是什么意思呀?啊,第一个我们可以认为是一个什么呢?浅的解释,或者说浅的监视。
02:08
嗯,这都行,或者说浅的响应数据。那后边这个就应该是深的,我就简写了啊,好,那么我们再去手写这些API的时候呢,稍微简单一点,就什么呢,先做简单的,然后再去做这个复杂的啊好,那么我们就从第一个开始吧,那这个shall的方式,它呢应该是一个函数或者说组合API当中的一个嘛,我们要把它手写了,那我应该从哪入手呢?首先就是定义一个halo shallow。函数啊,那当然了,我们将来去调用这个组合API的时候,它里边可以传入一个对象嘛,对不对,然后我们对于这个对象做一个浅的监视操作,所以说呢,内部需要传入一个目标对象,哎,怎么做呢?Function,然后就是shall。
03:09
Relative。哎,括号里边应该给我传入一个目标对象,他给他好传入的这个对象,我要去看一看当前的这个数据啊,我们是认为它传入的是一个目标对象,但是保不准将来别人调这个函数的时候,传的是一个普通数据呢,对不对,所以说我们在这个位置最好做一个什么呢?判断啊,判断什么,判断当前的目标对象是不是这个object类型的。当然啊,我们所说的这个里边的问题也主要考虑到啥呢?就是说当前这个数据它是不是一个数组问题,数组它也是对象啊,所以说啊,那一般情况我们是在这个位置来一个对象,还有一个什么呢?数组将来我们都需要考虑的啊。如果说。如果传入的这个数据啊,是基本类型的数据,或者说除了对象和数组以外,那么就干嘛呢,直接返回,哎,所以说我这块就直接return什么呢?Target这就可以了。
04:11
我们要考虑的重点内容就是当前这个对象,或者说当前这个target它是不是一个对象,怎么判断呢?首先你这个数据的存在呀,对不对?并且我可以通过type of的方式找到这个target,它属不属于这个object类型。如果是这个样的话,最终大家想,无论是沙还是它返回来的都是一个代理对象,所以说我在这块return,直接来一个new proxy。那process当中我们需要传入什么呢?他给的这个对象,同时后边应该有一个handler的处理器,处理器当中有什么get呀,Set呀,Delete啊等等一些操作,哎,那我这块需要有一个对象,那我这么写rev什么呢?Handler,哎。那我现在需要这么一个对象,所以说我需要定义一个什么呢?嗯,H n DR handle了处理器对象啊,当然了,我在这块给它用这个名字,那所以说应该来一个count,它等于这么一个对象里边就应该有get方法,还应该有set方法。
05:10
它应该有de delete property方法啊,那这个呢是干嘛的呢,它是获取数据,获取属性值,那下一个应该是修改或者是添加属性。对吧,哎,修改属性值或者是添加属性,那这一个呢,我们应该说的是删除啊。某个属性,那当然了,它里边应该有对应的参数,一个是对象,一个是它的属性,那这一个也是tr GT prop,还应该有什么呢?Value,因为我要去设置值嘛,那这一个应该是删除target,它有一个prop。好,那在这里边还记不记得调用的是什么呢?如果说我们在这里边返回来的是一个代理对象,代理对象内部需要配合,呃,那个reflect啊,反射对象调用相关的方法,对吧?哎,所以说我来一个count result等于谁呢?
06:12
reflect.get方法,Get方法当中传的参数和上面的参数是一样的,当然呢,我们可以在这个位置来说出句话了,Cano.log拦截了什么?拦截了读取数据对不对?当然呢,我们可以把当前这个属性给它显示出来,包括它的结果也显示出来。然后最终呢,来一个return,好,那这个get呢,咱们就写完了,那再比如说这个set set也是同样的道理啊,给that等于reflect,然后点S方法,内部传的参数跟上面的参数都是一样的。啊,最终不要忘了来一个return result,同时我在这个位置也是显示一句话啊,那这个拦截的是什么呢?拦截了修改数据或者是添加属性。
07:00
当然我在这里边直接把proper显示出来啊,如果愿意的情况下呢,我们可以再把这个Y6显示出来。好,下一个是删除啊,这比较简单啊,也是来一个result,等于通过reflect反射对象,调它的delete property这么一个方法,然后里边传入target以及当前要删除的属性。啊,然后呢,我们可以再cancel.log再来一个啊,这个是什么呢?拦截了删除数据啊,当然我们可以把当前的这个属性呢,给它打印出来,最终返回result啊。那么这样呢,我们就快速的写了一个什么呢?呃,Shallow的这么一个函数啊。当然呢啊,除了它以外,咱们直接把这个relative也给它写上啊。还有一个是什么呢?那我们就再定义一个R的函数,它也需要传入一个目标对象,其实跟我们上面这个写法几乎是类似的,所以说直接复制过来就可以了,但是我们要改名字。
08:01
Re,对不对?好,当然这里边稍微麻烦那么一点点,麻烦在哪了呢?如果是。Shallow的话,它是属于浅的监视,或者说浅的结持,或者说浅的响应式数据,但如果是relative的话,那它就是深的,对不对?深的坚是深的劫持,或者说深的响示数据,所以说要是这种情况的话,我们需要再做点其他的事情啊,应该在这。当我判断传入进来的这个数据是不是对象或者是数组的时候,这个时候我们需要做点事情,做点什么事情呢?我们要对数组或者是对象中所有的这个数据进行什么呢?Re的递归处理,因为对象里边可能还会有对象,数组里边还会有对象,对象里边还会有数组,对不对?所以说每一层都应该有一个代理对象,所以说这个位置我们要进行递归操作,那我们要做的事情无非就是先判断,先判断当前的数据是不是数组。
09:09
还有再次判断,或者说再判断当前的数据是不是对象,因为数组和对象操作方式不一样嘛,所以说来一个if。啊,那A里边写什么呢?我看array点啊,我们来看这个东西,Ara我得先看看当前的这个目标的对象,或者目标的数据,它是不是一个数组。哎,那我再来一个什么呢?Else,当然了,我下边这个注释就可以放到上面来了。格式化一下啊好。那么如果是数组,我需要做什么事情呢?那我是不是应该把数组当中的数据做一个循环便利的操作?如果数组里边的某一个数据还是对象或数组的话,那我是不是就应该进行递归操作了吧?所以说这个位置应该是他给点FOR1数组进行循环遍历。里边的每一项和里边的所以拿出来。
10:03
那做的事情是什么呢?我要看看我当前的出入主里边这个索引位置的数据啊。我就把这个什么呢item给他。这个位置注意啊,我数组索引,根据索引啊,找到数组里边某个元素的数据,我把当前这个数据再给这个数组,当然啊,暂且先这么写,暂先这么写,注意啊,我下边这个对象也是同样的道理,如果是对象我也要进行遍历啊,这个是数组的数据,要进行遍历操作,那同样的对象的数据也要进行便利的操作。哎,然后呢,我们来看对象怎么变利呢,我们可以通过object.t这么一个方法,把当前的它给它丢进去,这样呢,它就可以变成数组了,可以for each了,那里边的每一个数据啊都拿出来了,K就是每一个数据。那么target key可以得到当前的这个数据啊。
11:01
当前这个数据就等于什么呢?等于当前的这个target p啊,当然啊,注意此时现在这个位置代码和这个位置代码是有问题的,那就相当于说先说数组这个啊,数组里边索引位置的这个数据给了当前索引位置的这个数据,这什么意思呢?比如说有个AR中括号零。啊,等于什么呢?100就是说所以为零的这个数据,如果是100的话,我把100又重新给了零,这没有问题,但是我们要考虑到当前这个数据,这100这个数据有可能还是对象或者是数组,那我是不是应该在的方式进行处理,看看里边数据是基本类型的数据还是对象或者是数组对不对,所以说按照这种方式的理解的话,这个位置无非就是。通过CT。啊,然后呢,括号把item丢进去。大家看一下。把索引对应位置的元素的数据拿出来进行再次进行的处理,看看当前这个数据是不是对象或数组对不对,依次往下递归进行操作,那同样的像对象的这个位置的话,我是不是也应该进行relative的处理外。
12:08
啊,这样一改,咱们这个relative的函数呢,就写完了啊,那写完之后,下一步咱们要做的事情是什么呢?再测试一把,好保存,那我在这里边怎么去做测试呢?比如说我们先来第一个啊。呃,那我在这个位置,你直接来1PRO X y user1啊,等于我用什么呢啊沙。哎,沙里边传入一个对象,对象里边,比如说我给他一个name啊,这个叫什么呢,小明。然后呢,我再给他来一个什么呢?呃,来一个这个呃,Car吧。CR也给他来一个对象,Color里边我给他来一个color color给他来一个red,好,那我通过shall的方式创建了一个对象,创建一个对象之后呢,我们来看看,当我在这个位置proxy user.name的时候啊,加等于,比如说我们等于吧,等于小红,我们来看一看啊,这个数据有没有被拦截,Out,加B。
13:12
找到检查,然后我们看一下cancel,大家看一下拦截到了修改数据或者是添加属性的数据,因为我当前就是属于什么呢?修改操作嘛,对不对?好,那这个位置是拦截到了什么呢?写的数据啊,那如果我这个位置写个加,等于我这块就写个等等啊。再保存一下。大家再看一下,我刷新看拦截到了读取,也拦截到了修改啊,那现在就拦截到了读和写的这个数据了是不是。那我把这个呢注释掉,那我再来看一看,如果说我用proxy use点里边的这个color,我给它写个加等于。我们再来看一下。这个能不能连接上。拦截到了什么呢?读取数据。但是有没有拦截到写呢?没有拦截不到写啊,拦截到了读取数据逗号,但是拦截不到什么的写的数据,因为他要先获取嘛,获取完之后再去干嘛,再去这个修改嘛,哎,所以说到了这,我们确实可以看得出来,当前这个应该是属于浅的啊响应是不是或者说浅的劫持。
14:21
好潜择拦截,那我把这个呢再注释掉,比如说现在我去删除delete proxy user1里边的这个什么呢?Name我们看看能不能拦截到。刷新一下,我们来看一下拦截到了删除数据啊,拦截到了删除数据这是没有问题的,拦截到了删除数据,好,我把这个助教注意,我再做一件事情,我来一个delete delete什么呢?Proxy you.car里边的这个color,我把它给删掉。然后呢,我们再来看一下刷新,一刷新,我们来看一下拦截到了读取数据,但是拦截不到,这个深入的删除是不是好。这个里边啊,指指什么呢?拦截到了毒,但是拦截不到删除,哎,所以说这确实是一个浅的劫持啊好,那这个什么呢?沙这块咱们就演示完了,接下来呢,我把它再复制一份。
15:19
我们再来看看啊。这块呢就变成二,再来看看干嘛呢,看看的方式,这个位置换成re的方式,我们把上面这个操作还是都拿过来啊,来看一下。啊,当然这里边儿这个注释呢,我们就先干掉不要了。还有这里边儿的一,我们把它换成二。这个是二,这个是二,好,我们先来看第一个格式化一下啊。然后此时打开界面刷新,我们看拦截到了读取数据,这没有问题,拦截到了修改数据,这两个是不是都拦截上了吧。好。拦截到了读和。
16:02
如何修改的这个数据?格式画一下啊,这个位置把它向右边走一下,好,我们再来看看下一个。保存一下啊,注意我这个是等于吧,我们用等于等于啊。然后我们就刷新,大家来看一下是不是也拦截到了这个读取数据和这个修改数据吧,是吧,啊,也拦截到了啊,这个拦截到了读和修改的数据,说明这个是深的吧,深的劫持啊,它干掉好我们再来测试一下这个删除。然后打开界面再刷新,大家看拦截到了删除数据没有问题,重点就是我们要看看下一个,如果我把下边这个啊,这是拦截了啊,拦截了删除好把下边这个打开啊,上面这个助教我们要看一看我下边这个它能不能拦截到。打开界面刷新一刷新,我们看一下拦截到了读,拦截到了删除啊,说明也是拦截到了啊,拦截到了读和拦截到了什么呢?身处哎,那说明咱们这个确实是深的什么呢?深的结石,深的响应啊。
17:07
好深的显视,OK,那刚刚呢,咱们是手写了什么呢?Shallow active以及active这的啊,折叠一下,折叠一下这两个啊,上面这个我也把它折叠好。这个手写shall和呢,咱们就先说到这里。
我来说两句