00:01
好,咱们万里长征啊,已经走完一半了啊,兄弟们。嗯,咱们之前的课程当中呢,咱们已经实现了这个箭头啊,就这个模板字符串呢,变成tons了,非常的成功啊,这个模板字符串变成token,这个意义呢,其实是很重大的。啊,其实是很重大的,就说明咱们已经把HTML的这个代码呢,给它已经进行了一个深度的一个啊,就是呃,一个拆解啊,深度的一个拆解,大家可以发现深度的一个拆解。啊,那实际上呢,呃,咱们当时就是写这个函数的时候,对吧?哎,咱们也借助了这个,呃源码,源码它有个collector这个思想啊,那这个思想的话呢,咱们不能说你光抄上来啊,就老师写的代码你也不能抄上来,一定一定要能自己把这个领悟透。啊,领悟透这种收集器这种概念,那收集器可以能不能不一定是指向s tons的对吧,它也有可能指向你新创建的下标为二这项。
01:08
啊,是这样子的,所以这样子的话,你就明白它大概是怎么回事儿了。好,那么从这节课开始呢,我们是不是就要执行这个里头的东西啊,红框里的东西就是我们要把tokens啊,结合数据,我们生成DOM字符串。那这个时候你看我们的index.js当中,你看index是什么,是不是咱们外派打包的时候的入口的这个JS文件呀,对吧?哎,入口的这个JS文件,那么在这个JS文件的时候,你看它很清晰。啊,很惊喜,你就这么想吧,如果你没有用模块化编程啊,那是不是这个大函数你就需要,还有这个scanner都需要写到一个文件中啊,那你老上下拉动,其实这个时候开发体验是不好的。啊,这个时候开发体验不好的,这就是为什么啊,就是老师说咱们一定要去使用模块化开发的这种思想啊,为什么要去使用这种模块化开发的这种思想,为什么要去使用这种思想,哎,这样的啊。
02:10
好,这个是刚刚返回的这个数据。呃,队伍的站点这块咱感觉有点问题,把他出战出战。诶,怎么感觉刚才这块写的有点问题啊,咱们之前写的这块啊,突然间看见了。Sans。啊对,那这个没有必要啊,没有必要,因为它这个灰的啊,没有必要弄它,因为你谈战之后,我们现在要让它指向新的站点,不是你刚的这项对吧,哎,这样子的啊这样子的。好吧,哎,所以我们把这个嗯想清楚啊,这样的话我们就OK了,这样的话就OK了啊,这个刚才这个是灰的啊,这个吓我一跳,好了,咱们。不不跑题了啊。所以一定模块开发的情况,那接下来的话,我们是不是有tokens了,然后我们再有数据,数据不是这儿吗。
03:04
对吧,数据不是这个data吗?啊,那咱们现在就要把这个数据准备出来啊,这个数据现在还是空的是吧?哎,那这个数据在哪里啊,这个数据在咱们的PPT上呢,就已经给大家准备好了啊,这个数据这个hobbies咱们看一下啊,它这个数据数据hobbies。咱们的hobbies。哎呀啊,没有老师提前备课的时候提前准备了啊。老师在提前备课的时候,提前准备了这个数据。我们看一下啊,在这呢。哎,这个老师提前备课的时候准备好的数据啊,咱们可以看一下好,现在数据呢,是不是就是一个对象里头有students数组啊,然后students数组的时候呢,啊,他就会去展开这个student数组,因为这是井号和这个对吧,然后呢,循环的时候,每遍了一个学生呢,又会用有序列表。
04:02
啊,用有序列表把这个hobbies给进行展开。对吧,把hobies思给进行展开啊,这个点就表示这个项的本身啊,所以咱们接下来的任务还挺重啊,不过也不难啊,挺有意的,我觉得比刚才讲的要有意思,因为给他复原,对吧?来从talk复原啊。那现在talk是折叠起来,咱们要复原。那怎么复原呢?那这个时候我们肯定要需要起一个新的函数,哎,那这个时候我们就要调用一个新的函数,这个函数咱们就叫做render吧。啊,或者叫render template。哎,这样的函数好,然后让这个函数干嘛呢?是不是就要让咱们的token数组是不是变为咱们的倒字符串啊。啊,而咱们盗墓字符串是真正render要返回的东西。对吧,哎,这个就是我们要做的,那所以说我们现在呢,就需要再去创建这个函数叫render template啊。好写注释函数的功能是。
05:04
函数的功能是什么呀?对,是不是让token的数组变为DOM字符串啊?看见没有,然后我们在这里呢,就可以expert default啊把把这个render template啊,我们就给它啊向外暴露,哎,暴露那他收一个什么,收一个talk克斯数组和一个data。对吧,哎,所以这块呢,你就会发现叫do啊,就等于什么呢,等于这个函数。把temp啊,把模板字符串和数据往里传,模板字符串啊,哎,不对,不是模板字符串是tokens啊和数据往里传,因为第一步已经把模板字符串变成token了,对吧。没问题吧?哎,然后。我们在这里输出一下他俩啊。好,这个talk清掉。这个时候刷新看一下啊,还是报错,看看哪报错了。看看哪报错了啊。
06:03
啊,没引包啊。不能着急啊,你这个一着急就废了。啊,一着急就废了。好,然后这个时候tokens和数据。他们俩就要产生化学反应。对吧,哎,这个tokens折叠起来了,已经变成了就是text的,然后井号这里是不是折叠起来了。对吧,哎,然后呢,我们现在就要想办法把这个数据与这个tons产生化学反应。啊,产生化学反应哎,就能够让这里的这个数据啊,都能够,诶给他把这个数弄出来啊这样的。那这个时候呢,其实咱们就不要先去弄特复杂的啊,先不要弄特复杂,咱们先感觉感觉对吧,所以这个地方咱们模板字符串和这个数据有点太复杂了。发现了吗?对吧,所以我们给它注掉啊,咱们给它换一个简单的。跳跳。
07:00
换个简单的目的呢,是为了让他感觉感觉对吧?哎,咱们写一个我爱啊我爱啊,Somebody。对吧,我爱毛人啊就行了,我爱三毛底,然后三毛弟也爱我。看见没有?哎,对,然后这个数据呢,我们给它把somebody定义出来。叫上硅谷。好,那最后填充应该叫我爱上归谷,上归故也爱我,对吧?那这个时候我们看一下他这个token呢,就很清晰啊,我爱somebody逗号,Somebody也爱我。没问题吧,哎,这是咱们之前的课程的内容啊,简直是太感动了,对吧,现在内心当中就有一种说不出来的喜悦啊,说不出来的喜悦。那这种喜悦就是说我们之前把这个token啊,我们之前就把这个tokens就真的给它完成了,Tokens就给它啊生成了很好,那现在的问题是能把somebody somebody填进去吗?
08:03
其实可以填,就是咱们大概写写,其实你就知道这块大概应该写成什么样了。对吧,哎,我们只要硬着头皮啊,你就是大概写写对吧,哎,然后基本上这个地方就能写出来啊,那首先第一步肯定需要去遍历这个陶啊。好便利陶。I小于token的length对吧。然后爱加加啊,便利桃子。然后便利token的话,情况很简单,就是你这个时候肯定需要先拿到这个token啊,Token就等于。哎,就等于你这个token工的Di项拿到它,哎,然后看类型。啊,如果它的类型。哎,是text。那怎么样?对吧,然后再else if,如果它这个类型。
09:00
啊,第零项是类型啊,如果是内幕那怎么样对吧。哎哎,如果是T怎么样,如果是name怎么样?那很简单。很简单,那这个时候你就会发现哦,如果是文字,那我这个时候是不是就需要把这个文字追追进去。对吧,注到一个结果字符串中。啊,所以咱们现在就要来一个结果字符串。因为你要返回的是一个结果嘛,Result。哎,它是一个结果,字符上就如果是文字,那肯定就把这个内容追进去,那就是token中的下标为一的下,因为别忘了一个token下标为零的项是它的类型。下标为一的像呢,是这个文本字符串当中的真正的这个文字。对吧,哎,下标唯一的象是他真正的这样的一个文字啊,没有什么毛病。是这样子的。那所以说你现在呢,你先别管这个I if啊,但是呢,这个模板字符串,你看我们在这儿输出循环语句结束之后呢,我们给它输出。
10:08
输出之后你看它就出来了,叫我爱三保底,三保底也爱我。发现了吗?对吧,那为那对呀,因为啊对你这个somebody其实这块有问题啊,这块不是啊,咱们刚才那个确实有点bug,因为你这个T这个里头是呃,收集的时候它是应该是一个name啊,这个是咱们之前tag啊tokens这块有错啊。To,咱们刚才那个之前写的这个有点错误,所以说我们还得需要修正一下这块有点错误啊。哎,存起来。看一下就如果是井号,这块是井号啊,然后如果是,呃,咱们这个talks这块它没有正确识别对吧,它这块应该是一个呃内幕啊,这块应该是内幕。是吧,所以这块没有正确识别啊,所以这块应该是内幕。
11:01
内啊,这块写错了。所以说不好意思,咱们上一个视频这里是写写错了啊,内就指的是普通双大括号中的内容啊,啊,那么普通文本在这里是text啊。好,那这回就对了。是不是text name text name text对吧,那text的现在都收集name收集起来,然后最后返回的是我爱什么,什么也爱我,这里是空。对吧,哎,为什么是空呢?因为你这个else if这块没写对。L这块都没写。你什么都没写呀?对吧,哎,你这个是拼起来啊拼起来。那这块对。啊,这块你就不能拼他的TALK1了,因为你在拼TALK1就不对了,那是不是就是我爱somebody了,对,那你现在肯定知道了,因为我们一开始用正则表达式,其实有过那思路。你现在是不是就要从咱们这个数据对象当中啊,从咱们传入的这个数据对象当中,然后去寻找三保底这个属性。发现了吗?对吧?哎,去就在他数据对象当中去寻找这个三保底这个属性明白吗。
12:05
哎,寻找他的三暴力这个属性。啊,所以这样的话,我们就可以把它啊,就就就是这个很简单啊,就是直接从数据对象当中寻找这个。得塔,它不就完了吗?那你看,他不就拼出来了吗?叫我爱上硅谷,上硅谷也爱我。诶,但是你千万别高兴的太早,因为咱们现在这个是最简单的一个模板形式,他没有带这种井号啊,并且岂止是没带井号,因为如果你要带上井号的话,他是不是还能再嵌套啊。对吧,还能带嵌套。啊,所以就相当于什么呢?就相当于你要先从最简单的开始测试。啊,先去测试这个最简单的例子。哎,我把这个PPT上,咱们给大家补点字啊。不掉字,就是先去用简单的啊例子,咱们来完成测试。
13:02
那为什么要去用简单例子完成测试呢?因为你简单的例子完成好之后呢。这个时候呢,你就内心当中呢,就有一种平静的感觉啊,就是你就特别知道你要做的目标是什么。我们已经粗浅的把这个简单目标给完成了。啊,粗浅的就是先粗浅的。粗浅的啊,完成简单的一个目标。这个简单目标是什么呢?就是不带有井号标记啊,就是普通的一个字符串拼接。那这个时候你就会发现我们的代码就已经写出来了。啊,变了一次,然后如果是T拼起来,如果是name,就这样写,但是接下来最难最难的。那就是井号。最难最难的就是井号。那井号什么意思?对吧,井号什么意思。
14:01
井号是不是就相当于你看啊,咱们现在咱们给它恢复成有井号的状态。啊。恢复成有井号的状态,那咱们现在呢,这个模板字符串,咱们大家就直接使用刚才这个二层嵌套的了。刷新看一下tons。啊,咱们就直接进tons了,不进这data啊,Tos看一下。哎,那你看返回的是不是这里头都有问题啊,对吧,井号他没法处理啊。那你看井号这里是不是又是一个头盔?发现了吗?对吧,又是一个套。而这个tokens。是不是又可以进入到咱们的这个render template这个函数中进行处理?什么意思?大家不要着急,因为你想啊,Render template,它是不是会返回一个字符串啊,就是你给他一个tons数组,给他一个数据。
15:03
给他一个token数组,给他一个数据。啊,给他一个talk的数组,给他一个数据。那他这个时候呢,就要能返回结果字符串。哎,这个时候呢,它就要能返回结果字符串。那这个时候,如果我们再把这个小数组。这不是ton的数组吗?也传入这个函数当中,那它不就又返回一个结果字符串,再与原来的T的上一层的T的一拼接不就完了吗?所以老师实际上在暗示你这里的一个编程思路啊,就是递归。啊,就是递归。啊,什么意思呢?因为你想啊,我们现在不带井号的,我们已经高质量完成了。咱们刚才已经测试了,不带井号了。啊,已经高质量的能够生成这个result了,那带井号的不就是说再来一层,然后递归递归吗。
16:08
对吧。所以递归这个思想。在这里就用到了。所以也就是说相当于井号标记啊标记的这个tokens,那么需要递归处理它的下标为二的小数组。哎,是这样子的,井号标记的这个token。所以这块要递归。所以我们不用怕啊,我们就直接你看I if,我们就直接判断。判断什么呢?对,我们就直接判断,如果talk的D零下,如果是井号。看见了吗?如果是井号。看到了吧,哎,那这个时候我们要干什么,我们现在是不是要去进行一个递归呀,就可以。但是呢,在写递归之前呢,咱们先去讲另外一个知识,就是一会儿这里要递归,就是他大概就需要递归,他自己能能理解吧,就是递归啊这块只要你先大概能理解就行。
17:10
哎,但是我们先不写这块,为什么?因为老师突然间想到了一个重要的知识。啊,咱们必须要先讲。如果咱们这个重要的知识啊,重要的知识。哎,如果讲晚了,那一会儿你就乱了。所以这块呢,老师啊,咱们倒一下,咱们先不着急写那个DV。但是递归思想已经告诉你了,咱们现在干嘛呢?咱们现在看一下这句话实际上是有问题的啊。这句话实际上是有问题的。那你说老师没问题啊,我们再给他注释掉啊。嗯。这块突然发现不能先讲递归,先讲递归的话,有一个地细节没处理好,一会儿就出问题了。那你说老师这不是没问题吗?我爱上硅谷,上硅谷也爱我呀。对吧,我好木的。
18:03
对吧,哎,木的。开心。啊,没问题,拼上了。但实际上,它的问题来自于他不能打点。你懂吗?他不能打点。啊。什么意思呢?比如说现在我看我现在写一个A里的B里的C。对吧,等于100。A里的B里的C等于100,我好木的呀,对吧,我考了。A里的B里的C分。对吧。那你现在看刷新这儿是不是安迪范分啊。发现了吗?也就相当于什么意思呢?也就相当于我们现在不能处理这个点。啊,不能处理这个点。那不能处理点的原因是什么?不能处理点的原因我们在控制台给你讲啊,就比如说我现在挖一个MM对象,三个M这个对象啊。
19:06
它的P属性。哎,是个对象。对吧,P属性的值呢,是个对象,对象里头有Q属性,它的值是123。那这个时候我想访问123,我只能用MMM.p.Q来访问,不能用方括号。看见没有?这就是问题的症结。就是咱们JS特别有意思。你以为他挺好用的,但其实啊,它千疮百孔。啊,我们现在这个MMM这个对象,它是P里头有一个Q,这个这个对象Q的属性值呢,是123。那你现在连续打两个点是可以的,但是你不能用方括号里头写p.Q它是不认识这种p.Q形式的。能理解吧,这就很恶心,他就不认识这个p.Q形式。你懂吧?
20:01
哎,是这样子的。那为什么老师不讲递归,突然间讲这个a.b.c了呢?因为咱们一会儿是不是这里头都是有大点的呀。看见了吗?这里都是有点语法的。哎,这里都是有点语法的。啊,所以咱们要先去处理啊,幸亏刚才老师踩了脚刹车,没有着急讲地V啊,幸亏咱们着急没有讲懂吧,所以这个咱们大家一定要听懂啊,一定要听懂,我们把这个写在这儿啊。好,刚才这句话没问题啊,标记井号标记的这个to分子需要用递归哎来处理它下标为二的小数组。但是现在遇见一个问题啊,就是现在遇见一个问题,什么问题。对,就是我们现在的这个,他不认不认识这个这个点符号。能理解吗?这个是我们现在遇见的问题啊,就是他不认识点符号。
21:05
点符号啊,JS它不认识点符号。哎,咱们在编辑器中好好写一下啊,就比如说我现在这个对象。它是A里的B里的C。那这个时候你不能用方括号A里的B里的C来访问,那为什么我要用方括号呢?因为咱们刚才做render template的时候,你这块不就是方括号吗?它不就是用方括号把a.b.c抛。对呀,你看啊,TOKEN1不就是a.b.c吗,你看。这不就是a.b.c吗?所以说somebody它能读取出来上硅谷三个字,木能读啊,能读取出开心这三个两个字,但是a.b.c它只能读出安迪范,因为它不识别。能理解吗?哎,所以他是不认识这样子的一个写法啊,就是不行。
22:03
这种写法它不行。所以这就给你下一步你要做递归呢,就产生了一定的影响。就这种东西它是不行的。哎,所以它这个它是不行的啊,现在遇见这样的一个问题,咱们现在亟待去处理。那怎么解决这个问题呢?啊,解决这个问题的话,我们现在呢,就需要编写一个lookup函数啊叫lookup函数。哎,卢卡帕。好,那lookup函数的话,我们现在为什么叫lookup,因为look表示的是寻找啊,Lookup表示的是寻找。哎,那他向外暴露at lookup。表示寻找。啊,那lookup函数是干嘛的呢?它就是对你给他一个数据。啊,或者叫数据对象。然后你给他一个。点符号的属性名。
23:00
啊,属性名就是key name。对吧,所以咱们现在可以写一下它的功能,函数的功能是啊,可以在贝塔OB勾对象中。哎,用点符号的啊,或者说叫连续点符号的这个key name啊,寻找。寻找连续用连续点符号的key name这个这个属性啊。哎,比如。咱们这个得塔OB勾是。啊,那不就刚才那个例子吗。就比如说它是这个A里的B里的C。是吧?对吧,那么lookup。啊,我们得塔OB勾逗号引号a.b.c。结果就是100。就它要能识别这个a.b.c。啊,所以它要能识别这个a.b.c。
24:01
发现了吗?他要能把这个a.b.c给识别出来。对吧,哎,他要能把这个a.b.c给识别出来。是这样子的。对吧,哎,所以我们现在要去尝试写这个函数。那么咱们也不骗大家。这个函数曾经作为过啊,面试题出现过。就是咱们现这道这个这个咱们现在遇见的这个问题。哎,咱们现在遇到的这个问题,其实作为面试题啊,那么咱们,哎,不忽悠大家啊,不忽悠大家这个函数啊,是某个大场哎的面试题啊。那为什么老师知道,因为咱们学生会有一些反馈,说老师我去哪哪哪儿面试了啊,面试考了我一个什么函数。对吧,哎,这样子的。好,那这个函数呢,你一定要会测试。
25:01
那怎么测试呢?其实最简单的方法就是在主函数中测试啊,就是我们在这个index中进行测试。能明白吧,哎,我们在index中进行一个临时测试啊。这样的话不就是不乱吗?哎,我们在index中进行个菱形测试,好lookup一个对象吧,对象M里的N里的P。123。好,我的目标是能把m.n.P读出来,这是我测试啊。对吧,我为了方便测试,然后我在这里输出data OB b go和key。啊刷新,诶看见了。那我现在是不是我希望得到123这个数值啊。那咱们现在就要想想这个lookup怎么写啊,所以说就相当于逢山开路啊,遇水架桥啊,就咱们这编程就形成了这样子的一个好的风气啊。好,那咱们这段视频的时间有点超长了啊,因为这段视频咱们刚才这块写的啊,就是这个,呃,这个part time的这块啊。
26:09
不是partate,咱们刚才写的这个render template这块啊,其实写了也不少,哎,这个时间有点超长,咱们下一个视频讲解lookup函数啊。好,咱们这个视频就到这。
我来说两句