00:00
好,那我们现在呢,就开始按照咱们上一个视频当中我们讲解的这个顺序,我们来开始编程。首先是observe函数,Observe函数呢,我们已经成功的书写完了,那么observe函数的话,它要求的是监听的对象一定是一个object,是个对象。那么我们现在呢,就可以直接呃,Observe这个OB勾了。好,那我现在只要observe OB勾的话呢,这个时候他就会去啊看就说这个OB身上呢,他就没有这个呃杠杠OB啊,所以这个时候呢,它就会去调用new,那么此时呢,这个构造器就会被执行,我是欧,我是observer构造器。构造器当中呢,会去接收咱们的这个value这个参数。
01:04
我们把它给写在这里。好,那么这个对象呢,就进来了。对象进来之后呢,这个时候呢,我们就要开始干,根据这个图啊,然后再来看。首先呢,它会产生新的实力啊,New的时候呢,就是会产生新的实力的。然后会添加杠杠OB杠杠这个属性上。所以这个时候呢,他就会去给你传进的这个value去添加杠杠OB杠杠这个属性啊,但是这个属性呢,它实际上是一个不可枚举属性。啊,就是这个属性呢,嗯,一般来说它是一个不可枚举属性。对吧,因为我们并不希望去便利这个对象的时候,能便利到这个杠杠OB杠杠。所以这个属性呢,要来的比较啊,就是奇特啊,就是所以说我们可以再去创建一个工具函数。
02:05
啊,比如说叫u.JU呢就是一个便利工具函数的意思,那么在这个工具函数当中呢,我们就可以向外暴露一个DEF方法。Expert cost,哎,然后比如说叫DF,我们等于一个函数,那么这个函数呢,它是一个对象,好,然后key,哎,然后是呃,V就是value,然后接下来呢,就是它的一个可枚举性,Innumerable,啊,Innumerable。好,那么它需要四个参数啊,就是对象KV,还有一个是它的innumerable这个东西。那么这个函数的功能是什么呢?这个函数的功能啊,就是呃,它要用object去DeFine property啊,去定义OB,勾这个对象的key属性,然后把value呢定义成你传进来的value innumerable呢定义成你传进来的innumerable,然后writeable啊,就是是否可写,是可写的,然后configuable,就是是否可以被删除,也是可以被删除的。
03:15
好,那么这个innumerable呢,我们拼错了啊,在这里改一下就OK了啊,四个参数,那这样的话,我们刚才这个构造器呢,就需要去引入U这个小文件,我们把它给引入。引入之后,那这个时候我们就重新去给这个实例身上啊,就是给实例,实例就是this啊,一定一定要注意啊,一定要注意就是构造函数中的this不是表示类本身啊,不是表示类的本身,而是表示实例啊,而是表示实力,明白吗?所以这个时候呢,就是这块要有一个这样的一个事情,所以这样的话呢,我们就可以用U啊,当然这块是呃,Import,我们要解构吧,DF啊,刚才那种方法不对,要么就是cns对吧。
04:07
好。所以说这个时候我们就需要去干一件什么事,就是DF,我们要去给谁呢?DF谁呀?对吧?哎,那这个时候我们就需要定义,那这个时候DF的就是Y6。啊,没毛病吧,哎,DFY6DFY6什么属性呢?是不是叫杠杠OB杠杠属性。然后定义成什么值呢?定义成this,然后它是false。哎,为什么这块要写this呢?这里的this大家一定要理解,表示的是实例本身。啊,那也就相当于是给实例是不是就是添加了一个杠杠OB杠杠属性,然后值呢,是这次new的这样的一个实例,就这样子的。就OK了,那这样的话,我们把这个conso.log往下放啊,咱们看一下这Y6身上有没有这个属性刷新,好,你看这个杠杠OB杠杠是不是就上来了。
05:04
哎,那有的同学就说老师我原来啊研究过VI的那个一些东西,我输出的时候呢,我确实看见过这个杠杠OB杠杠,确实就是这个杠杠,OB杠杠在这里呢,其实就是一个observer啊类的一个实例啊,这里的大写O呢,表示是它的一个类型啊,那这个时候我们实际上还是没有揭示observer类到底是干嘛的,其实我们在PPT上说过。Observer类的功能呢,是将一个正常的object转换为每个层级的属性都是响应式的object啊,所以呢,这个时候你就会发现就是。呃,老师这次讲解顺序跟大家现在能在市面上看见的文章博客什么的实际上都不一样,那么对于老师本人来说呢?啊,老师还是觉得这样子的学习顺序是最能够被初学者所接受的,就是你先去认识这个杠杠,OB杠杠。
06:04
啊,他是绑上他的一个实力,然后你再去学别的,我觉得这样的话呢,对于你的一个思维的认知,可能就不是那么的难了,好那么现在的话呢,就终于到关键的地方了,就是到底这个类要干什么,那别忘了,不要忘记初心啊,不要忘记初心,不要忘记咱们的初心,咱们observer类的目的是什么?哎,目的是就是这句话,将一个正常的object转换为每个层级的属性都是可以被侦测的object,那么这个时候呢,我们这个类,包括咱们的view底层啊,诶,他就写了一个叫work work就是走路的意思,但它实际上这里呢就是便利。啊,这里实际上就是便利的这么一个意思啊,那么这里有个work这个方法,Work这个方法干嘛呢?他就要去便利这个value对象的每一个key啊,每一个这个呃,Key,然后呢,要把每一个key都设置成DeFine react的。
07:11
对呀,为什么呀,因为你没看见吗?这个箭头是往下指的。也就是说我们的new observer当中呢,是要有一个DeFine reactive这么一个事情的。那也就是说,咱们动手写的第一行代码就是DeFine reactive,这个函数现在呢,是被observer的work方法所调用的。啊,是被他的work方法所调用的,这个地方可能你会觉得很难理解,就说老师我们不就是,呃,对吧,我们不就是首写这个函数,它不是主人吗?不能这样啊,不能先入为主啊,咱们不能先入为主,现在后入的是主。哎,然后咱们刚才写的那个东西呢,就成了一个小的辅助东西了,所以这个DeFine reactive我们就引进来,我们把它给点杠范reactive,然后我们把它给引进来呢啊。
08:08
好,我们给它引进来之后呢,这个时候这个work大家注意看啊,就是这个时候肯定需要便利它这个对象,便利它的时候可以用,呃就是呃,最简单方法就是for,然后light倒一下,这块要写个this.work value,就把这个value要往里放啊,那这个value现在是什么?很有可能就是这个对外层对象。好,那这个包括这个B啊,我们再把这个B加上。好,那这个遍历呢,那这个就很好写了,那实际上就是for light k in这个value对吧?哎,然后我要DeFine reactive,我要把这个value的这个K属性给它变成reactive的,那由于它是两个参数,所以我们在这里呢,它会有个调啊,如果是两个参数,那么这个时候他就会默认这个B包的值呢,就会去读这个K,所以就不用传它第三个参数了,也是非常非常的简单啊,就不用去传它的一个第三个参数了,所以这块呢,是一个呃,比较关键的这样的一个语句,好,那现在我们再来看,那现在的话实际上大家就知道了,就是我们这个DeFine reactive就会被工作对吧,那我们现在就可以输出一下啊,咱们来看一下他到底是引发了什么,就是我是DeFine reactive对吧,然后我把这个data,然后我把这个key啊,我都给你们输出,所以说你现在就会发现这个observer是不是就会引发一个呃,这个对象。
09:33
对吧,然后呢,还他会干嘛,是不是有个A属性是不是会进来,大家看见没有,就是这个data这个A属性就会进来,然后还有什么呢?是不是还有这个对象一个B属性啊,那为什么这个对象印出来,他这没有显示A呢?对A属性其实是有的啊,那只不过这个A属性在这里是有一个,就是呃,就是可能是被什么啊,这个这个浏反正就是浏览器这块毛病很多啊,就大家不要看这个A就没了啊,实际上他这个A是有的啊,就相当于变了一个A变成B啊,就相当于我们只把这个K啊。
10:07
给它写上,因为A属性就刚才被被添加了这些东西,然后被添加这些东西之后呢,浏览器就出了点bug啊,然后底下就不不输出了。哎,那咱们现在就看这个A和B就行。对吧,等于说是不是就是在在把这个A属性是不是在变成这个啊DeFine react的,那么通过我们这么一折腾之后呢,我们现在外层,因为我们现在还没有写递归,就是外层这个A和B就已经变成响应式的了啊,你不信的话呢,我们咱们现在就可以写一个OB勾的B加加。对吧?哎,那这样的话,我们刷新之后,你会发现这是变成11,然后呢,它也会掉,就是你试图访问OB勾的B属性。对吧,哎,是没有问题的啊,然后呃,你如果给他设置成十,它也同改变对吧?诶也会有一个这样子的一个呃响应的功能,但是呢,他再往下一层,比如说A的M,那等于十,那它这个时候实际上你看它是没有掉A的M这个属性的一个,对吧?哎,就这个属性并不是响应式的,所以这个时候呢,就需要有一个递归,但是递归呢,我们刚才实际上在这个图上我们已经看见了,就是它这个递归呢,实际上并不是由函数自己产生,函自己就是它这里呢,又会调用observer observe observe,所以这块是比较好玩的一个事情。
11:29
啊,这块是比较好玩的一个人,就他们是循环引用的一个过程。哎,循环引用的一个过程,那么在这里循环引用的话呢,我们在这里也就是说你的DeFine reactive这个东西。他就要引入observe这个函数,所以observe这个函数呢,我们又需要新建到一个文件当中啊,那你说老师你这个才开始写,怎么就突然间这么多的这个函数了,没错,这就是这个设计的精妙啊,那咱们现在就expert cost observe observe啊,就等于一个function,我们把它。
12:03
恩。哎,我们把它给这样写出来就可以了啊OK,那现在呢,两个文件要引入它,第一个呢,是咱们的index JS主文件啊,现在要去引入observe。from.observe。点JS,然后呢,刚才这两个呢,是不是就要挪给他,他去引入啊,引入一个DeFine reactive啊哎,DeFine reactive这个不用引了,就是引一个observer对吧,这是他要引,然后并且呢,DeFine reactive也要引他。啊,你没有听错,就是react现在要引他,为什么呢?因为他现在要去啊,是不是要去。观察就是要去观察你现在传进来的这个VL啊,就这个VL,我要现在需要去被observe掉,这样的话它不就能形成递归吗?所以这里头几个文件之间是一个顺序关系,就是啊什么呀,Observer会引发它,它是不是会引发它,然后它呢,是不是又引下一层又会引发它,实际上下一层呢,已经是在这个OB observer到下一层是吧,已经是子子一层了啊,然后这个子一层呢,再去到它这三个文件就这样来回引。
13:12
啊,这样形成递归的。啊,那实际上是很多同学在学习初期是没有老师把这一句话点名点破啊,然后就导致于这个同学呢,就很崩溃,就非常崩溃啊,其实这个地方他这块老师给大家点名,所以这块的话呢,我们就可以去把observe再引进来,注意不是observer,是observe。好,那这样的话,我们是不是就可以在这里再去弄吧,没问题吧,哎,那这块啊,不要忘记observe它是不是有一个必须要去是个对象对吧,所以说那这样的话就能保证我们在这里啊,你只要observe它observe v l。发现了吗?你只需要observe这个OOBL,那么我就能保证这个VL,哪怕传进来的是个常数,常数的话在这里是不是会返回安法呀,哎,所以这里呢,就非常的安全。
14:09
啊,这个大家要想一想好,然后我把它起成一个名字,这个名字呢,我们就管它叫child的OB,哎,就是说儿子那一集他的子元素啊,要进行observer observe,所以说至此呢,就形成了递归,形成了一个递归啊,当然这个递归呢,不是函数自己调用自己,哎,而是多个函数还有类啊,进行一个循环调用啊,就他们进行了一个圆圈的这样一个东西啊。还有一点就是我们在之前的视频当中呢,我们也提到过了一个关键的知识点。就是什么呢?就是我们现在这个new这个value啊在的时候。啊,这个地方呢,你千万千万千万不要忘了啊,这块的话还需要有一个重要的事情,对,就是当我这new value是被设置出来之后,你这个时候是不是就要去observe这个new value,然后同时呢,你的这个child OB呢,就要成为它这个是非常好非常理解的啊,哎,就当我们当设置了。
15:18
呃,设置了新值啊,那么这个新值呢,也要被observe,哎,就OK了。所以他这样呢,就变成了这样的一个情况,那这变成这样的一个情况之后呢,咱们现在看看现在有没有错啊,现在就已经啊有点报错了,因为他这个observe是不是没有没有没有写对呀,Expert cost啊default对吧,哎,应该是expert default啊。好,刷新这回好了,哎,那你有没有发现,那你有没有发现这里已经开始进行循环的了,对吧,N和B有没有发现,M和NB是不是都有了。对吧?哎,对,然后你看我这里是不是OB勾的A的M的十,它是不是就试图访问M属性,当然不是OB勾的M属性,就是你试图访问某一个M属性。
16:08
对吧,哎,所以我们就别OB勾了啊,咱这里把这个注释就去掉,你试图访问M属性。发现了吗?他就循环引用了啊,他就在这里就形成了一个循环的一个一个引用啊,就现在不管你这个对象有多少层。啊,不管你对象有多少层,比如说我现在这个再来个CE对吧,Ice又是一个对象啊,对象里头有个de,里头有个里头有个F啊等于666。好,那这个时候呢,我们现在比如说你看我现在只需要observe OB勾,就这一句话,它就能循环监测。啊,它就能循环检测,然后我再输出OBGO的C里的D里的E里的F,你看它就会说你试图访问F属性。对吧,并且你也试图访问CDEF了啊,然后你上面的这个啊,你会发现呢,这里确实是在递归,就是observer构造器会创建好多次发现了吗?哎,然后DeFine react呢,后边就会有很多。
17:07
啊,是这样子的啊,可能有的同学到现在还是会懵啊,有的小伙伴,所以呃,如果听懂同学呢,咱们可以直接看下一个视频了啊,如果没有听懂同学呢,咱们现在老师再给大家盘一下这个逻辑,这个逻辑呢,其实就是我们现在就是一上来啊,这一个对象被OB observe,然后这个对象被OB observe之后呢,到这里之后,这个大对象在这里会被判定为他身上没有杠杠,OB杠杠,所以他就会拗啊,拗了时候呢,这个时候呢,它就会调用这个work,当然这个O刚刚OB刚刚就把它自己写在身上了,然后调用work之后呢,它就会变成它的子属性def DeFine direct,所以说一上来的话,你这个大对象它就会变利ABC,就把ABC3个属性呢变成响应式的了。对吧,好,那么那么MNDEF这些子属性是什么时候便利的呢?就更深奇的呢,是这个DeFine react当中做的。
18:07
呃,范reactive这里头呢,你就会发现在这里面是不是就会很神奇,就是因为什么,因为这个时候你传进来的这个VL已经是他的子属性的值了,因为我们第三个参数如果不传,默认就是data的key,这个时候就已经能够得到这个地方,这个画红圈的和这个画红圈的,以及这个和这个都都能得到了。然后我们就给它设置啊为child的OB啊,当然这个child OB,现在如果说你不给他啊存值这个这个也没关系,因为他没用,但是后边咱们会有用,所以就先给他起个名字叫child OB,哎,然后呢,呃,我们再有新值的时候再观察,那为什么新值要观察,因为我防止给他新值又是一个对象。能明白吗?我给他心智又复制成一个对象,比如说复制成别的对象,那这个对象咱们现在是不是也要被观察,这大家能理解吗?就又是一个对象对吧?哎,所以他是这样子的,那么咱们不考虑这个心智对象,就是这一句话就很厉害,你是不是就开始observe了,所以就开始递归了,就是他到他它到它它到它它它它那一哆来咪哆来咪哆来咪,哎就循环递归了啊那这个时候呢,你千万不要小看我们现在学到的这些知识啊,千万不要小看,因为到目前为止呢,大家就要是嗯,要开始会写了。
19:27
啊,你就已经要有这样的一个代码的编程的手感了啊,然后才能。认真的再去学后边的东西啊,就是现在这些东西你先要会啊,好,大家可以试着去写一写。
我来说两句