00:00
这节课我们来学习bottom简介和测试环境搭建啊,Bottom它实际上是呃这个地步算法的一个鼻祖啊,也是虚拟DOM的一个鼻祖,那我们VE当中实际上是借鉴了这个呃大包姆库的这个源码思想的啊啊所以说我们要学习虚拟do和地步算法是绕不开bottom这个库的啊呃,那bottom这个单词看上去就比较特别的奇怪,对吧?哎,那它实际不是英语的单词啊,它是瑞典语的单词啊,单词的原意是速度,这个单词实际上正确的读音叫做那do DOM啊,这一看就是一个北欧的一个什么语言的这样的一种发音,嗯,但是咱们都是粗人大老粗,就拿这种汉语拼音去读它啊,S拿ball得了,那么比较有意思的是单词的后缀是do啊,Do,大家应该知道文档对象模型就是咱们操作啊,页面上的节点呢?
01:00
这些东西就是盗M嘛,所以这个STEM这个名字,我觉得作者是有一些小心机在里面啊,他可能就是说是一个非常有速度啊,高效的去操作盗墓的这么一个东西,对吧?但我也不知道他是不是真的有这个心机啊,此star bottom的官方GI呢,已经给大家显示在屏幕上了啊,它就是gi.com啊,Bottom bottom啊,好,我们现在可以看一下这个官方GI去。那么时至目前呢,啊,STEM呢,已经有了8300个星星啊,是非常非常高的了啊,那么在这个呃,他这个简介当中,大家可以看一下,一句话简介叫做a virtual DOM library with focus on simplicity Mo libraryity powerful features and performance,哎,就是说它是一个虚拟盗墓的这么一个库,那么它的目标呢,就是构建啊,就是让这个东西变得简单,模块化,性能很多啊,就是呃,特性很多,并且是高性能的啊,这样的一个虚拟盗墓库。
02:00
那么大呢,这个东西呢,还是非常的有意思啊,它里面的核心源码呢,只有200行啊,还是特别特别精彩,但是呢。他这200行代码呢,可以说是非常非常的啊,优化程度很高,就是它这里边的一些地覆算法呀,还有一些它的一些呃倒是呃子节点的更新策略呀,实际上是非常非常爱被面试官就是提问的啊,面试官会提问的,所以说非常值得咱们去学习。好,那么bottom呢,大家一定要注意啊,它实际上是用TS写的啊,就是咱们在GI上面的bottom源码呢,是用TS写的,大家这块一定要注意,而GT上呢,是不提供编译好的javascript版本的。啊,这个什么意思呢?就是说我们在它的官方G上,咱们可以看一下啊,它的源码在这个SLC。好,Package。诶,这里面你看都是TS结尾的这些文件发现了吗?所以就相当于什么呢?相当于type script这个东西呢,是如假包换的啊用呃,不是大包,那这个东西是如假包换的,用type script去书写的,对吧?所以GT上呢是并不提供好编译好的JS版本。
03:14
那么我们不可能说自己再去下载它的源代码啊,然后再去编译为TS啊,因为它这个源码的,它这个里头实际上是提供一些编译工具的,对吧?哎,提供一些编译工具的啊,可以让你去啊把这个TS编译成JS,但是这样太麻烦了对吧,太烦了啊,所以这个时候呢,我如果想直接使用build出来的,就构建好编译出来的JS这个版本的bottom库,那应该怎么办呢?对,就可以直接从NPM上下载。也就是说NPM上下载的这个东西呢,就是编译好的JS版本的star bottom,而GT上的star呢,是TS版本的,明白吧?哎,那你克隆那个G的仓库是没有意义的,因为你克隆之后呢,你还得再去编译成JS,那你是没有意义的,对吧?哎,咱们现在是要研究它的一个底层,所以这个时候呢,我们可以去看TS,但是用它的JS,明白吧,哎,看TS用JS这样的话,可能大家学习的,哎,压力就小一点啊。
04:15
所以这块就写了,就是说学习库的底层的时候,还是要建议大家阅读原汁原味的TS版的源码,明白吧,哎,这样的话最好带有库原作者的一些注释啊,啊,事实上是有的,一会儿老师告诉你怎么怎么办啊,这样对你的源码阅读能力呢,会有很大的提升。好了,那咱们现在呢,就呃,话不多说,我们现在呢,就赶紧新建一个文件夹,这个文件夹呢,咱们就叫study bottom bottom啊叫study bottom OK。好,或者叫study virtual啊,还有那个地步算法都可以啊,就是比如说叫study virtual啊,就是无所谓了,就叫study吧啊好,那么咱们进来之后呢,首先第一步肯定就需要创建身份证。
05:01
这是老师的一个非常漂亮的一个终端啊,好创建身份证NP minit,把身份证创建好。身份证创建好之后呢,我们就可以安装bottom了。哎,是拿保。好。N mi表示安装依赖对吧?杠大D呢表示的是,诶,不是杠大D,应该是杠大S,因为杠大D表示的是开发依赖,杠大S呢表示,哎,杠大D表示的是项目的那个开发时候的依赖啊,就是DV dependenceency对吧?哎,而杠S呢,是项目的真正依赖。好大啊,要拼好,我们给它装上。装好之后呢,我们啊不着急书写测试代码,我们先看一下装的这个node models里面是什么东西。咱们现在来进来看一下啊,Mode,那现在这个字可能大家看的比较小,所以我们给它文件夹比较,我们给它放到。Vs code当中啊,咱们来看一下这左侧列表数就比较清楚啊,那现在的话你会发现实际上呢,你下载好的那呢,它也配了TS版的源码。
06:10
发现了吗?就是它这里头是两个文件夹,Build和SC,咱们还可以在文件夹中看一下,你看它是两个build和src,实际上src里边呢,依然提供的是TS版的代码,也就是说这些代码是跟咱们刚才G的上的那些源码是一样的,但是呢,它又送给你了一个build啊这个文件夹,Build文件夹当中的代码呢,你看是不是都是JS代码呀?对,都是JS代码,那么每个JS代码呢,他都无一例外的提供了d.TS这个代码,那么如果你了解TS的话,你是知道这个点d.TS是干嘛的,哎,它实际上是啊,在把TS变成JS的时候呢,它需要额外留一个文件啊,来啊,保存这个TS文件当中的这些文件的具体类型啊,就再把类型再标一下。
07:01
哎,这样的一个文件啊。好,那么实际上他现在呢,就有两个文件夹,一个build,一个src,那S那bottom这个时候他的身份证当中有非常重要的信息哦,咱们看一下bottom的身份证啊,就是我们刚才下载的NPM因道啊,装的这个s bottom当中,身份证当中有非常重要的信息哦,什么信息非很重要,就这个experts啊,Experts大家一定要注意啊,这个experts呢,它是从web派五开始支持的啊,什么意思呢?就是大家可能有点懵啊,就是挖派的五代,那么挖派四代是不支持的,什么意思呢?就是说。在挖派五的情况下,如果我引用了initt这个包啊,那么它实际上呢,就会自动去读取build的文件夹中的package文件夹中的init.js文件,发没发现是build的文件夹,是这个build的文件夹而不是src文件夹啊,这就证明了我们一会去写测试用例的时候呢,它实际上是给我们打包打的是JS文件,而并不是TS文件,对吧?那?
08:08
我们引的时候呢,是不需要写这一串的啊,不需要引这一串的,一会儿我们写测试用例的时候,咱们可以看一下测试用例啊,就是测试代码在底下,在这个GDHUB官方网页的这个底下啊,我们可以看一下这里。你看那一上来就要引了好多东西,发现了吗?对吧,哆来咪发唆拉啊六个,哎,那这个时候呢,它的地址是这么写的。啊,地址是这么写的,那你就会发现实际上它在node modus中的star bottom当中是并没有init这个文件夹的,你看没有。那么它怎么能完成引入呢?哎,那实际上刚才老师已经告诉大家答案了,就是在挖PE5代啊,一定记住是VAPE5代啊,所以一会一定要装8PA5哦,它的时候呢,这个时候它就会自动去认experts这个这个东西。
09:04
啊,那这样的话,你引的是啊,这个叫bottom init,它就会自动去寻找这个文件。对吧,哎,就相当于它会自动的去寻找这个文件啊,就是init,它会自动寻找这个文件,同样的你引的这个啊modus class,大家注意看modus class对吧,在这儿呢,它就自动引的是这个文件,就相当于这里呢,就写了一个地址的别名。啊,所以这个一定要注意,只能挖派五来处理啊,好了,那我们,呃,刚才啰里吧嗦的说了什么事呢,其实说了一件事,就是你要用NP mi-D装它。对吧,老师的操作其实就一个就是NPM杠大D把它给装好了,然后老师就稍微给你们讲了讲,这里面的一个层次,就是SLC里是TS,然后呢,Build里呢是JS,哎,然后一会我们一定用挖帕五去打包,要不然的话它不会读那个TS文件啊,我们继续来搭建它的一个测试环境啊,咱们来看一下大包库呢,是盗墓库啊。
10:04
啊,盗库大家能理解,就是说它里面是有界面的,对吧,我可以做一个div啊,做一个H3标签啊,所以它不能在node JS环境中运行啊,那这个时候怎么办呢?对,我们就需要用va派和八派DV server这样的开发环境。啊,Wapa是构建工具外派DV server呢,就是可以提供8080这个虚拟端口对吧?好,那么好消息是呢,不需要安装任何loader,所以这个开发环境非常好配啊,但是这里有一个大坑啊,大家一定要注意,就是挖PA1定要装五不能装四啊,你这个挖PA必须装五不能装四,因为蛙派四是没有读取pers这个能力的,咱们刚才老师也详细的给大家讲了,就是呃,咱们S当中呢,是提供TS和JS的,那么它里头有一个别名就相当于对吧?诶,路径有一个别名,所以它别名都写在s experts里了啊,你一定是要装五啊好,那咱们现在就装这样的版本,外派装五,外派S装三。
11:05
啊,外派DV server也装三啊,那么外派DV server最新版本也就是三。哎,所以就这么装就行了,好,那咱们现在就把这句话复制到咱们的这个控制台中啊,好,复制到我们的控制台当中,嗯,他说。多行文本粘啊,哎,它实际上这块包含了一个换行符,PPT上粘过来是吧,它自动帮我们按回车了啊挺好。这样还不用打回车了,好在装依赖的过程中呢,我们也不要闲着,对不对,装依赖的过程中我们就可以去干嘛呀,对,就可以去创建ma派点com.JS文件。对吧,哎,就在这里呢,去把这个挖pad配置文件配好,那怎么配好的话呢,老师实际上也背不下来,那我们这个时候就可以去挖pad官网。对吧,哎,从这个拉pa.js官网啊,然后来照着配置啊,照着配置就可以了,他这个首页上就有这样的一个基础的一个骨架。
12:04
哎,那这个NT垂就是入口,入口,我们把这个入口创建出来,是src文件夹中的index.js文件,我们都给它创建出来啊,把这个文件就给它创建出来了。好,然后这个呢是出口,出口的话,这个路径咱们尽量写public pass啊public pass public pass表示的是虚拟打包路径,虚拟打包路径就是说咱们这个文件夹不会真正的生成啊,真正生成。对吧,而是在8080端口啊,虚拟生成,哎,咱们一会儿可以给大家看看到底什么叫public pass啊,我们把这个路径叫做虚拟。啊,然后file name呢叫做BS,这个叫文件名,这个叫打包出来的文件名。哎,就OK了,Mode不用配啊,Mode是四代vapa,四代要配mode,现在不用写mode啊,Mode不用写非常方便,那这个时候要去配一个DV server啊。
13:06
DV server DV server这个老师能背下来PO80,八零表示端口号,端口号,然后还需要配一个静态资源文件夹,就是静态资源文件夹,静态资源文件夹的话呢,我们就管它叫content base啊,3W就可以了。哎,然后创建一个3W文件夹。这块啊,大家照着做就可以,大家照着做。然后3W里头呢,我们创建一个in大x.HTML。我在这里就可以写一个你好。OK啊,很简单啊。对吧,我们把自动保存打开啊,这样不用按保存按钮了,好然后还需要干嘛呢?应该不用干什么了吧,静态资源文件夹也有了,端口号也有了,对吧,虚拟打包也有了啊OK,哎,然后这个时候我们把身份证这里头scripts啊这块呢,咱们加个DVDV呢,这里边书写一个挖派的DV server。
14:04
哇派DV server。这样给他去添加上,这样的话,一会我们用n PM run DV命令呢,实际上跑起来的呢,就是挖派DV server这个命令啊,那么它实际上就会去读取这里面的端口号,8080端口号,对吧,然后也会去读取这个静态资源文件夹,3W文件夹。啊,可以去读取8080端口号,然后也可以去啊,创建这个静态资源文件夹,这个3W都是可以的。没啥毛病对吧?好,那咱们现在呢,怀着激动的心情,我们就可以第一次去打包了啊,依赖装好了,依赖装好了,我们可以看一下,诶,一个dependency啊,这是打包弹,三个dependency啊,马派马派zero加server啊。全局杠G不用装东西啊,杠G不用装东西,可以直接跑了NPMDV。啊,应该可以跑了,看看有没有bug,诶有bug,他说public可能拼错了,他说你这里有一个不知名的属性啊,我们看一下怎么回事。
15:06
啊,这果然拼错了,对吧,叫public pass。啊,这里果然拼错了,多了一个H。好清屏,然后再重新打包。清屏重新打包啊。好了,那么这块我们就打包成功了,打包成功之后,我们看一下8080端口啊,咱们看一下你看是不是出来了。这个你好是什么?应该有印象吧,对这个你好是不是就是刚才我们的3W文件夹当中的index.html文件啊,对吧,那他虚拟打包的那个文件在哪里在。虚拟帮里对吧,是不是在这个里头啊,为什么在这个里这个文件呢?因为这个文件就是我们的public pass啊,它规定的是这个文件名啊,不是这个文件夹的名字,然后帮到点S,那么这个文件夹它没有真正的被物理生成。
16:01
啊,就是它没有真正的被物理生成。这个大家能理解吗?就是物物物理的物物理生成是没有没有物理生成的啊,咱们写一下就是不会真正的。物理对吧,哎,生成的。它不会真正的,它只是虚拟生成,它生成在这个端口里了,而这个文件并没有真正的生成啊,这个大家要明白。那所以说我们这个HTML文件呢,它就需要去引入谁呀,是不是去去引入虚拟里的b.JS文件。对吧,他就需要去引入虚拟里的b.JS文件这样子的。啊,它就需要去引入它哦,那这样的话,你看我们现在在这个index,这比如说我们现在去alert一个123保存,你看是不是就弹出123了。哎,为什么,因为你这个页面它是不是引入了这个帮点JS呀。引入了邦豆点JS呀,对吧,然后你引入了邦do.js那这个时候它实际上就是在这里代码吗?它会从这个s RC inex X开始打包吗?咱们刚才生这个配置清单不是写了个入口对吧?开始打包啊,就开始了啊。
17:14
好了,那这个配置环境就基本上配好了啊,就基本配好了,所以好消息是不需要安装任何loader,为什么不用安装任何loader,不用装ts loader啊对,因为我们一会儿。读的是它的JS版对吧,就是编译好的NPM上下载好的是JS版,我们当然不需要安装ts load,要不然安装ts load太麻烦了,对吧?好,那么接下来的话,我们要做的任务呢,就是要跑通G首页的DEMO程序。啊,就是我们的GI的官方GIHUB啊的官方GIHUB在这就刚才这个网址,哎,在中下部实际上就有一个。示例程序,这个示例程序呢,它很乱对吧,这里头代码,但甭管它乱不乱,我们直接复制,哎,我们直接复制它,我们一定要能跑通它对吧?哎,跑通它才行,那这时候我们就复制它,复制它之后呢,粘上来。
18:08
好,我们把自动换行打开啊,代码看上去别太乱,粘上来好粘上来之后咱们大家注意看,咱们刚才老师解释了,就这个地址只有在8PA5是能够被解析的哦,就这个地址是WE8派五代才能被解析的,四代是万万解析不了这个地址的,四代会报错,你要不信的话,你用四代试一试对吧?好,那这个时候你看老师这个没报错,他就能跑,这个时候咱们这个官方DEMO就能跑起来,但是一定要注意啊,他一定要放一个这个container这个盒子。一定要放一个ID为container的盒子,因为他的这个DEMO当中大家可以看见,对吧,它实际上啊,官方案例当中,它是读了一个container这个容器,好,那我们现在就要把这个容器给放上去啊。这个是必须要放上去的,Div container,诶,它怎么展不开了,那咱们就div ID等于container啊。
19:02
好了。好,然后这个时候呢,就应该能跑了,刷新没出来,没出来的话啊,报错我看看啊对,因为官方DEMO这块有一个叫sum Fn的一个函数。啊,就是说点击的时候,它这个函数没有定义出来。对吧,所以这个函数呢,咱们大家可以随意的啊,用一个function t一下,然后这块有一个another handler哎,也用一个function t一下,当然箭头函数也可以对吧。哎,就意思一下得了。好,这样的话它就出来了。啊,就出来了,出来的话一堆乱码,什么this is no italic type,什么什么什么什么破东西,那这是啥意思呢?别着急,我们下节课讲解,我们下个视频来进行讲解啊,实际上这里呢,已经用H函数创建了虚拟节点,对吧,然后呢,又用H函数创建了新的虚拟节点,然后这里呢,还进行了DF。啊,还进行了一个递付啊,递付算法。是这样子的,还进行了一个diff啊,所以呃,这个呢,咱们就一会儿咱们再去讲解啊,一会儿咱们就去,就是呃,再去看他干嘛,但是不管怎么样,这节课的目的达到了,就是我们的环境达好了。
20:11
哎,咱们复习一下,咱们到底经历了什么啊,首先第一步我们肯定要创建咱们项目身份证,然后呢,要用NPM把拿包那么装上,要把它装上。好,Bottom装上之后呢,咱们当时看了看那bottom的那个身份证,就是说它里头有别名对吧?啊别名呢,指向了JS文件,而不是TS文件,所以这就说明什么呢?这就说明我们一定要用star,呃,一定要用八派五,而不是四,对吧,只有8PA5能认识这个别名,这个大家应该是能听懂的啊好,那所以我们装了哇派五,哇派DV serve3和外派C3。啊,然后把这块呢一顿乱配对吧,诶大家可以直接用老师的啊,因为这些代码都会免费发给你们,然后呢,啊,也可以照着老师这个配,增强一下动手能力都是可以的。
21:02
好的,然后这边的话,我们是官方DEMO啊,官方DEMO现在看上去特别乱,没关系,我们在后边的视频慢慢讲解,咱们把课可以上慢一点,不要着急,只要出现这行字就说明成功了啊。
我来说两句