00:00
Hello,各位亲爱的小伙伴,欢迎大家今天一起跟我来学习虚拟DOM和地步算法这门课程。那么提到虚拟盗墓和地F算法呢,相信各位小伙伴呢,还是有一些了解的,是能够说出一些大概的,并且呢,你可能粗浅的看过一些公众号文章,至少见过这样的图片,你能说一些大概啊,比如你会知道第步算法是实现最小量更新的,然后呢,它会同层比较,不会跨层比较,但是呢,大家请扪心自问啊,你到底懂不懂虚拟Tom和Di算法?你注意啊,这里是扪心自问啊,就是不要狠起来连自己都骗。对,这个时候你可能会说,老师我确实只能表层的了解啊,我略懂一些啊,但并不能说是真正的懂,所以呢,这就让我想起了这个赤壁当中啊这种经典的台词,什么都略懂一点,生活更多彩一些,但是现在面试呢,大家也知道是越来越难了啊,那面试的时候呢,是越来越啊让你造火箭对吧?所以面试官呢,实际上会问虚拟盗墓呀,还有diff呀,是问的很透的啊,所以这就是我们的课程目的,我们这次课程的目的呢,就是能够让大大家真正的彻底的啊弄懂虚拟道和地步算法,何为真正彻底的弄懂呢?就是把他们的底层动手敲出来,而不是只给大家啊演示PPT,只给大家去讲解它的一个流程,而真正的我们要把它的底层啊给动手敲出来,这样的话呢,才能保证你是真正的彻底的能弄懂它啊。那有的小伙。
01:42
伙伴说了,老师我并没有了解过虚拟盗墓和底部算法,曾经你刚才说可能大家看过一些公众号文章,我都没有看过啊,没有关系啊,我们先用最简单的话来介绍一下什么是虚拟倒和地步算法,它在V啊,Vuee这门框架当中到底起什么样的作用啊?嗯,比如现在这是咱们家的一个户型图啊,那咱们家真的很有钱,咱们家这是一室几厅啊啊,一厅两厅三厅对吧?哎,一室啊,三厅啊,不对,这个起居室应该算是客厅,那就是三室一厅啊,说错了,三室一厅,然后一厨一卫,还有一个花园,一个阳台啊,那么现在呢,我们想把我们家改造。
02:25
改造成这样。诶,这是一个什么游戏,这是一个大家来找茬的游戏,对吧?那咱们就要找找不同,这两张图有什么不同,好老师呢,不卖关子了,这两张图呢,其实不同点呢,特别的小,就是起居室这儿大家可以注意看,诶多了一个小沙发,发现了吗?起居室的这个就是咱们的客厅啊,多了一个小沙发,好,然后咱们的卧室,原来咱们的床铺啊是朝东边儿摆的,大家看。但是现在呢,我们把这个卧室的床铺是不是靠西边挪了挪。
03:02
大家有没有发现对吧,靠西边挪了挪,诶,然后呢,电视给它拆了啊,这块原来有个电视,这个电视呢,我们不看电视了,对吧?卧室看什么电视啊,还有一个区别就是这个阳台啊,阳台这个墙咱们向南边移了移,大家发现了吗?啊,这样的话呢,就让这个阳台的面积小一点,然后留了更大的面积给了卧室,所以这样的话呢,我们的家庭的装修实际上呢,嗯,就只发生了这么三个地方的小变化啊,多了个沙发墙往南移了移,然后床铺呢,啊,又往西边移了移。那么这样的话,我们要怎么样完成这次装修呢?最笨最笨的方法大家应该知道。就是我把原来的这个家拆了,我把原来的家全拆了,就全拆掉啊,全拆掉,然后重新照的图建啊,你说老师这不有病吗?哎,效率太低,代价昂贵,没错,因为你把原来的家呢,拆掉再重建,确实能建成新家的样子,但是它不是一个最小量的一个更新。
04:10
所以我们要的呢,就是一个diff diff是什么呢?Diff啊,实际上就是different啊,就是说啊。叫区别啊,这样的一个单词的首字母,那实际上呢,它在计算机领域呢,就表示的是最小量更新的这样的一个算法,所以说呢,DF呢,它就能够啊自己去比对出多了个沙发多了啊,阳台要往这边移,然后这个床铺要往西边移啊,这个是一个最小量的一个施工的过程,那这样的话,你就会发现它的代价是不是比较小,然后呢,也不昂贵啊,就会变得啊性能呢就比较优化,然后也比较便宜,所以他在我们的VIVO开发当中呢,是啊,也不是说view开发,就是view底层是很关键的,因为view会面对这样子的一些事情,比如原来有一个div的结构啊,它的类名叫box啊,里头有一个H3和三个,呃和有三个力的ul,对吧,这样的一个结构啊。
05:04
好,牛奶,咖啡,可乐,现在呢,我们要给它变成多一个SPA,诶,这儿多了一个雪碧。对吧,那这个呢,可能是在咱们view的啊,项目当中会经常遇见的,对吧,比如说这个SPA用V-if指令被控制上述了,所以这块就多了一个span,然后这个力呢,可能是数组中push了一个心像,所以这个力标签呢也上树了。那么这个时候呢,诶,VI就面对了一个难题,我总不能把这个家拆了,然后把这些新东西都放里头吧?啊,那你说老师计算机的效率可比我们人类的施工队大,对,但是面对更大型的DOM啊,那可能代价呢,还是有点过于昂贵啊,就是说这个效率还不是更高,所以我们现在呢,就需要使用地步算法来进行精细化的比对,从而实现呢,最小量的更新,就是我们不要去拆掉整个加啊,H3和这ul不要动啊,因为它根本就没有变化,然后我们要把这个SPA插进来,把这个雪碧插入进来不就行了吗?
06:10
所以呢,这就是一个递付算法的啊,一个啊核心。来就是说他,那咱们这节课肯定咱们的课程就是不是说光介绍第步算法的思路,而是真正的让你理解它,并且呢,能够动手写出来这个第步算法啊,你只要能动手写出来的话,那么你就真真正正的是了解了这个知识啊好,那到这里呢,你就大概的了解到了什么是地步算法啊,就是地步算法呢,可以让咱们的盗墓呢,以最小的代价来进行更新,那虚拟盗墓是什么呢?就是地步算法,咱们说明白了啊,大概说明白了,当然它里头的内涵还是很丰富的,我们后面的课程会讲,那么虚拟DOM是什么呢?虚拟do其实也很简单,就是。这是咱们的倒结构对吧,那现在呢,处理它的话呢,会比较复杂,就是计算机的啊内部。
07:01
那这个时候呢,我们就把这个结构变成一个JS对象啊,那么这个GS对象大家看这是一个如假包换的JS对象,对吧?哎,那这个JS对象咱们可以看一下啊,它里头呢,有三个属性,Cell data和children。诶,这个cell呢,就表示的select选择器,就表示现在这是一个div啊选择器,然后呢,他身上的data data表示啊一些额外的数据,数据呢有类名,类名里头有box这个属性啊,True就表示有这个属性,对吧,有box属性,然后它的children属性是个数组,数组当中呢是两项。就表示这个div是不是有两个子元素呀,有一个H3,有一个ul啊。发现了吗?有一个H3有一个L啊,所以这块有两个这个子元素啊,这是一个红框对吧,然后老师这个笔能换颜色啊,很神奇,咱们来看一下你看。是吧,哎,这是个黄框啊,这样子的,那你就会发现在这个红框当中又是cell data text是不是跟外层是一样的,然后这个黄框当中呢,也是cell data children啊,就是啊,对不起,刚才这是text text表示里头是文字,然后children呢,就表示它有子元素。
08:13
那么很明显这个H3呢,它现在是不是啊,没有子元素,它只有文字啊,对吧,它T属性,然后呢,这个是ul这个选择器,它的data是空,因为它没有什么属性啊,H3也是空,没有什么属性啊,Children又是三个小对象,这小对象呢,又是cell data text cell data text cell data text。这个JS对象实际上呢啊,就是用数组啊对象的这样的形式,这是对象吧,这是数组吧,这又是对象吧,这又是对象吧,这又是数组吧,这又是对象吧,对吧?哎,用这样的层级嵌套的形式呢,就表达了一个DOM的结构,那么它在JS处理的时候是不是会更加方便一点啊,对吧?所以它呢,就叫做虚拟DOM。到底什么是虚拟盗墓,什么是地步算法啊,如果你啊,讲给不懂的人听啊,也十分钟也就大概能够介绍清楚他们的一个呃,表层的一个用途,对吧。
09:07
但实际上呢,现在咱们大家说过了,面试官会问的很深很深啊,会问你啊这个。递步算法的一些优化的策略呀,然后还有一些更新子节点的一些策略呀,所以说呢,咱们现在就必须要把它给学扎实好,我们来看一下咱们的课程内容,首先我们会去介绍一个东西,叫做na bottom啊,Bottom这个单词呢,很奇怪,它是一个瑞典语的单词,好,它具体是什么东西呢?它就是咱们的虚拟盗墓啊,第五算法的一个鼻祖啊,特别有名的一个库。好,然后会介绍这个s bottom的H函数是如何工作的,然后是diff算法原理,然后最后我们要给大家讲解手写diff算法,那么呃,也就是说我们会先去介绍宏观背景,然后呢,先学会怎么用,再学会它的底层激励,最后呢,手写它彻底掌握它,我们是一个循序渐进的一个授课的一个啊,节奏好,那么学习这门课的话,它难不难呢?说老师我就会一些view啊,然后我现在为了面试,能不能听懂您的课呢?是能的。
10:09
我们来看一下学习前提,学习本课程的知识储备,前提呢有四条,第一要会view啊,VIEW2和VIEW3呢都可以,你说老师我就会一个,当然可以啊,你说我就会U2也行,没问题,你说老师我都会,那太好了啊。然后呢,要简单了解外派和外派DV server,只要简单了解就可以了啊,知道这两个东西是干嘛的,外派呢是提供模块化这样开发打包功能的,外派DV server呢是提供咱们代码热更新对吧?哎,可以让咱们的这个呃呃,这个JS可以在这个8080啊网页上进行调试。好,第三个呢,是要简单的了解tap script啊,那么我们会看TS版本的呃,源码,但是我们会去写这S代码,也就是说我们是看TS写JS,所以如果不是特别了解TS也没有关系啊,老师会讲解每行代码的意义,呃,如果大家对TS就特别有兴趣,那大家也可以去看一下咱们上硅谷的免费发布的啊,最新版的tap script的教学视频在B站上啊,还有我们上硅谷的公众号上都有相关的视频链接啊好,那么实际开发经验是不限的,应届生的也可以学习,咱们所有参加培训的同学对吧?比如说在临近毕业的时候呢,都是可以来学习这套课程的啊,没有任何的问题,这就是这节课课程简介的全部内容啊,然后啊,希望咱们合作愉快,对吧?诶,咱们能把知识真正的学到位,然后能够升职加薪,好,咱们从下节课开始正式开始介绍。
11:45
干货。
我来说两句