00:00
哎,说老师那明白了,这VIEW3的实现这个响应式啊,就是这么回事,就是借助了一个pro呗,啊说老师我出去啊,我就这么跟人说了,不对呀,差点意思,差哪儿呢,各位来啊,我把这块圈起来。我把这儿也圈起来,我把这儿呢也圈起来,请问这三个绿色框在干什么?毫无疑问,这三个绿色框在真正的去修改原数据person对吧?哎,这target指的不就是那person吗?对不?各位哎,在真正的操作原数据我们写呀,是直接这么写的,确实也实现效果了,但是我告诉你VIEW3底层可不是这么写的,他可不是像咱写的这么low是吧?直接找到那对象完了就怎么着是吧?把这就读出来了,直接找到那个怎么着就把它改了,直接找到那个怎么着就把它删了,不是的,哎,那怎么做的呢?来各位要么就别说,说了呢,咱就说的详细一点,来,我先把这一堆给它住掉,接下来给大家隆重的介绍一个人,谁呢?我先准备点数据啊各位,哎呀,这个烦人的家伙又展开了,是不是把这个呢复制一下折叠在这呢?写一个region and region,好,给它折叠起来,在这呢,我准备一个人,谁呢?Obj,它身上呢,有一个A是一,有一个B是二,好了,接下来呢,给大家出一道题。
01:21
哈,就是我想读取OJ身上的A,我怎么读啊,来打开。哎,说老师啊,你这话问的这有点侮辱我的智商是吧?OBJ是个对象,里面有A,里面有B,你想读AOBj.a是吧?老师再问就打你了啊,确实这么可以读取,但是你还有另外一种方式可以读取,借助谁呢?那就是借助window身上的另外的一个内置对象,它的名字叫做reflect啊ECT reflect不叫,叫reflect这个词什么意思呢?哎,这个词有反射的意思,哎,什么意思呢?想想啊,你面前是一堵墙啊,然后你蓄力啊,踢了一个这个足球弹到了墙上,反射到另外一个位置,哎,这叫做反射,哎,也是ES6里面的一个新东西啊,放在了这个window身上,老师,这玩意有什么用啊?啊,这玩意有点用啊,来,咱写一下啊,Reflect同学,刚才我是不是想读取obj里的A呀?哎,你可以这么读,Reflect点,你不想读吗?哎,要get get啥意思,得到吗?你想从哪个对象身上得到东西啊,OBJ。
02:27
你想得到哪个属性啊?我想得到A属性,嗯,是不一,哎,reflect.get,从对象里面读数据,哎,说老师,那我想改数据怎么办呀?OBJ里边有A吧,我想让你把这A呀改成100,最简单的OBj.a等于100是不是各位啊,写完了。哎,还有另外一种方式就是reflect点,然后我是不想改,叫做点set,改哪个对象OBJ啊改它的哪个属性A属性改成多少,666回车改完了说老师真改了吗?你看吧,改没改。
03:03
哎,刚才测试的是读,现在测试的是改,哎舒老师,那你说如果我要想删呢,哎,那简单OBJ对吧?那如果我直接想删,我就不说了,各位肯定是delete OBg.a是不是,那在这呢,直接说这个reflect怎么删,那同学让你设计,你说当然有一个,哎叫做delete property,同学不叫delete啊,Delete是一个已经被占用的关键字了,人家叫delete property删除属性从哪个对象里删除啊,OBJ删除哪个属性啊啊名字叫做AOK,删完了OBJ看一眼是不是删了,然后现在你就发现了,各位就是说你对这个对象的增删改查的一些操作啊,除了OBJ点这种方式是不是也可以借助这个东西啊,但是就目前我讲到这儿啊,同学们,你们有没有一个感觉,就这人呢,他只有病到了一定程度啊,这程序员的脑袋里出现了一定的问题,他才会用这种方式咋的删除一个对象里的属性,他才会用刚才那种方式reflect.site去修改啊,同理他才会用刚才那个。
04:03
reflect.get去得到,也就是说各位你说明明很简单点事儿啊,OBj.a完了,读完了,哎,非得reflect.get是不是,哎,然后呢,我要从这个OBBJ身上读东西,读的是A同学,你烦不烦呢是不?所以说这么来看,你觉不觉得这个reflect怎么说呢,它有点没什么太大存在的意义是吧?哎,但是同学啊,我说一下你对一个属性的基本操作呀,你体现不出来它的威力啊,我直接告诉大家啊,就是目前呢,这个ecma啊,就这个脚本语言的这个规范的这个组织啊,正在尝试着把object身上很多有用的API啊,都移植到这个身上。那尝试正在移址,你就比如说我给你说一个各位object的身上,咱刚才是不是用过一个property,哎,那我就直接告诉你身上也有。
05:00
啊,来咱试试啊各位,比如说这不有OBBJ吗?现在我想通过那个property去给OBBJ追加一个C,那咋写?老师那就object点,诶换了换了别object点了,那咱先写写啊,Object点得翻property走,给谁追加,给他追加什么是C,哎,是C,好,这里写get啊同学我就不写那了,我不考虑修改,就是简单测试一下,我就写一个get啊,你只要访问这C,我就把100给你啊,或者把三给你吧,嗯,可以吧,各位啊,那看一下效果呗,哎,回这刷新一波OBJ走,有A有B,有没有C,有的啊老师这玩意是吧,写完了,那你说我再写一遍呢呀,说你再写一遍,那你这改成四,老师你再写一遍的意思就是后边把前边覆盖了呗,是这意思吗?啊,我们来测试一下,诶同学你看出事儿了,代码执行不了了,就是整个代码都挂掉了,你下边再有代码。
06:00
啊,同学,没有用,你看没有用,单线程挂掉了,抛出异常了啊,读一读咋的不能够,DeFine是不是有定义的意思?那么rede DeFine什么意思?重复定义,不能重复定义一个属性什么玩意C,那也就意味着各位如果我通过object身上的这个DeFine property去追加属性的时候,容易出现什么呢?我要重名了,整个整个东西全都挂掉,代码不能运行了,是不但如果说你通过的不是它,各位,哎,通过的是谁呢?瞧着reflect身上,刚才咱说了是吧,Ecma呢,正在尝试把很多东西往上移,那其中有一个就是得翻property同学,你要这么写啊,那你看看效果,我就懒得写了,直接复制了是吧,因为就差一词嘛,哎,把这个给它改成reflect,嗯,在这呢回车这呢也是reflect OK,同学你看我同样是犯错误的代码,你都放了一个C了,你怎么还能再定义一个C呢?那你看一下效果啊,刷新各位,他不报错代码还能走下去,说老师那OBJ身上的那个C。
07:00
一那你看一眼呗,其实还是以之前你写这为主,说老师啊,那你这不开玩笑呢吗?我错误的代码按照这么写,他会让代码挂掉,控制台给我一个明晃晃的红色的提示,结果呢,还按照你这种写法,我都已经犯错了,他在那儿憋着不吱声,不告诉我,哎呀,我的天呐,说老师,我还以为我代码那没啥问题呢,结果一运行啊,这嘎都输出,结果我一找,哎哟呵,OJ身上那C咋的是吧,我写着写着我写飘了,我以为这段代码也能执行呢,我不知道我之前写过这个了,那不。那不诱导我犯错误吗?对吧?哎,同学,其实呢,不是我跟各位讲啊,这个身上的property是有返回值的,你看着这叫X1,诶,我给你输出X1。啊,那这呢是X2,诶我给你输出啊。X2 OK,看一下效果啊,各位在这儿回撤刷新,哎,车代表啥意思成了。
08:04
False代表啥意思,没成,哎,所以说同学你看他不是说把这个问题给憋住了,他通过返回值的形式告诉你我成了还是没成,那这个时候可能还有同学说,老师你这有个卵用,你你这东西你整完了,我是通过返回值了能咋的呀?老师我还是觉得这个行,同学那你听我说呀,就我们直接操作OBJ,我真得承认这么操作挺香的,有错误,其实就抛出了,但是对于封装框架来说,这种情况它很恐怖。为啥恐怖,你不好捕获错误,说老师那这块如果犯错了,我得怎么办?哥们儿,你没招,你就得拿这个写揣catch,大家还嫉妒,哎,就把可能出现错误的代码放在这儿,一旦出现错误了,我在这打一个consolo,然后呢,输出这个什么呢?错误对象你这样写什么意思呢?如果他在这儿犯错误了,各位直接停下来,把这异常抛出,然后接下来这段代码依然能走明白不?哎,就是同学你得让你这个封装的框架健壮一点,不能说人家稍微写错一点东西,啥都没有了,GS单线程不行,你得去捕获这个错误,所以说同学你要是用这个object.property你看我跟你讲,你就麻烦去吧,你这你就发现在底层源码里,哎,我的一堆一堆的全都是,是我知道走下来了,是我知道把这个问题抛出了,那我就想问一下您这些麻不麻烦是不?哎,有的时候甚至我们都不关心你到底是哪错了,我就想知道这代码能不能走下去,那你说用这种方式你多恶心,朱老师能用这种方式呢,哼。
09:38
这种方式你瞧吧,我把它解开,如果我想说它成了,再往下走,那你说我可不可以这样,我在这直接来一个if判断就得了,如果X2是成的,那我在这咋的,我再输出一点别的呗,哎,就比如说,哎,在这写上叫做某某某操作咋的成功了,这不就完事了吗?是不?哎,那如果没有进入这个if,我再写一个else,那在这我就直接来一句叫某某某操作怎么的了,哎,叫做失败了是不就得了,然后这些代码呢,不受影响正常走呗,瞧一下,你看对于框架封装来说,同学用谁相对来说能更友好一点呢?就是reflect OK,哎,你看我说了这么长时间,只有一个目的,各位,就是让你觉得这个reflect咋的还是有点作用的啊,那我们把这些呢给它主掉,那么梳理一下这代码啊,各位在这呢,写一个叫做通过object啊这个东西,然后呢去操作,那把这个呢,给它复制在。
10:38
这呢,给它折叠起来,又不让折叠了是吧?老套路走着region在这儿走着,And region a井号啊end好了,把这个呢给它折叠起来,把这堆呢给它复制,哎,这个呢,就是通过reflect反射对象,哎,他身上的这个property去操作,就相对来说吧,能够更友好一点,同学也没有必要把这东西吹的多么多么的厉害啊,就是相对来说不用写那么多的这个try cash了,OK啊,别说的神乎其神的,也就那么个意思啊。那所以说同学回到这儿吧,来打开VI3中的这个响应式,人家是怎么玩的呀?想读取对吗?哎,那怎么读取啊?Reflect点咋的?Get从哪得到东西target得到哪个属性problem OK,搞定,那这是什么意思啊?是不是想修改啊?那怎么修改呢?Reflect,点刚才你看到了叫做site修改谁啊,哎,修改这target修改哪个东西啊修改。
11:38
这个属性值呢,Y6 OK,各位,那这块怎么办啊,想删除吗?啊,那在这写一个reflect的点,叫做delete property,删除谁身上的,他身上的哪个属性啊。这个属性复制走,这不就完了吗?这才是VI3里面那个真正实现的一个简单的雏形。OK,各位哎,用到了什么呢?Prox代理对象,同时也用到了什么呢?Reflect反射对象,一个代理一个反射,是一个对立的概念。OK,好,来,我们看一下效果啊,刷新一波,看这玩意能不能行啊,这个conlo给它注掉吧,这个啊,给它注掉好,回到这刷新一波啊,Personer长这个模样,p.name等于例四能不能改啊,可以改,并且是响应式的是不是?哎,剩下那些也都可以操作,我就不带带着大家验证了。来,回到笔记里面,我们总结一波各位VIEW3的响应式原理,就是通过prox去代理拦截你对对象中任意一个属性的任意的一种变化,包括属性值的读写以及添加,以及删除等等操作,那么通过这个reflect的反射对象,哎,然后呢,就对被代理的对象,被代理的对象是谁呀,哎呀同学其实。
12:53
啊,就用这词吧,叫做源头,哎,叫做对源对象的属性进行操作啊,那MDN的这个文档啊,也给大家甩在这了,一个是pro,一个是reflect,大家如果感兴趣的话呢,自己也可以去看一下,OK啊,那么精简点说呢,就是在这是吧,各位好了,那这小件停。
我来说两句