00:01
这节课我们来学习手写,第一次上树时啊,这个话说的特别的啊,人话啊,就是第一次上树的时候呢,我们要进行哪些的操作,前面的这个课当中呢,我们已经把这个图画出来了,那现在的话,实际上就是说我们要从派函数被调用的时候啊,这样的一个时候,我们来去进行一个书写。那么呃,对吧,就按照这个呃两个判断,然后去进行对吧,哎,就OK,所以这个图一定要画出来,不画出来的话,不知道咱们要干什么。好,那么怎么写呢?还是之前的老办法啊,就是把这个我们自己写复原啊,复原成叫呃,咱们的那个index。啊,然后这个呢,就变成这个叫体验第一步算法了,对吧。好,然后这个我们自己写,再恢复成index X啊。
01:04
这样一做是不是我们就可以从这index这块就可以开始,这个就可以开始了,对吧。好,那么一上来的话呢,他就需要去啊,这回是真正的这个要上树了,所以我们先把测试代码给写好啊,那我一上来我就先得到document。哎,不是document得到container等于document get element by ID container,好,然后呢,我再去patch,当然patch算法我们还没有写啊,所以我们要新建一个patch.js这个文件。然后让它默认暴露一个函数。它默认暴露的这个函数呢,其实就是patch函数啊,那这个时候我们就可以引入patch。哎,我们就不init了啊,那你说老师那个init是干嘛的呢?Initt其实就是组装各种模型的组装,咱们可以看一下。
02:05
官方的对吧,组装这些模型什么的,那我们现在做一个简单版的啊,就是核心版的这个磐石算法,所以呢地步算法,所以我们就不再设计这些啊,细枝末节的东西。好,那我们直接引这个patch。好,然后就可以书写咱们第一次的这个啊,上述的这个情况的东西了啊,那第一次的话,咱们不要去把虚拟节点创太复杂啊。To mynode对吧?一我们不要创太复杂,我们就直接这么创建。哎,就直接创建一个H1你好。就行了。好,然后我们还需要得到那个container。Document get element by ID element get element by ID啊,我们要把这个container我们给他拿啊,得到。
03:04
对吧,Container我们给他得到,然后这个时候我们就可以去patch,哎,这个container和my vino的伊朗,好,那我们现在可以去刷新看一下啊,刷新看一下,那你现在就会发现页面上并没有出现H1,这是因为我们现在这个函数什么都没写呢,对吧?哎,也没有上述也没有比较啊,它是空空如也的,那我们的目的肯定就这出现H1,那不仅仅要出现H1的话,就是说如果这里还有H函数的这个子节点。啊,那这个时候等于说他还要都要能创建出来,所以他这个东西呢,长路漫漫,那我们现在呢,就一点一点写,那首先第一步是干什么呢?大家可以看见它是不是要去判断老节点是虚拟节点还是盗墓节点呀,对吧?所以咱们在这里呢,就可以去判断啊,这是判置函数,诶那它接受两个节点,第一个就是old one menode,第二个就是new windownode,哎,判断什么呢?判断咱们传入的第一个参数是DOM节点还是old的no的节点啊,还是old的,还是虚拟节点。
04:14
哎,那判断方法很简单,就直接看它是不是有赛属性就可以了。明白吗?啊,就直接看它是不是有S属性,就如果你传的这个老节点不是空啊,那如果是空啊,或者是安迪范的。哎,就是old we know the cell是安迪万的。那那么它不就说明什么呢?它是不是说明它是一个DOM节点啊,对吧?哎,DOM节点。啊,这说明什么呀?传入的第一个参数是盗墓节点,那么此时就干嘛呢?对,要包装为虚拟节点。啊,那我就让old beno对吧,它就等于一个包装虚拟节点。那包装成虚拟节点很简单呀,我们是不是v no的函数早就写过了,它不就可以负责呃创建出虚拟节点吗?所以我们就把它给弄过来呀。
05:09
对吧,弄过来的话,咱们可以看一下它,它这里头是选择器data children text em啊,咱们可以给它啊,它这有感应选择器是什么?对选择器是不是就是它的那个tag。对吧,哎,就是TT一个啊,他一个内幕。啊,然后to lower case就可以了,To lower case啊,变成小写字母,然后第二个是数据,数据老节点肯定是,呃,就是没有数据空对吧?哎,然后children准咱们可以留空数组或者按D办都行,然后文字的话咱们就按D办,没有啊elm那就是他自己old。对吧,V note啊,就是他自己,那不就是他U吗?那这样的话,这个O的v note就做出来了。这能看明白吗?对吧,那咱们现在看一下这个old的beno啊,就可以试验一下,写一写试验一下就可以了,那你看它就被包装出来了,没啥毛病。
06:06
啊,非常的简单。那接下来的话我们要干什么呢?接下来的话就需要继续看图,你看这一步是不是完成了,这一步也完成了吧,啊,那就看图就行。就是说咱们大家为什么要先把流程图画出来,因为流程图画出来之后,你就知道它就很嗯就是很这个什么,就是相当于呃很清晰很透彻啊,你就把这个视野呢,给它局限在一个地方了,当你视野局限在一个地方的时候呢,那这个时候它不就是相当于更加的让你就是很很这个很这个什么嘛,对吧,哎。好,那这个时候我们就可以看叫判断old windownode和new windownode是不是同一个节点啊,要判断old的windownode和new windownode是不是同一个点,所以在这里我们就需要判断判断old windownode和new venode是不是同一个节点,和veno的啊是不是同一个节点。
07:07
好,那怎么判断?其实很简单,就是要看old的key。对吧,同一个解咱们就不不封装函数了,就直接在这判断就行。啊,是不是等于等于6v no的K。哎,并且呢,你o no的这个啊选择器。哎,还必须要等于新new的选择器。好,就这么简单粗暴啊,只要都满足,比如说这个都是安迪范,然后这个都是div,那它就是同一个节点啊,这块写错了点。哎,那么咱们就可以落为一个是同一个节点,那同一个节点的话就需要精细比较。啊,就需要精细比较了,看见没有。啊,那这精心比较是后边的事儿,它比较麻烦,那咱们现在呢,是不是就需要一个不是同一个节点,所以这个时候是不是就要暴力啊,对吧?哎,暴力插入新的删除旧的。
08:02
啊就可以了,他为什么要先插再删呢?因为插入的时候需要一个标杆,它插入到原来节点的前头啊,然后再把原来节点删掉,如果你先删的话,它就没有那个标杆了。很简单一个道理对吧,所以他判断出不是同一个节点暴力插入新的删除旧的啊,那现在的目的就是说我要把这个v node给他插入。这个V咱们大家知道它是一个如假包换的一个啊,盗墓对象,那我要把它给插入。并且呢,他children如果他要有值的话,它是不是还要循环递归插入啊。明白吗?哎,所以它这个比较麻烦啊,那插入在哪呢?插入在咱们的这个,呃节点就是老节,呃老节点的前面。能不能理解,所以这个时候我们就可以把一些盗墓啊,或者是盗墓的一些操作,哎,咱们就可以真真真正给它封装出去。啊封装出去,那咱们现在呢,呃,可以,因为这个函数比较复杂,所以我们现在就可以给它就叫create啊create element啊叫JS。
09:08
你看,Create element。哎,就表示的是真正创建节点对吧?哎,这个函数的功能是真正创建节点,所以我们现在就可以expert default。Function啊,真正创建节点,那么他要提供哪两个参数呢?对,第一个是不是就是你要创建的这个虚拟节点,Reno的第二个是不是就是它的标杆,标杆大家知道吗?就是你你你你要以它为基准插入到它前头。明白吧,哎,就是说它相当于标杆啊,标标杆的话,我们写一个查一查标杆怎么so啊,它的名字呢?哎,标杆啊,叫pavot啊,其实这个词叫pivot。啊叫枢纽中心就是基准啊,叫基准兵啊叫pivot啊pivot这样子的,也就是说将这个vnode是不是要插入创建,创建为DOM吧,创建为do对不对,然后是不是要插入到咱们的pilot这个这个元素之前啊,对吧,是这样子的一个道理,那所以说这个东西的话,如果它不用递归,那还挺简单的,它就一层。
10:19
好,我们在这里引一下啊,这是咱们自己的这个patch。啊,咱们别乱了,咱们把这个引一下叫create element from点杠create element.js。好,然后在这里呢,就可以暴力的啊,插入新的,那怎么办呢?我就可以暴力插入新的,把这个new windowno的传进去,标杆是谁?标杆是不是就是O的vnode的elm啊,哎,因为我们刚才已经把O的meno的封装进去了,它最后一个参数。他最后一个参数是它原来传输的这个对象啊,那最后一个参数不就是被封装成了em吗。
11:00
被封装成E之后呢,这个时候就需要在这里使用点em把它得到。就可以了,所以现在呢,我们就要开始工作了,这个工作的目的是什么?对,目的是把虚拟节点,哪个虚拟节点就是这个vno的是不是插入到标杆。标杆是谁?对,标杆就是拍爆前看到没有?我在这里写写注释。为什么要写写注释?因为这样的话就很清晰。很清晰,那目标就是把这个虚拟节点,这个虚拟节点大家看一下对吧,插入到它之前啊。那那现在的话,大家其实觉得挺简单的啊,为啥呢?因为你现在就可以去创建这个这个node啊,或者说这个叫DOM node啊,就是它是一个真真正正的一个DOM节点。对吧,那就等于document create element,它是什么呀?是不是虚拟节点来啊,选择器啊,啊,咱们说过这个选择器是很简单的,不能写景和点啊,我们就直接给它创建出来。
12:03
好,然后创建出来之后呢,接下来我们要看它是有有子节点啊,有子节点,子节点还是有文本啊,就是子节点和文本是不能共存的,大家一定要记住啊,我们是不允许这样子的情况,咱们是弱智版啊,就是啊傻傻瓜版,你看咱们不能有ul-ul这样的情况。就比如说这里头有个力啊,这个啊,就这里头不能有散文字啊,不能有这个散文字,它必须只能有这个子元素,哎,不能散文字和子元素都在啊,因为咱们今天写的是非就是不是细节不是特别好啊,但是能保证让你把这个东西彻底弄懂。啊,那所以说咱们现在呢,到底是有子节点还是有文本,那很简单啊,就是如果咱们现在你传入的vno的。啊,它的TT对吧,不是空。
13:02
Text不是空。对吧,哎,就是它是有文本的啊,它是它是有文本的啊,然后再且他的这个啊children。对吧,哎,是安迪范的啊,或者它的丘疹的长度是零。哎,这样子的。明白吗?啊,是这样子的,就加圆括号吧,啊,当他文本不是空,并且他的children是安范,或者children的长度是零,因为children可能是范,或者是咱们有的时候写错了,写成公路组了啊,那么都行,他都会判断。那么在这样的情况,它是不是就相当于它内部是文本啊,啊,它内部是文字,那就把文字弄上就行啊,文字咱们在它的这个源码当中,它是用create啊,它是用document create text node。啊,Create text not的这样的来做的啊,但其实没必要啊,不用not,咱们是不是就直接往新创建的节点的inner text对吧?哎,直接就去写它的内容就行了,这样不就更简单吗?
14:13
那现在你创建出来的这个节点是什么?是不是孤儿节点呀?对吧,你现在创建这个节点DOM node,它等于说真的是创建一个节点啊,创建一个DOM节点,那么这个节点现在呢,还是孤儿节点。啊,他没有这个节点没有没有,那所以说就要给它上树,将孤儿节点上树,怎么上树,是不是用document insert啊,Before这个东西啊。对吧?哎,那新节点呢,就是donode,然后咱们先去看一个标杆节点,标杆节点是什么?对,就是你传的拍lo就行了,那你看这个节点就能上树了啊,但他这报错了,The not which啊,The new not is To Be iner child啊,就说这个不对。
15:00
啊,因为我们要让负元素,负元素来插入它,所以应该是这个节点的副元素叫parent node啊,所以不是document调用,就是说让咱们这个标杆节点的副元素调用insert before方法,对吧?调用insert before方法啊,然后呢,将咱们的这个新的孤儿节点是不是插入到咱们的标杆节点之前啊,标杆节点之前。所以他的父亲很有可能是document.body但也不一定,因为他递归的时候,他里头是不是特别乱呀,所以这么样一调就很棒啊,那你看这就出来了。看见没有,这个你好,是不是就出来了。对吧,哎,这个你好,他就真真正正的出来了,就非常非常的这个棒啊,就很棒,所以这样的话,他就啊完成了我们第一次上树的这个事情,但是第一次上树的话,它这里头的话是应该是递归的。
16:01
对吧,它这里头应该是递归的,因为你这里如果是有一个数组,咱们大家知道,就比如说这是ul,然后里头呢,又是H又是力。啊,你递归你就玩不转了A,对吧,ABC。哎,你一递归你这就玩不转了,大家发现没有对吧,它就玩不转了啊,但这个U能上去,Ul都没有上去。因为你这个就它后边的这些节点都是,呃就玩不转了,你这个H对吧?哎,然后呃,就就是你这个patch啊patch的话,你这个节点不是创建出一个虚拟节点吗?然后你这个虚拟节点这块是个数组,所以说你这块就相当于没有写这个else。没有写这个else if,对吧?哎,你需要判断它是一个数组a ray ISA ray就是we know的children。啊,它是个数组,并且呢,是不是它的这个数组的长度还需要大于还要大于零对吧?哎的length是不还需要大于它有子节点。
17:05
看见没有,就是他如果是个数组啊,他是解决自己的,他如果只有一个儿子,咱们vino的不是也会给他包装成数组吗?对吧,那么这种情况你没写,所以他就什么都不做啊,那咱们下个视频咱们去讲解,哎,下个视频咱们去讲解这种递归的这种情况。那同学们要做的任务呢,就是把现在我们学的这种文本节点,第一次上述的这种文本节点啊,咱们要去给他啊学习会啊,要给他写熟。
我来说两句