00:00
好。呃,我们在上一个视频当中呢,我们已经提到了must大这个库呢,它并不是一个简单的正则表达式啊,这样来实现的这样的一个机理啊,那它的实现机理呢,实际上是这张图,它就是说要将模板字符串呢,先编译成tokens这个东西啊,然后tons这个东西呢,当做一个中间的一个过渡形态。它呢,在被数据结合的之后呢,就可以解析为咱们要的结果这个DOM字符串了,啊,那这里呢,就出现了一个词叫做tons。To这个单词呢,咱们可以在这个呃呃,这个查单词这个小软件当中可以看见啊,Tons这个词呢,它的名字就叫代号。啊,符号哎,Tokens token,哎就表示的是啊代号标志的意思啊,Token好,那么tokens呢,到底是什么呢?我们来看啊,它很关键,Tokens呢,实际上就是一个JS的一个嵌套数组啊,那么说白了就是咱们的模板字符串的JS表示形式。
01:13
啊,就是咱们模板字符串了一个啊JS表示形式,那什么意思呢?咱们来看啊,比如我们现在模板字符串是我买了一个thing,好mood。对吧,那么他就要被编译成tokens。这个talks呢,它就是一个二维数组的嵌套形式。这个数组当中,你看是不是有123455项,而每一项又是一个数组啊。所以呢,它就是形成了一个JS的嵌套数组的这样的一个形式。那么这个时候咱们来看一看它里面每个内容是什么。首先第一个。它的第零项,诶告诉他它是text,这是一个文本,好文本的话后边是一,我买了一个,那是不是这就对应的是这里啊。
02:05
看见了吗?那你说这里被解析成了一个啊text,然后一我买了一个,那就说明这个洞啊,它拆分的这个第一部分,它是一个文本。好,那第二部分呢,它识别到了是一个name。那name是什么?就是双大括号,双大括号里面是个C。看它是不是匹配到了这一部分,当然这个双大括号它没有留着啊,这个双大括号是不在这个引号里的。然后接下来就是一个好字,那是不是就是这里对吧,当然这里可能他这个PPT咱们这块没有写特别准啊,这块还少了一个逗号,哎,因为咱们这毕竟这有个逗号,所以这是个逗号,好啊,它是个文本,然后接下来呢,又是一个内蒙目的,然后。最后是R减啊减减号斜杠H1是这里啊是这里,那也就相当于这里的每一个项都是一个token啊,这里不加S,这里不加S啊,那么它整个构成的就是一个token丝。
03:05
哎,就是一个tokens呢,是一个二维数组,这个二维数组当中的每一项都是一个token。那现在你就能发现token是什么了,Token是不是就是把这一个模板字符串转换成这样的一个一个个部分呀,那如果是纯文字部分,那它就会被翻译成啊,就会被编译成这种T斯塔。对吧,你看这一部分是不是纯文字部分text对吧?这一部分是纯文字部分,那么就是text,那你这时候一定要注意,就是HTML标签啊,不管是开始标签还是结束标签,那么它都会被当做文本啊来进行处理。啊,那么换句话说就是说文本,呃,就是一视同仁的,大家没有什么不分,什么我是个我字,我是个买字啊,然后你是一个标签不分就是标签也好,还是这些中文字也好,那么一律都是文本,并且呢,它在这里是看不见边界的,对吧,因为对于模板引擎来说,我这个标签。
04:05
是没有意义的,对吧,对于模板引擎来说,这个标签它毕竟不是用盗墓方法去处理这个东西,它是用模板字符串的,它是用字符串的思路来处理啊,所以在这里呢,我们就会发现它并不是把这个H1单独的给它啊,装到这个啊T的这里头的啊,它是把H1和这个我买了一个这几个中文字一起算为text,好了,那老师把这个笔换一个颜色,换成蓝色吧啊。那这个时候你会发现像这种啊,带双大括号的这种东西呢,大家注意看诶,那它是不是就会变成name name对吧?那这个为什么叫name name是名字啊,那可能呢,就是mustin touch,他就会说啊,这是一个啊识别到了是一个双大括号中的名字,然后他把双大括号中的内容呢,都写在这儿了。所以你现在会发现这个token呢,它非常的有意思啊,那么他在从这个tokens啊,再进行一个所谓的一个解析啊,把数据弄进来,它就能够变成最终的那个答案。
05:09
啊,所以这个东西就是一个tokens,那么token这个东西牛在哪呢?一句话就是tokens这个东西呢,它是咱们以后要学的抽象语法术啊,叫ast,叫abstract啊,然后叫syntax tree,抽象语法术,还有虚拟节点这些技术的开山鼻祖啊,毫不夸张的说,就是真的是先有mustin touch,再有view啊对吧?哎,就是这样子的,所以说就相当于他真的是一个开山鼻祖啊,是这门手艺的一个啊,非常非常非常啊,就是一个祖师爷级别的这样的一个啊思路,那这个思路实际上啊,在呃,前端技术还比较贫瘠的那个时代呢,说句实在话啊,是比较震撼的啊,是比较这个呃激动人心的啊,这样的一种思路,他都用这种tokens的形式来进行过渡,好,我们来看下一页PPT啊。
06:02
那么这就说了,有创造性轰动性啊,那你看我买了一个thing,好木的呀,它就会被编译成为这样子的tokens,那这个tokens呢,再结合这个数据啊,数据进来了,就能够解析成为这样的手,对吧?哎,就解析,那到底怎么编译成tons的,怎么与数据结合,那咱们要花很大的篇章啊,来手敲一些代码来给你进行讲解。啊,这就咱们下面的这个课堂的这些内容,大家不要急对吧。好,那这个时候你可以看,如果这个模板字符串当中有循环存在的话啊,咱们刚才这个咱们回回到上一个PPT啊,你看这是普通的这个啊模板字符串,那它就会变成这种普通的这种tons,但是如果有循环存在的话呢,那它就会变为嵌套级别更深的tons。诶,咱们来看看这个tons,首先这个tons当中呢,有三个token。发现了吗?有三个token,那么第一个token text叫div,就是这部分,第二个token它非常的奇怪,发现了吗?它的前面它这块不是内幕它的这个地方的,哎,对,咱们刚才忘了说了D0项啊,就是每个东西的第零项下标为零的这个项是它的类型对吧?是它类型,那这里这个井号呢,就表示它是个井号类型。
07:17
对吧,那的确,那你这里不是个井号类型吗?但是呢,他这井号类型不是他自己,而是这一切就是他把井号和结束都包在这一个token里了,你看。而这个token呢,它除了有下标为零的这项,还有下标为一的这项,那么这里是不是还多了一个下标为二的这项啊。看见了吗?还多了下标为二的真相。对吧,没有什么毛病吧,那下标为二的这项你看啊,下标为零的这项是井号,表示这是个井号,好,下标为一的这项表示是AR,就表示这里要使用的量呢,是AR这个数组啊,这个量,然后接下来呢,又是一个数组啊,就等于说这个数组里头又套了一个数目,哎,级别更高了,那所以说这又是一个tos。
08:03
而tokens里边呢,又是三个啊三个token,那这三个token分别是text是这个力对吧?哎,然后name是这个点,哎,然后这个text是这个。闭合标签。发对吧,很有意思吗?哎,所以说你就会发现,当遇见这种啊有循环的存在的时候,那它就会被编译为嵌套更深的这种tons。啊,所以这个呢,呃,你你说老师我看懂这个了啊,对吧,你我一看就知道哦,这是第一部分text,然后这第二部分是个井,第三部分这是个text,没错,Text的井tax,然后呢,这一部分当中呢,又要分成啊这个三部分,因为这个井号识别过了就不用管了,那就是力点力,哎没错,力点力。但是你现在能看懂,我想问问大家。第一个发明这种思路的人,是不是真的是个天才啊,真的是个天才就什么意思呢?就是咱们计算机界啊,就讲究一件事儿,就是API啊,就比如说API什么意思,数组有push方法,泡方法,Spli方法啊,什么什么so的方法,那那这些东西都叫API,你能调用的东西,其实呢,它是不怎么值钱的。
09:13
啊,真正能值钱的呢,就是这种算法的思路的提出啊,那么一个好的算法实际上呢,是真真正正的啊,是能够产生这样子的一种实际作用的啊,能够解决非常非常复杂的事情的啊,所以说算法其实是啊,咱们普遍前端的啊,这个孩子们比较欠缺的啊,前端的这个从业人员,尤其是咱们就是通过培训啊,然后咱们刚从从业,比如说一年两年的这种啊,前端咱们想升到一个高级的前端工程师的时候,实际上呢,你就要去思考啊,更深层次的事儿了,就是这个世界它的本质啊,就是说你怎么样通过JS来去编写啊这种思路对吧,然后包括它的实现啊,就是咱们怎么样把这个模板字符串转换成这种嵌套层次更多的这个东西呢?
10:01
啊,那你说老师难吗?其实呃,通过老师咱们后边的课程啊,慢慢就下下几个视频,咱们就慢慢开始手写,你会发现它其实不难,对吧,咱们就一步一步的就开始手写,就能把它给手写出来,其实真的是不难的。但是在这里大家一定一定要去注意的是什么呢?就是呃,比如说今后你要想去呃,就是面试更好的这个啊公司,比如说啊字节跳动啊啊然后比如说这个啊美团啊,阿里啊,京东啊,啊当当啊滴滴啊什么这种啊腾讯这种这种这种这种大型互联网公司,其实他们是非常非常看重大家的做这种啊,就是比如说啊中层啊底层啊这种业务啊,就做这种轮坛,呃轮子啊,轮子就要做这种啊公共这种基础库的这种能力啊,所以说大家呢,你现在就知道了,哇,它真的很美对吧,咱们讲到这儿了,这课讲到这儿了,其实你才知道它真的很美。啊,她真的很美。
11:00
好,那咱们继续看下张PPT啊,那么如果循环是双重循环,咱们之前看过这个DEMO啊,这是一个井号students在循环力,而这个例里面呢,又有一个列表啊,当然咱们之前的案例这块是无序列表是吧?哎,那就改成OL啊。跟咱们之前案例匹配,这是无序列表,那这边也会变成无序列表。好,那咱们来看啊,那这个里头又有循环对吧,咱们之前见过这个这个案例啊,啊,那这里头啊,就会变成一个更深的tons啊,那外层是这个divol,还有这个。然后还有这中间这部分嘛,三部分就是一个两个三个哆来咪三个,那么中间这个你会发现对吧?哎,那它这里头又分为几层啊,这是第一层力和学生两个字,看见没有。然后是这个name,然后是的爱好是OL啊,因为咱们是不分标签和文字的,对吧?哎,然后后边是这个OL力啊,但是你会发现这里边这部分是不是又是一个嵌套更深的一个数组啊。
12:05
发现了吧,哎,那这里的闹是什么?其实这个闹一会儿咱们通过看源码你就知道了啊,这里这个闹在PPT上,嗯,多写了一会儿你就知道了,其实这里是真实的陶肯,它是多了两个位置表解一会儿咱们就看就知道了啊,别着急啊,所以说这里的这个数组嵌套层次呢,会更深啊,这个数组的嵌套层次会更深。所以就把这句话给你说简单一点,你就会发现我的天呐,就是这个东西你是能看懂的啊,咱们现在稍微一看你就知道了,最外层这个divoll,然后这是第二个,然后这是OL,这对应的这个一层两层三层嘛,对吧,三个东西,然后中间这个的话,我再分,那就是力学生这几个字啊,力学生,这不力学生嘛,然后这个得爱好OL啊,对吧?哎,然后这中间再拆成数组,就就是这个。啊,那么中间这个数字就是力点力嘛,力点力嘛,对吧,你能看懂啊,没问题,甚至呢,我把右边给你藏掉,你也能大概给复述出来啊,你也没问题,但是真正第一个想出来的人啊,你会觉得这个人真的是天才啊,真的是天才,但咱们现在一定记住了,就是说不不奢求让大家啊成为天才啊,咱们每一个前端开发工程师,对不能不能成为,但是我们要奢求的是每一个从事前端的人呢,一定要去能够起码去窥探到他背后的这种思想啊,然后甚至更进一步的,你要能手写它,我们一会儿就要带他,带大家手写它。
13:30
对吧,哎,所以说这个呢,就是我们的一个目的啊,是这样子的,所以这样的话你就会发现我们实现master探库,那就有两个事情要做哪两个事情,第一是不是实现模板字符串如何变成tons呀,对吧,第二就是如何把tons结合数据再变成DOS数组,就是这两个箭头,就是第一个事儿和第二个事儿。啊,这第一个事儿和第二个事儿啊,那这两个事儿呢,其实都同等重要。啊同等重要,那所以说呢,这个就是呃,咱们下下节课就教大家手写,但是现在的话想大家看一下这个talks啊,想带大家观察一下这陶S,那怎么观察,其实很简单,咱们来看一下啊,怎么观察这个tos啊,咱们现在写个十十啊。
14:18
诶。这个今天老师输入法有点问题啊,那就是观察一下这个tokens啊,咱们来观察一下,观察一下tons的话,其实非常的简单,就怎么样把那个tons给暴露出来啊,其实非常简单,就是我们要去改一下这个源代码。啊,他这个源代码我们直接拿这个Vs code看一下啊,因为这里头没有加密啊,那这个源代码这块里头东西特别多。哎,东西特别多啊,那这个时候呢,咱们要改一下啊,咱们注意看现在老师这个马in touch这个版本是多少呢?诶,我这里也看不见版本了,大概是四点几的版本啊,那不管你是什么版本的main touch,哎,那么在这里有一个非常重要的函数。
15:00
啊,大家可以找一下,在这个代码的中部,诶,老师已经找到了啊,老师已经找到了。啊,这个函数呢,在第117行,啊这个函数,那这个函数呢,它特别的长啊,叫pass template。哎,它最后在256行这块啊,你的版本可能跟我有点不一样,所以你不一定在256行,但是256行这个函数呢,返回了这么一个东西啊,我们把它存成变量。哎,他其实就是tokens。啊,它其实就是tons啊,我们把它返回。诶把它返回这个talk或者就对吧,我们直接给他在这里输出啊,也就是我们改变一下源代码啊,然后改变源代码改变成什么样的呢?咱们来给大家截一下图。哎,截下图啊,我打开一下截图软件。啊,就是256行啊,这是原来的样子啊,这是原来的样子啊,我们把把这个图给放到PPT上,因为咱们这个课是没给大家写那个word版的笔记啊,我们的所有的教案呢,都写到PPT上,PPT很清晰对吧?哎,PPT这里是很清晰的啊,我们把这。
16:09
去给大家看一下,哎,就是咱们观察一下这个陶刊啊,所以说这个就把256号。我们先写一下,在PPT上写一下,就是把256行这里啊,可能会有稍微的行号出入,对吧?哎,改成什么样子的呢?改成这样子的就是。把它提成变量啊,然后最后返回这个,那这样的话不是可以输出嘛,对吧,那这样的话,我们每次调用这个函数的时候,它等于说都是可以输出的。好,改为啊。我们这个没有给大家提供纸质版的笔记啊,因为PPT老师提前准备出来一些图啊什么的会更加清楚一点,对吧?哎,那咱们这里就是观察这个tons啊好,那这里又有个输出,输出的话呢,这个时候我改为什么要改,你先别管啊,那起码的话咱们能观察到了啊,咱们现在就在这儿,你就可以看一下,比如说模板字符串叫template ST,哎,那这个懒得写了啊,咱们来看一下之前的。
17:09
啊,比如说这个模板字符串吧。好,那这只能用反引号,因为我们要换行啊,就必须要用反引号,这里有换行号,那这个时候我们只要调用render,就是must touch。哎,点render好。然后我们把templatet啊,然后对象这个数据对象我们给他一个空的就行,对吧,然后咱们也不用输出,因为一定要render,它实际上内部机理呢,就会去调用刚才咱们改的这个啊这个函数,它就会掉这个函数,那为什么会掉这个函数那。呃,老师现在先不给大家讲解啊,因为我们后边会去手写它,这个时候你就知道它为什么要去调这个函数了啊,我们最后不是输出tons了吗。对吧,在这儿输出tons了,那这样子一来的话呢,我们实际上啊,它就能输出当前这个模板字符串的tons,好了,我们不说那么多废话了,我们赶紧看一下。
18:03
你看这个talk就就有了啊,就是一个数组形式,那这个数组形式的话,我们给大家啊对着看啊,咱们对着看。你看这个是咱们的模板字符串。对吧,然后这是tokens,咱们来展开看一下。啊,你会发现第一个绝对是text,然后是空换行空空空空ul,没错吧。对吧,是不是与咱们这个是匹配的啊,一个换行符,一个空空空ul到这儿吧,但是后边还有两项018啊,这个018就表示的是它在原字符串中第几位开始到第几位结束。能理解吗?哎,从第零位开始到第18位结束,为什么是18呢?因为这换行符是第零位,然后这里又什么一二三四五六七八九十十十一,数到这儿就是第18位。哎,数到这18,因为它这缩进好几格啊,它这缩进好几格,所以你看这是四个八个12个十三十四十五十六十七,加上这个花盆不是18吗。
19:02
对吧,那这两个数字老师在PPT上是没有给大家显示这些数字的啊,因为实际上这些数字呢,没有不起到任何作用啊,就是什么辅助作用,校验作用它都不起到啊,它就是在这里添加了两个起始作用啊,起始作用就大家不用看这两个数字对吧?诶,然后第二个。咱再看这下标为一的这个地方,那是不是就是这个循环部分啊,下标为三的这个部分就是T,就是这个UR啊,就这块,那你看这块是不是AR这块也是,呃,起始和终止什么的啊,这个不用看,这些数都不用看,然后这里头呢,又嵌套了一个数组。对吧?哎,那这个数组你看就这里,那这个数组为什么长度是九,我可以展开它,我可以展开它对吧,但是我不想展开它,咱们现在自己看一看,为什么长度是九,就是为什么这个tons长度是九,这很简单啊,原因很简单啊,对吧,因为第一个是不是从这个这个就不用看了啊,这个井号已经包在里头了,那第一个是不是就从这个力开始,到这个name幕这儿结束,这是第一个吧,哎,然后第二个就是内幕吧,第三个是不是就这里。
20:04
对吧,然后这里,然后一直到他就找下一个标签啊,是不是在这儿啊。看见没有,这是第三个长度,为什么是九,我们再研究研究,这是第三个,因为它是不论文字什么封闭标签开始标签的,它只要是寻找到下一个双大括号开始,这是第三个,然后这是第四个吧,没问题吧,那这个封闭标签P和这个性别这几个字是不是这是第五个没问题吧,这个三第六个吧,没问题吧,这个封闭标签P和这个年龄是第七个吧,这是第八个吧,哎,然后这封闭标签和这D和这个力是不是第九个呀。看见了吗?就是你能数出来这块是九个token啊,就你就说明你现在已经听懂了,咱们就可以继续往下去弄了,所以大家在看到这里的时候,可以试着暂停一下视频啊,可以试着暂停一下视频,然后把这个九个为什么咱们看一下,为什么这里有九个token啊,为什么这里有九个token你给他看懂。啊,就是其实就是说学这种课程啊,就包括VI源码这种探秘啊,包括这个啊,我们要手写一些它的底层,包括咱们以后咱们可以预告一下啊,咱们以后还会讲什么虚拟节点呀,啊,还有最小量更新呢啊这些东西,那么这些东西其实本质上是什么?就是它是润物细无声的。
21:15
啊,润物细无声是什么意思呢?就就好比你现在吃块牛肉啊,吃块牛肉,你说这个牛肉能吃一斤牛肉,能瞬间你让你体重增加一斤吗?对吧,我说我吃斤一斤肉,那我能体重能瞬间增加一斤吗?不可能。对吧,那它是怎么办,经过慢慢的消化啊,然后经过慢慢的这个蛋白质啊,什么分解啊,然后你就慢慢慢慢的能长体重啊,能把你的脂肪,脂肪转化成什么什么更好的这个这个这个肌肉啊什么的啊对吧?哎,那这是一个日漫长的过程,所以说他这个也是你读这种源码,那你自己的这个水平呢,其实是能够啊,有一个润无细无声的这样的一个一个来慢慢的。啊,这样的一个一个一个一个增长啊,一个增长,所以说所以说你看你把这个九是怎么回事,你数出来啊,你数出来为什么是这是九个,咱们再来看一遍,这是第一个。
22:09
第二个这是第三个到这儿啊,第三个非常长对吧,第四个,然后第五个啊,第六个第七个啊,第八个第九个对吧,没问题吧,展开你看这是对的啊,这是对的啊,这个咱们看看这九项啊,这展开,因为你展开这个实际上是把这一层,那还得再点一下它,对吧,就展开刚才那九层。啊,没问题吧,Text name text name text name text name text对吧,哎,这样子的啊,所以说你看它就OK了,然后name幕的时候,这会有个name啊,是对着这个对着这个name。对吧,哎,然后这块name是name,这是S,这是age啊,这咱们拆分是对的啊,完全没问题。是吧,哎,你就知道了这个tons是什么样子的了。看见没有,哎,就明白了啊,这个好,这是第一个好,那咱们现在再来第二个啊。哎,再来第二个词的,这是二啊,那第二个词的话,我们还是从之前的案例,咱们看一下那个,呃,二维数组吧。
23:08
二位数字就这个爱好,这个咱们亲自观察一下,这个陶侃对吧,哎,就很有意思啊,就是不要去抵触学这些高级的东西啊,不要去抵触,为什么,因为它真的是很很有用啊,真的是很有用啊。好,咱们来看一下,外层是三个ul,然后这部分,然后是杠ul。看见没有,它ul中间那个数组,然后ul,然后这个展开之后,它说是五个,这内部是五个,那咱们来看一看,真的是五个,这是第一个,这是第二个,这是的到这块是吧,哎,到这收纳框之前,这是第三个,哎,然后这里边是第四个,没说错吧,这里头因为它又有一个嵌套啊。它整体算第四个,这是第五个没问题,哎,所以你看这个这五个嘛,并且这个你会发现这里头又有个三个,就这再展开三个,这一个两个三个嘛。你发没发现这很清楚对吧,所以说你更加敬佩啊,这三个你再展开,你可以看见他是非常清楚的text name容text啊,对吧,那你可能现在还是有一些不懂,就说老师为什么你刚才要去改这个马in touch这个东西啊,不是你为什么要去改马touch源码,你要改这个函数啊,这就是大家为什么要跟着老师学,而不是自己闭门倒车的原因啊,就是你如果说自己闭门倒车,自己去琢磨这个库,你上网找一些博客啊,然后你上网去找一些什么有的没的一些那个文字资料,其实说句实在话,不如啊,你就去看啊,看咱们这上硅谷的这些老师们,因为什么,因为老师也是有一些研发的一些过程啊,比如说咱们啊,老师去研发这么一个课程,你可能看总小时是三小时啊,那老师背后可能会付出30个小时乃至100个小时,对吧,可能真的不夸张啊,一天工作八小时,可能要连续研究两两三个星期啊,要去把这个课程给你准备出来,PPT做出来,图啊,给你画出来,对吧,所以说这些东西呢,就是老师给你准备好的,然后你可以瞬间。
25:00
啊,就以最快的速度把这些东西呢。来学会啊,让你能够尽快的站在巨人的肩膀,好了,那咱们就不不再啊多说多说别的了,咱们是不是就开始着手写了对吧?哎,那你现在问题一大堆,就是token是怎么生成的,怎么从模板字符串生成token呢?对吧,这模板字符串是怎么样,模板字符串是怎么生成token的。啊,模板字符串是怎么生成这个token的是吧?诶这是一大堆的问题,然后还有这个tokens是怎么样被数据填充啊,因为咱们现在没测数据啊,你这个数据对吧,没填进去啊,你要填进去的话,这个render是有返回值的,咱们之前不是讲了吗?Render这块能用变量接收对吧?咱能输出真正的那个倒子符串来呀,对吧?那你这个脑子中的问题咱们马上。下一个视频就要给大家手写啊,带着大家手写了啊好,咱们这个视频就到这,然后希望同学们不要呃着急去看下一个视频可以手写啊,不是可以自己去改改马in touch的源码库对吧?诶改改这里,然后自己去观察一下这里这个tokens啊,还是挺希望大家能够完成这个工作的啊。
我来说两句