00:00
好,我们继续来手写这个ast的代码啊,我们现在呢,要进行的一个挑战就是要识别actres,我们刚才做的所有的努力呢,实际上它是没有这个actress的啊,如果我在这里加上IRS的话呢,那啊就是比如说要加个class class,比如说等于box。啊,那这个时候呢,他就是很灾难,他就会认为这个标签呢,是没有封闭的。叫安迪范的标签没有封闭啊,我们看一下,嗯,他这。为什么会报anti哦,因为他已经谈战了对吧?哎,就是他已经谈战了啊,所以这个时候我们就直接就是pop tag标签没有封闭,Div没有封闭啊,这是因为他这个时候捕获到了开始标记,他就认为此时这个呃,咱们可以输出一下。哎,咱们也不用输出了,就直接说吧,就他就是认为现在这个标签是这个发现了吗?就他就会认为这是。H3CLASS box是他的标签名。
01:01
啊,所以咱们现在就可以把这个呃,输出一下,这叫检测到开始标记。对吧,然后这个tag我们给他打开,那你现在就会发现开始标记是div没有问题,那那它怎么回事呢?因为什么呢?因为它这个是开始标记是div,它能识别出来,但这个H3它是不是就懵了。没问题吧,对吧,哎,他这个就会认为H3,他就懵了啊,然后你这个H3呢,它所以说没有封闭的是这个H3。啊,他是这样子的。哎,所以说你这儿不能加这个class,不能乱加。不能乱加。啊,一乱加的话呢,那这个时候实际上它就有问题了,哎,它就有问题了啊,因为因为什么呢?因为你你的这个正则表达式,它是A到Z加一杠六,而这个明显不符合啊,然后这块也不符合这个地方,所以说你这个if服没有被测试到,这个else if也没有测试到,然后就相当于这个else,那这个else的话等于说加加加加加加加到这就是错了。
02:05
所以说我们现在呢,就比较麻烦,也麻烦就麻烦在这这个开始标记呢,我们就需要重新去书写了。啊,然后重新捕获两个部分,我们要去书写两个叹号。啊,两两两两个员工号,所以这个开始标记呢,现在是长成什么样子呢?就长成的是一个标记,标记肯定是刚才这个没问题,就是A到Z,然后这边是U啊,这边是一到六对吧,一到六可能有可能没有,然后这块可能是有一个空格,或者没有一个空格对吧,然后可能有或者没有一个空格,然后后边是不是跟着一堆东西啊。啊,这个所以说相当于什么呢?相当于这个部分,我们就开始去抓这个空格。哎,这个空格我们就称为一个杠S,或者说就是一个空格啊,你可以在这里直接打一个空格,但是最好就直接写一个杠S,哎,这些都可以,或者说这个空格我们也不管了啊,因为他这个一到六结束之后,他这个是嗯。
03:01
对对,一到六,然后这块是一个空格,那我就杠S吧。好杠S之后呢,然后到这块的任何,因为这块可以加很多呀,对吧,ID比如说也叫box,或者ID叫my box。对吧,那所以说这块的话,相当于我们这块可以用这个点加这个符号,但是还是不能用点加,对它还是要向这里学习啊,要向这里学习,它不能是这个尖角号,所以这块就是一个杠,诶一个尖角号的这样的一个一个逻辑,然后到哪里呢?是不是对到这个开始标记账。所以这样的话呢,我们就把开始标记呢,我们就给它啊捕获到了,哎这样的,但是这个地方我们要加个问号,因为他可能有可能没有。啊,然后这个地方啊,我们要去给他写个加号啊,他可能有可能没有,哎,这样好刷新好,但他检测到开始标记H3了。对吧,但是你div没有被检测到,就是你这个div标记没有被检测到,说明什么,说明这个空也得放到里头,因为这个问号了,发现了吗?好我们刷新诶这个时候就D h3ULD。
04:09
啊,所以你就会发现现在呢。他确实呃,正则表达式,你不能一上来就加这个,你一上来就加后边这些东西的话就比较麻烦。好吧,诶,那现在就检测到了,那起码能检测到之后,但是呢,这个时候他是不是要分析它有这个,呃,咱们先看返回的抽象语法数,返回的抽象语法数现在结果是正确的啊,但是恶心就恶心在他这个有个T的class等于box ID等于my box你好,发现了吗?对他恶心就恶心在为啥,因为对你这个指针是不是移动的,移动的太太少了。非常好,就相当于你这个指针指针啊,你的指针在这里开始指向,那你不能只移动一个标签名,加上一个二,二是什么意思,是不是一个开始尖角号和一个结束尖角号了,对吧?所以说这个时候你发现没发现你这个指针啊,它是开始标签这tag我们拿到了,然后tag拿到之后我们再拿at t RS这个stream。
05:11
好,我们把这个是方块二,因为它是第二个捕获的元素对吧?哎,那这个string它是不是也会影响你这个长度啊,它所以说不是要加二,而是要加二,再加上它的Les。啊,因为你要让指针把这个长度也要移过去。明白吗?哎,长度加二,然后再加啊,咱们这个at tr string的长度,那为什么要加二呢?因为这有这这两位,所以这样的话大家刷新啊,这块报错,报错的话是因为这个有可能是安迪犯的。能理解吧,哎,就这个东西有可能是安迪版的啊,所以说我们现在来看一下就是cost,哎,Cost at t RS的。呃,String,哎的一个认识啊好。
06:00
那这个时候我们就需要干嘛,对,我们这个时候就需要看他是不是存在啊,就是他如果不是闹,哎,对,那这个时候就是他的Les,如果是闹,咱们就给它定为零,因为JS说安迪范是不能打点的啊,安迪范是不能打点的,所以我们不能直接让安de范的点Les,它就报错了。对吧,哎,所以这块呢,咱们就写个备注,就得到at t RS的啊字符串的这样的一个总长度,好,那这样的话我们刷新诶OK了,那这样的话我们再看看这个抽象语法数这块是不是就T拟好就正确了。但是这个text的你好啊,他是他的children,但是这个标签身上是不是没有他的这个属性。发现了吗?诶,这个标签身上没有他的属性,那没有属性的话,它大概意思是什么?对,就是把a dt RS要写在他身上。对吧,就要把这个at ts stream,我们就需要写到他身上,这是他的一个大概意思,这是他的一个大概思路,就是我当前的这个标签。
07:03
啊,我当前的这个标签,他现在自己呢,就需要有这个ADTS这个属性。好,那刷新之后你就会发现,你看这个H3它的它是这个时候是不是感觉就对了,At t RS它身上有那个,对,但是你知道了这个ATRS它是不是要处理成数组。对吧,哎,就是它它有对他这个不能是字符串,它应该是数组的形式,然后呢,里头有个对象啊,有个对象,这个对象是什么来着,我们看一下咱们PPT啊。所以这个代码是一层一层写出来的,并不是一上来就写出来的,对吧,Name value name value。啊,所以这个时候我们要怎么办。没错,我们这个时候是不是就需要用另一个文件来处理这个ad ts string啊?能理解吗?所以说我们就管它叫叫做处理,那咱们就管它叫pass at t RS string。啊,点JS,我们向外暴露这个函数default。
08:01
对吧,向外暴露这个函数,也就是说ATRS这个string。啊,现在我们要让他处理,把这个东西变成数组返回,也就是说把这个变为数组去返回,这是我们的一个目的,就是它要返回一个数组,而这个数组它要长成什么样嘞?它是不是要长成内幕是什么,Value是什么?内幕是什么,Value是什么呀。能不能理解对吧?哎,他要去返返回一个内幕是什么,Value是什么,内幕是什么,Value是什么这样子的一个东西啊,你看老师写的这个节奏感。对吧,哎,Name,比如说class,然后value表示测试一,然后这个叫测试二,这个叫ID,看见没有,你要返回这样子的一个东西。啊,那所以说你这个pass这块是不是就需要引这个包啊,哎,我们把这个,所以现在的话你就会发现我们在开发的时候,实际上我们就在渐进渐强啊,去写这个代码,但是他的整体逻辑没有那么难啊,没有底层,它实际上已经发展到Ve2.6了。
09:04
对吧,就说明view的底层其实已经在变到一个特别特别的,怎么说啊,就是view的底层其实已经变到了一个特别特别特别的,呃,就是很鲁棒啊,很鲁棒,鲁棒大家应该知道啊,就是鲁棒。哎,就是他非常的健壮啊,非常的这个健壮非常的强壮鲁棒啊,啊所以说咱们现在这个程序不需要说过分的这个robust啊,不用特别鲁吧,哎,我们不用考虑那么多啊,我们就考虑那种普通情况。好,所以这块的这个东西呢,它就应该传入函数,然后把我们这个at t和S这个string我们给他传进去,那现在的话,你看我们这个啊,这个标签它是不是就有了,看见没有,这at t RS它是不是就都有测试一测试二了。哎,他都有这个ADTRS啊,当然了,他要不要有这个标记,呃,对,他现在每个标记都有了啊,那是不是就给决定传的是什么样,对,那这个时候同学们肯定能想到我们要把这个字符串是不是要拆分成数组,用空格来拆分成数组,对吧,但是呢,没有你想的那么简单。
10:13
啊,没有你想的那么简单,比如说他现在是class class里头有空格。能理解吗?就是说。它class里就有空格,那说明什么,就说明这个类名它有空格啊,所以所以这个对吧,比如说这叫box,然后它也叫AA。啊,或者他就叫AA,他就叫BB,它叫CC,那这个空格你是不能随意抓的。能明白吗?就是说所以说这个函数它编写起来难度是很有的,但是不管怎么样,你有没有发现一个特别有意思的事情,就是不管我们现在怎么样啊,我们起码我们已经把这个东西是不是就已经。已经。就就就就。就基本上已就是已经给他管控到这个范围之内了啊,就知道我们要做什么,那这个时候实际上就编程能力的提高啊,我们写一个if思,就如果他是安迪范,那我就返回空,哎,就返回空,那现在他可能是空啊,那现在面对他的话,我们现在就需要去不能死不利他啊,不能说死不利的,直接就来一个当地,那是不行的,那所以说我现在就要判断这个空格能理解吗?我现在就需要判断这个空格是不是在class这个里头啊,或者说不是class里头是不是,我要判断它是不是在引号里头啊,咱们一律是双引号,不允许单引号啊,要不然的话,咱们现在就麻烦死了啊,咱们一定用单引,所以说这个时候是不是它又有一个呃,进站出站的一种一种感觉,但这个时候不是进站出站了,而是我们直接用个布尔值。
11:38
啊,布尔值来判断当前,就是我们现在肯定要遍历每一个字符。能明白吗?遍历每一个字符。啊,遍历每一个字符,然后遍历每一个字符,我们要干嘛?对,我们现在就是遍历到,比如说这块有个空格,那这个空格它不在引号里面,那这个时候是不是就可以把之前的所有东西就收集出来了。明白吗?所以他这个时候就是一种特别特别有意思的一个逻辑啊,它就是一种非常有意思的一个逻辑,就是。
12:06
就是我我我们现在PPT上给大家用指针画一下吧,因为这个算法其实老师的脑子中有,但是你们的脑子中没有,所以呢,他就不好讲啊,我把这个给大家看一下。Cons啊,我们把这个算法咱们再讲一下啊。好,可能一上来就有个空格啊,一上来有个空格没有关系啊,诶他一上来有个空格,那就没有关系啊,那我们现在看,我们现在目的是要便历,便历的这一项,如果是个空格,它在引号里头,因为我变到引号里之后呢,那这个时候我们现在就写一个叫is啊引号叫什么啊,叫叫is引号吧,好吧,哎,他这个时候就叫触了。好,那这个时候遇见空格了,由于它意思引号是true,所以我们不管它。啊好,那然后再遇见引号,我这个时候就把它改成false,也就是说它的逻辑就是相当于我遇见引号我就给它开了,再遇见引号我就给它关了,那这个空格它现在是不是关的状态,也就是说我现在在关的状态中遇见的引号,那我这个时候是不是就需要以它切一刀?
13:11
对吧,从他切引到就要把之前的这些东西给他提出去。比如说我现在要放到一个数组,明白吗?我现在是不是要放一个数组,那我放在这个数组啊,放在这个数组当中,我是不是就要把这部分给它。给他铺设到数组里去啊。当然,我不能用剪切,因为我还得继续遍历呢。对吧,诶我要push进去啊,那这个时候是不是就需要,当然也可以剪切,我把它给变,我想想啊,对,我就可以从刚才那一项到这了。发现了吗?啊,当然你也可以把这个字符串变了,变了之后,然后再重新变历,让指针归零,它也可以没问题。对吧,但是你也可以再设一个变量,比如说这个变量就是当前这个断点。啊,比如说叫point就是个断点的位置,哎,那它就会记录这个下标为几,这是零一二三四五六七八九十,11 12 13 14 15,十六十七,那他不就只只到16吗。
14:10
对吧,那这个时候如果说我们再去把这个ID弄进来,那对它是不是就相当于这个class,这个字符串在这里头啊,当然对不起,这个字符串是整个的啊,就是class等于它,它是加单引号。啊,就这个字符串当中是有反引号的啊,是有这个双引号的,然后我再把这个ID等于它是不是再推入进去。能理解吗?所以这是这样子的一个逻辑啊,所以你就会发现这种指针法是非常方便的,因为我现在要判断这个空格,你不能不能直接Li啊,我再说一遍,我现在苦口婆心的在讲什么。啊,老师现在苦口婆心的在讲什么,就在讲一个知识点,就是这个空格你不能直接用split明白吗?你不能直接用split这个空格给空出来,因为如果你要用split把这个空格空出来的话,你现在就会发现实际上它就有毛病啊,他这个时候有什么毛病呢?就是你class这个ABABC,你是不是收集不到啊。
15:06
明白吗?哎,所以说它就会打的特别散,因为你用空格分的话,实际上就相当于这是一个字符串,这是一个字符串,这是一个字符串,这是一个字符串,那你并没有把类名给筛掉,就是并没有把这个用空格隔开的类名给它分出去。所以这个就是它比较麻烦的一个情况。啊,这个就是它的一个比较麻烦的一个,一个很麻烦很麻烦的一个情况吧。好吧,哎,是这样子的。所以现在的话,我们现在就需要干嘛,我们现在就需要便利啊,便利这个at t RS这个stream,而不是啊注意听,而不是你想的啊,你想的直接用这个Li啊,这种暴力方法啊,不是你想的直接用这种Li的这种暴力方法,不是他是要用这个ars要便利的。明白吗?所以这个时候我们现在就需要用for循环遍历啊,当然也可以用这个指针方法遍历都可以啊,这里用for循环也行,用for循环这里是可以的,没问题啊,这里就用for吧,不用指针了来答啊,因为这个for它某种意义上也是个指针啊,但这个指针它不会后移很多,它是不是就说一项一项的后移,所以我们用for循环回比较简单啊,I加加就行,好,那这个时候我们这个时候就需要设两个变量,一个叫意引号,一个叫point。
16:25
啊,设两个变量,而这两个变量其实不好理解,说实话真的不好理解,第一个就是当前,当前是否在引号内啊,当前是否在引号内。好,然后呢,我们现在呢,就需要看这个,就是说呃,断点啊,就是说这是断点,断点什么意思,一会我们再来看啊,断点一开始是为零。然后这个很简单,就是我们现在判断就是如果你,呃,咱们来设置一个东西,就是这个差。啊,第项我们就给它设置为叉,用叉这个字符来取,呃,对吧,存一下,然后如果你这个差。
17:08
啊,它就等于等于引号。看见了吗?他如果是引号的话,那我现在就让意思引号就等于非意思引号。啊,就有个开关状态,他如果当前不是呃,他当天是true就改成false啊,就是说他当天在引号内,那就说明他遇见终止引号了啊,然后如果呃当天不在引号中,那就说明他。遇见开始引号了,对吧?哎,这样子的好,就把这个引号我们给调整一下,然后呢,再判断就是如果你这个差等于等于了一个空格。啊,他等于一个空,注意他只能是一个空格,他如果说这块空格很多,这大家能理解吗?哎,就他故意在这空格很多啊,那这个时候他就会比较忙一会我们再说吧,先说一个空格的情况。好,那这一个空格的情况,它是不是此时要分两种情况对它是不是还需要,且当时引号状态是什么呀?关闭的啊,就是遇见了空格并且不在引号中,明白吗?就是遇见了空格并且不在引号中。
18:14
并且不在引号中啊。哎,那我这个时候呢,我就可以输出他这个I位置,咱们来看一下它输出什么,我们看一下啊,这个时候啊,其实编程呢,老师会一直就说他就是一个慢慢慢慢的一个进步的一个过程,大家知道吗?诶慢慢慢慢进步的一个过程啊编程。哎,这块a tr这个string报错了,这个是a trs string啊。好刷新,你看它输出零和17,零和17是什么?对,猜到了吧,零和17,这肯定能猜到,咱们来把这个输出,那不就是我们刚才的写的那个字符串中ID前头那位是17嘛,啊就这一位,这位是零一二三四五六七八九十十一,12 13,十四十五十六十七嘛,看见了吗。
19:07
就行了,那我这个时候是不是就需要把它推入到数组中,对吧?哎,就可以了,所以这块就有一个结果,结果数组,结果数组的话,我们这叫result。好,那我这个时候就可以把它推入到结果数组中。推谁呢?是不是推你传入的这个大参数的stream。啊,从断点。哎,就是point断点这位到当前I这位,然后是不是再把I设置成断点啊,这个能理解吧。对吧,哎,它就成新的断点了啊,这样的这样的话,他这个结果数组当当我们这个弄完之后,我们这个时候就可以看这个结果,cons.log这个结果啊,不是这个result啊,不是结结果果,那这样的话,我们就可以看见这个是不是就是一个空字符串,因为一上来就是个空。对吧?哎,然后呢,把它再推入进去,当然推入的时候这块有个空字符串,空字符串的处理这个还是比较简单的啊,空字符串对吧,还是比较简单的,给他推进来就完成了啊,那至于这个引号重了,那是因为咱们的这个编辑器啊,不是编辑器,咱们这个浏览器,它这个黑引号啊,黑引号是自动加的,它里头不是加上了吗。
20:21
发现了吗?是不是很简单啊,就说这种算法思路,你要会,咱们不用去去什么什么单引号啊什么的这种东西不用去管啊,不用去管那些细枝末节的东西,你就管这些重要的骨干知识啊,你就需要去管这些骨干知识,这这种骨干知识我觉得是比任何东西都需要来的更重要的啊,比任何东西来的更重要,所以这个时候大家就需要想清楚。咱们练练的是什么?练的不是VE的底层,练的是算法。对吧,哎,练的是算法啊好,那这个时候我们来处理一下这个空空字符串,就是如果说它就是一个空。哎,这个差它就是一个空,然后再判断它是不是只有空好吧,哎,然后如果飞啊,就是就只有空开始结尾。
21:09
啊,他只有空对吧,Test的这个东西看见没有substream。啊,如果他不是,那我现在就把它放进去,然后断点就是它。是吧,哎,就不能只有空,但是它这个为什么还是还是放进去了哦,因为它是空字误差,它不是这个,它这个加应该是问号。对吧,哎,问号啊,把这个问号就是有一个或者多个,所以说是加问号啊,啊不对,它这个是有啊星,对不起啊星。哎,这样。不是加问号,加问号是别的语言的正则表达式,好吧,哎,这样就放进去,放进去之后,然后这个空也可以去掉,就开始结尾的空,那咱们现在不是可以出吗。对吧?哎,ES6是不是有trim方法,ES6的tri啊,Trim函数是可以去掉首尾空格的啊,它是可以去掉首尾空格的,所以这个时候我们就可以去给他tri一下。
22:07
就完成了,这样的话tri到它首尾空格就没有了。对吧,哎,OK了,很简单啊,但是问题很简单,就是你你这个ID没加上,因为你这个后边没有空格,对吧,如果加个空格ID是不是就进去了,你这个ID没加上,所以这就比较恶心啊,所以最后结束的时候,是不是你这个也得放进去。能理解吗?因为你便利到最后你这负循环,因为比如说你这有class有ID,然后我再加一个属性,比如说叫data杠啊,Data塔杠N等于七。看见没有这个,那我这个时候。是不是class能进,ID能进,或者我把ID放最后咱们来看一下啊,Class能进,贝塔杠能进,但这个ID没进,ID没进是因为你最后就是循环结束之后,循环最后也要进。明白吗?哎,就是循环结束之后,等最后还剩一个,还剩一个啊,这个属性KV对K等于V还剩这个。
23:05
所以说我现在是不是就result,我现在就要push,我要把最后这个正进去,最后这个不就还是他吗?还是他吗,就是从point开始到最后把这个I就删掉了,从point开始到最后就行啊,那这样的话他不就进了吗?ID等于my box也进了,当然一定要tri。哎,这样的话他就进了,然后接下来的问题就是说,我现在返回的应该是一个对象啊,返回的是一个数组,而这个数组当中是不是内幕等于什么,还记得吗?咱们之前不是在这里,这里给大家想的是内等于什么,Y6是什么吗?内目是什么?Y6是什么,而你这时候是等号。对,所以这个时候我们就需要映射把这个等号拆掉,能理解吧,哎,把等号拆掉,我们要映射出三项啊。明白吧,哎,所以说我现在就要需要让这个result等于result映射一下,那你说老师你一开始为什么在这里不拆,因为在这里拆的话吧,我觉得太太恶心了啊,就代码不不符合我个人习惯在这里拆。
24:05
是吧,哎,拆这个等号啊映射,然后这个item。看见没有,哎,然后就根据等号拆分啊,那可以使用split,但是split不如不如正则表达式吗。对吧,哎,那我们就match一下,Match一下特别好写,这不是开头吗?这不就是结尾吗?对吧?然后这个开头的话,它这中间是等号,所以这块是一定是呃杠W或者是点加,然后等于点加,它一定是这样的形式吗。看见没有?对吧?哎,所以说这个就是COO吧,比如说这个是O吧啊这样的形式,然后我现在是不是叫返回什么,返回一个对象,这个对象就是内幕为O的一,因为O的O的一啊,因为O的一是这个捕获,然后O的二是这个捕获嘛,然后这是它的value这样来的,那为什么这里是映射,因为映射就指的是数组的长度不会变,不会变长,也不会变少啊,它本来有多少KV对,那现在就要变成多少个内幕VALUE6对,所以这是很简单的。
25:09
好吧,哎,然后最后我再return那个result就行了啊,然后这个东西就对了,你看注意看这个AT空的吧,注意看这个H3,注意看它是不是AT3项。对吧,你看class是不是它啊,咱们再说一遍,这个Y6它有两个引号啊,这是这是正确的。啊,它有两个引号是正确的啊,哎,不过这个引号可以去掉是吧,这个引号可以去掉,哎,所以这个引号的话,我们就不给他。不对吧,我们把这个引号给它去掉啊,不要这个引号,那这回的话就对了,你看。是不是class,是不是ABCC,对N,是不是7ID,是不是my box?发现了吗?对吧,哎,我们就非常非常成功的啊,我们就把这个,呃,就把这个a tr string string就给他进行了一个,呃。
26:03
代码的编写啊,代码的编写,然后这块,然后也就是说下面的代码是代码对吧,下面的代码,然后下面的代码功能是将将什么呀,将这个数组中是不是都是K等于V这样的形式,对吧?然后逗号K等于V这样的形式,然后逗号K等于V这样的形式。K等于V啊,这样的形式是不是变为什么呀?对变为也是个数组,没错,然后对是不是内等于K。看见没有,然后Y6等于V啊,就内等于KY6等于V,内等于KY6等于V是这样子的。啊,内等于KY6等于V,内等于KY6等于V,就变成这样子的一种一种情况了。发现了吗?就把这个这个算法其实就变成这样的了,就是name等于KY等于v name等于KY等于V。
27:02
变成这样的一种一种一种情况了。好吧,哎,然后要看懂这个代码,那我们现在就成功的解决了这件事啊,我们这个视频的目的达到了,我们现在已经录屏27分钟了啊,就识别actrs我们就达到了,所以说你就会发现它,它要有这个空格,它就比较恶心,然后你就需要通过判断他在不在引号里头啊,然后来正确的识别到底要不要按这个引号来分空格。明白吗?哎,OK啊,所以你发没发现这个指针,这种思想是很好用的,这里的这个爱其实也是指针对吧。
我来说两句