00:00
各位同学大家好,欢迎大家今天跟我一起来学习密源码探秘系列的一门新的课程。我们今天呢,要来一起研究ast抽象语法数。Ast抽象语法数呢,也是面试的时候非常爱考的一块内容啊。我们首先来说一下抽象语法数到底是什么?在开发view的时候呢,我们要去使用view提供的模板语法。包括我们会去使用一些指令,比如v for v-model v-if等等。也会使用双大括号这样的一种模板标记。那么view的底层呢,就会帮我们把它啊编译成为正常的HTML语法,比如说数组是牛奶、咖啡、可乐三项,它就会进行一个循环,然后双大括号呢,也会去对这个数据进行一个填充,那么如果我们要去直接把模板语法编译成正常的HTML语法的话呢,那么这个时候呢,它的算法编写难度呢是比较大的,所以这个时候呢,人们就会借助抽象语法数来进行周转,也就是说模板语法呢,并不是直接变成正常的HTML语法的,而是它要通过先变成抽象语法数,就是ast,然后再把ast变回正常的HTML语法。
01:28
啊,那么这个呢,就是一个啊,起到一个中间过渡的这样的一个过程啊,那么让编译工作呢,就可以变得更加简单。那么抽象语法数到底是什么呢?它的本质上呢,实际上就是一个JS对象。比如现在呢,我们写的这个有V-for指令的这样子的一个vuee的一个模板语法,那么在vuee眼中,实际上你写的东西呢,不是DOM结构,不是HTML,而是字符串,这个点一定要注意啊,就是view,它会以字符串的一个视角来审视你书写的所有HTML结构啊,它会啊,你看老师为了证明它是一个字符串,已经把这个嗯,五颜六色的代码已经给它变成黑底白字了。
02:18
哎,等于说这块呢,就是一个字符串。然后V的底层呢,就会一个字符一个字符的去审查啊,就是啊去遍历去浏览你的这个啊代码,它现在是纯的字符串,然后去给它组建成这样的一个JS对象啊,解析为这样的一个JS对象。大家可以发现最外层呢,它有四个属性,Tag表示标签名,诶这表示的是这是一个div标签,第二个呢,它是at t RS这个属性,这个属性实际上是英语attribute ATT r b啊这样的一个单词,Attribute attribute呢表示的是属性,哎,那所以说我们把这个at t RS呢,我们就念成attrice attrice啊,因为它是attribute属性这个词的前头啊,Arice,好,那么atrice是个数组。
03:15
数组里面呢,就告诉你我有class属性,它的值呢是box。诶,你看这是不是class属性,它的值是box,那也就是说如果这个div呢,现在身上再有一个ID属性。啊,那么这个时候这个are啊,这个数组当中就会有另外一个项对吧,对象它的name属性就是ID6属性呢,就是它的那个ID。那你现在就会发现,等于说这个右边是什么东西,JS对象,它是不是就是一个JS版本的HTML结构啊。左边的这个HTML结构现在呢,被变成了一个JS版本啊,因为JS版本实际上你会发现它更加的便于被咱们的这个呃,分析它的层次,分析它的指令对吧?这样子的好,咱们继续往下看,Type表示一,Type表示类型,这个一呢就表示当前这个节点是一号类型,一号类型就表示的是普通的节点。
04:13
如果是文字的话呢,可能type属性是三啊,我们一会儿会遇见,然后接下来就是children属性,为什么会有children属性?因为你也猜到了,这个div标签内部是不是内嵌了,诶,它有子元素啊。那么所以它的children准数组呢,长度就是二,这是一个,这是一个。啊,你很很容易看见这个tag是H3,这个tag是ul对吧,那么div的children有一个H3,一个ul。好,然后这个H3这个对象呢,它又有actress啊,又有T,又有children属性,这个呢也有t actres Type Children。对吧?哎,那这样的话,咱们再看actres呢,它name是class value是title,你看这不是跟它一样吗?好,然后这个children呢,它是text,我是一个标题啊,表示这里就是文字了,类型呢是三三呢,就表示它是一个文本节点,它不是一个普通的节点,它是一个文本节点。
05:13
然后再看这个ulul的actress啊,Actress啊啊ress吧啊这么念啊,那这个属呃属性它是空,就说明它身上标签是没有属性的。哈,然后呢,它也是一号类型,然后它的呃,Children准你现在就会发现它呢,是不是就是一个移项的数组,因为这里头只有一个子元素啊。并且呢,他就把这个me for item in a key是index给它拆成了,你看me for it in a key呢,是index。对吧,它就换成换成了I属性,For属性和K属性,把这几个元素都拆出来了啊,都进行词法分析拆出来了。好,那么。
06:00
本质上讲这个力元素还是有子元素的啊,也就是说这个数组不是空,但是咱们为了PPT的这个,呃,PPT的咱们现在不是没有空间了吗?所以这块数组老师就留空了,那按理说这里并不是空啊,大家注意,那么现在这个用JS来表示啊,咱们这个HTML结构的东西呢,实际上就是抽象语法数,它的英语呢,叫做abstract syntax tree啊,Abstract syntax tree抽象语法数取它的三个首字母呢,叫做as。那么实际上这个抽象语法数这个东西呢,并不是vuee啊,就并不是先发明的,哎,那么很多的地方,比如说啊编译原理啊,就是比如说这个啊,咱们的代码编辑器对吧?哎,来编译我们的代码的时候,都要有抽象语法数的接入,再比如说背啊,大家知道背这个东西吗?BA。
07:00
对吧,BA在可以把这个普ES6编译成ES5这样子的啊,它就可以去翻译,比如说箭头函数,它就可以翻译成普通的function这样的函数,那么实际上BA呢,就是要先把你这个箭头函数这种东西变成抽象语法数,哎,变成JS书写的这样的一种语法结构,然后再转成这样的啊,再翻译成这样的啊,Function这样的形式。所以说你就会发现抽象语法数呢,它服务于什么?就服务于一件事,就是模板编译,大家一定要记住,就是只要我要翻译什么东西了啊,把一种语法翻译成另一种语法,那这个时候呢,就要借助抽象语法数,我们这里不就是翻译吗?把view的模板语法翻译成啊普通的HTML语法啊。那么就要借助这个,呃,Ast。那么这个时候同学们就会问一个特别重要的问题啊,就是抽象语法数和虚拟节点到底有什么关系?啊,我们在之前的上硅谷的公众号上,还有哔哩哔哩上啊,B站上我们都已经发布了啊,咱们之前的密友源码探秘的一些相关课程,我们也讲了虚拟节点这个课啊,那么虚拟节点和抽象语法书到底有什么关系,实际上是在面试的时候,面试官也非常爱问的一个问题。
08:18
啊,那么他们的关系其实非常的简单,就是模板语法会变成抽象语法数,而抽象语法数最后呢,不会变成虚拟节点,而是会直接变成渲染函数,这个大家一定要记住,就是我们在虚拟节点那节课啊,大家一定要记住。啊,虚拟节点那节课当中不是讲了一个H函数吗?H函数怎么用来着,我们可以在some LA当中随便我们去写一写啊,咱们看一看咱们H,比如说这是div,然后这是它的对象的属性,对吧?哎,对象的属性,比如说它有at ts属性,然后它有这个class。啊克class name吧,哎,比如说它叫box属性啊,它是一个啊这样子的,然后它的内嵌的节点呢,又会变成H就是数组,然后里头又会嵌H函数。
09:09
啊,如果你好好的听过咱们抽那个虚拟节点那门课啊,没有听过的同学可以去找找一下听一听对吧?啊,这是我是一个标题啊,然后这边又是一个H。H的话,这边是ul。啊,这边是ul,然后这个ul可能内嵌的话,又是一个数组,数组里头可能又是H对吧,它就会变成这个,那么抽象语法数,实际上它就呃会生成H函数。而H函数呢,大家注意啊,它里头是不含有指令的啊,H函数是不含有令的,比如说这里头啊该牛奶咖啡哎,然后可乐对吧,或者说是啊雪碧啊,牛奶咖啡雪碧啊,实际上都是已经呃没有指令了,它已经变成这种H函数,普通的H函数了啊,那它等于说是抽象语法柱的中点是H函数,大家一定要记住它会变成H函数,那么H函数的执行呢,会变成虚拟节点,虚拟节点呢,经过diff啊,或者说经过patch。
10:13
哎,它是不是就会在界面上进行显示啊,那也就是说虚啊,抽象语法数这个东西呢,是不会进行递FF的啊,也就是说diff是用虚拟节点递FF的,并不是用抽象语法数来进行递FF的,然后抽象语法数不是直接生成虚拟节点啊,这点一定要注意,抽象语法数它是生成渲染函数的,一定记住抽象语法数最后生成的是类似于这样的就是H函数的一个调用的一个语法,而H函数我们实先已经编辑好了啊,也就是说在现在数的啊数垂直的这个虚线框当中的内容呢,我们已经在未有源码探秘之虚拟节点和地步算法这门课程当中呢,我们已经讲解完毕了。
11:00
啊,就是在这个,呃,这门课程当中,我们已经把什么是渲染函数啊,H函数怎么手写呀,然后怎么生成虚拟节点的呀,虚拟节点怎么递复生成界面的呀,对吧?哎,这块是diff啊,怎么生成啊,Diff算法派CH的一些方法对吧?哎,都已经讲的很清楚了,那么这节课的内容实际上就是这个啊,模板语法怎么样变成ast的,然后ast呢,就怎么样变成渲染函数的,这个就是本课的一个教学内容,那这个课程的内容是哪些呢?首先我们会去讲一些相关的算法储备啊,然后会去讲ASD的形成算法,那么实际上在我们之前的一些课程当中呢,包括我们的密友源码探秘的第一节课啊,老师给大家去讲过一个master touch。哎,Must touchch这个东西啊,哎,那么must touch实际上也是一个模板引擎的一个呃鼻祖,然后当时老师讲了讲它到底是如何去进行一个就是呃模板的一个编译的,那么为什么当时要讲master touchch vuee底层其实用master touchch的这个这个思想用的很多啊,但是呢,马such那个课我们当时讲的时候,有一些小伙伴就说老师能不能把相关的算法帮我们独立的讲一讲,就是不要结合利用去讲,能不能独立的讲一讲这里面的算法啊,那这里的算法有哪些呢?这里面算法大概啊,比如说呃有指针,哎,有一个指针思想,好,然后这里的算法还有哪些呢?还有占。
12:29
啊战这个思想占,哎占就是stack啊stack好,然后这里面的思想还有哪些呢?对,还有递归。啊递归啊,老师是拿鼠标写的字,所以比较难看,所以这个相关算法储备呢,还是很关键的啊,也算是咱们这节课的一个,呃,点睛之笔,就是能够帮大家把这个算法给它储备起来,对吧?然后去讲解ASD的形成算法,好,然后会手写ASD编译器,然后手写文本解析功能,还有ASD的优化,还有将ASD生成H函数,总体而言呢,是循序渐进的这样的一个过程啊,总体而言是循序渐进的一个过程。
13:11
那么这门课的学习前提呢,就是知识储备的前提是一定要会view有啊,VIEW2和view三都可以,那么咱们这部分的内容实际上模板解析啊,V3和V2的变化是不大的。简单了解外派和外派DV server啊,这是一定要有的,实际开发经验呢是不限的,应届生呢也是可以学习的。好了,我们这节课呢,介绍了咱们的课程的一些基本情况,包括ast是什么,我们从下节课开始呢,就开始正式的介绍干货。
我来说两句