00:00
那么我们继续来写这个node to fragment这个类啊啊,这个函数。呃,Note to fragment的话还是,呃,思路还是比较清晰的啊对,就是我们首先呢,它是要知道一个东西叫document create document fragment。啊叫create document fragment啊,我们来看一下这个东西是干嘛的啊,有些同学不知道啊,那不知道的话咱们来看一下啊。Document。啊,我们来看一下这个函数是干嘛的啊,这个函数呢,叫做创建一个document fra节点啊,这样创建,哎,然后它是干嘛用的呢?它是说创建了一个虚拟的节点对象啊节点对象呢,包含所有属性和方法,诶当你想提取文档的一部分,改变、增加或者删除内容及插入到文档的末尾,就可以使用它啊,你也可以使用。文档的文档对象来执行这些变化。
01:01
哎,就是他,那所以说它呢,就相当于是一个虚拟节点的一个对象啊,就是一个精简版的一个虚拟节点对象,还是很方便的,那可能你第一次用啊,没关系,我们在这里看一下啊,就是我们在这叫fragment,然后就等于document,哎,叫create document create document fragment。好,然后这个时候我们可以看一下这个fragment是什么啊。这个函数已经被触发了,然后我们来看一下这个函数,诶,这里写了个解,因为它里没东西啊,那所以说我现在就可以去开始循环递归它啊,也不是要循环递归,就是用循环语句让呃,我们就可以从第一个子元素叫first child。对吧,哎,循环的去用它,然后我就可以让这个fragment fragment哎,就可以去追加pen child啊啊pen child,我们就可以把这child给追加上去。啊,那这个EL就是你这个挂载点啊,这个元素,然后它的第一个子元素啊,那第一个子元素它就成为child了,Child之后它是不是又有第一个子元素,又有第一个子元素对吧?诶,那这个时候我们就返回这个fragment,好,这个时候刷新我们来看一下这个就是它div h3ul对吧?诶这样的,那这个时候你就会发现一个重要的事情,就是咱们网页上的那个文字没了。
02:25
发现了吗?网页上的文字没了啊,网页上的文字没了,如果你不写循环语句,那这个时候可能你看的更懂,就是啊,大家会报错啊。啊,因为你这个,呃,Child还没有定义,比如说我这child就等于EL first element啊,First element first child。好,呃,当然是first I child了啊,诶,那你看它这个第一个元素就没了,就相当于什么意思呢?就相当于呃,就是fragment,它这个东西呢,有一个特点,你只要把它放到这个fragment当中了,那么道上的真实那个节点就没了,所以我们这个时候呢,就是用这种EL的first child给child,那么下次循环的时候,是不是由于上一次便利的那EL first child已经没了?
03:18
啊,就是。它就相当于什么呢?一层一层的就是div没了,H3没了,那U就成大王了,对吧?山中无老虎,猴子成大王,那么ul就是成新的first element child了。那这块EL成新的first child之后呢,那这个时候是不是就相当于把它付给这个child,那它就一层一层的就都给往这个fragment里头都都放好了,对吧?哎,也就是说让咱们的DOM中的所有节点啊,所有DOM节点是不是都进入fragment。哎,这样子的。好,那这个from咱们现在就就就出现了啊,From就是一个咱们叫片段啊,就是tokens,但是它呢,要比tokens来的更加方便啊,它是一个内置的这么一个东西。
04:08
好,那么它有了之后,我们接下来在这就可以编译编译这个模板,那我们在这就是compile。哎,咱们看一下那个井号在双大块的这里是不是也有对吧?啊,但是如果说有指令会怎么样呢?或者说类名,比如说这个class。的title啊,我们看一下刷新。哎,看一下展开啊,当然这块报错了,我们先把它给注释掉。好诶,这个title也是在身上的啊,没有什么毛病,然后这块调用这个compile是编译,编译的话呢,就要编译这个fragment。对吧,哎,所以说我这一个fragment。哎,把它给编译一下,就是要把这个fragment给他编译一下啊,这块没有什么毛病,那么接下来呢,我们就需要去写这个compile这个方法。
05:00
哎,Compile这个方法,那么这里呢,进来的就是咱们的,呃,这块进来的是什么呀?这块进来的就是fragment了,对吧?哎,那咱们也用这个EL来表示,然后输出。把这个输出干掉啊,好进来到编译这里,那么进到编译这里的话,我们要干什么呢?对,我们在这里呢,就需要去循环啊,去便利这里的每一个元素,那么实际上呢,它是为后边的一个叫compile element,诶,这是一个节点,然后还有compile啊text,哎,叫compile text。哎,这样子的啊,来进行一个路由,就是它可以是往这编,也可以往这编啊,是这样子的,那么这个其实是核心的比较核心的一个东西啊,那么在view底层,它是一个虚拟节点和diff,但是我们这里呢,就简单的用fragment去写,那么实际上市面上也有一些博客啊,文章也是采用类似的方法去实现的,那也是初学者,呃,适合初学者去学的。
06:09
好,那么既然适合初学知识学,我们也继续往下写,那这块的话,我们就是得到咱们这个玩意的子元素,得到子元素那么就是child not就等于EL的,嗯,Child notes,哎,然后这个时候我们就让这个child notes呢,我们就可以遍历,用for each遍历,For遍历的话,每一个节点我们在这里呢就可以。啊,得到这个,这就是节点啊,节点好,那这个时候我们就去判断,就是看这个节点的类型是什么,如果这个节点的node type等于等于一啊,那这个时候我们就需要让咱们这个文字啊,当然这个时候可以把这个节点的内容我们存成text,哎,就是text content。
07:00
好,然后如果的话等于等于一,那这个时候我就让上下文,上下文的话,我这里要备份一下啊,叫self等于个this,然后我这块就可以上下文,我就可以去调用这个compile element,我们把这个节点给调用一下就行。啊,那这块可能大家不明白,这个text弄的是什么啊,我们给他输出你就明白了,好,我们给它输出刷新,诶这个就是它的节点里的内容,你好,T点还有ABC。对吧,这样子的啊,如果是一就给它编译出来。啊,让self compile这个node对吧,这样子的。没啥毛病啊,当然这个这个东西可以写在里头啊,Else if else if,如果你的node,呃,Node type,如果是三。对吧,哎,如果是三的话,那么我这个时候就可以干这些事。啊,就是把这个文字内容给取出来啊,这样note note type等于等于三啊。啊,这节点的那个类型是文文字啊,但是他这时候并没有输出,并没有输出的话,那这块确实是有点问题,我们看看怎么回事啊。note type这块是一。
08:11
一的话,我们在这调,但是是等于等于三,我们输出一下这个。输出一下note大啊的log,输出一下313对吧,是有三的。有三的话,那这里是怎么回事呢?这块用text等于node的text,呃,Text content。对吧,哎,然后我们现在呢输出,诶他这个输出有问题,我放外头呢。诶,放外头就没了。啊,我们把这个输出放外头这个3113。诶,这个是有的。对吧,但是这是一行输出哦,这是因为它便利在外层对吧,哎,这样那等于说他现在还没有递归到啊里头。
09:03
对吧?哎,这个compile就相当于我们现在一会要让这个compile element去便利这个compile啊,去递归这个compile。对吧,哎,是这样子的一个过程,就是他要去把这个儿子。啊,就是也要能够进行一个一个合理的编译啊,就是一层一层的都要能给他呃,编出来对吧?哎,一层一层的都要能给他编出来啊。我想想啊,咱们现在这个逻辑这块是呃,EL的child notes,然后备份,然后我先去遍历,遍历每个节点,然后我现在等于等于三的时候。对吧,哎,等于等于文本节点的话,我们一会再写啊,这个一会再写。然后现在的话就比较重要,重要在哪呢?就是现在你要去做这个comp element的这样一个边对吧?哎,那这块的话,实际上就会输出这个一号啊,No type为一的这样的一种节点。No,这个就是div。
10:01
哎,这样子的啊,就等于说他是这块的话,就需要去啊编译这个东西。啊,那编译这个东西的话难不难呢,其实也还好。啊也还好,那我们进来的话就需要去有一些啊东西,咱们先来看一下啊,这个其实很多,呃,网上社区啊,都会有一些类似的函数。啊,大家也可以找一些资料可以去看啊,找一些资料去看,然后实际上都是大同小异的。对吧?好,那这个时候我们就可以去看,首先是用node的attribute就可以得到他身上的属性,好,那这块的话你会发现不是字符串方法。啊,就是这里的方便之处就在于不是字符串啊,不是将咱们的HTML结构呢看作字符串。明白吗?哎,而是咱们的那个就真的是属性,而是真正的这个属性。啊,属性列表。哎,属性列表,所以这块呢,我们就给他去,比如说存成叫node at t RS啊给它得到,得到之后呢,我们这个时候就可以输出它。
11:10
啊,就是他身上的这个属性列表。好,这个是我们刷新,刷新的话,你会发现这块是呃没有对吧,哎,他这输出了啊,这个其实盗墓可能大家都很少用attribute啊。好,那如果说我们现在给他补一个,补一个比如说class等于box,哎,那么它实际上就会有这个class,看见了吗?哎,他就有这个这个属性啊,然后这个class这个属性的值呢,就是这个boss,所以你就会发现这个东西实际上就跟虚拟节点似的,就特别的像。啊,就现在大家看见的这个这个内置的这个fragment这个东西,实际上就是咱们JS原生JS当中的一个虚拟节点。啊,这样子的好,那利用这个虚拟节点的话,我们编程的时候就会很快。对吧,哎,就会很快啊,然后我们这个时候我们就可以让咱们这个node attributes啊,但是我们要先去给他,呃,转成这个,它是一个类数组对象对吧?诶类数组对象,然后咱们现在要变为一个数组,那常用方法就是我可以让一个数组S这个。
12:12
啊,这个方法来方法可以潜克隆一个东西。对吧,哎,那让它的SS或者是数组的pro sla啊,或者是就是a read a read prototype。对吧,I上的s slides我可以扣啊,我可以扣这个nodes,那它就变成数组了啊,这个东西的话,其实如果你变成基本功很强的,你是明知道它是怎么回事的,当然也可以写一个空数组,但是S拉啊都是可以的。对吧,哎,都是可以的啊,那么这块的话,他就能够去便利每一个a tr,对吧?那么在这里呢,就开始进行分析指令,这里就分析指令,那实际真正的在view底层的是不是这个DOM的fragment,但是虚拟节点,虚拟DOM跟它是类似的,对吧?哎,也是有这样一个清单,并且咱们之前也讲过虚拟盗墓的课,那这个时候你可能会有一个灵魂拷问,就是说老师你为什么不把你之前的虚拟盗墓,还有你那个,呃,那个东西你为什么不不拿来直接用啊,原因其实很简单,就是它这个东西在整合的时候会产生各式各样的问题。
13:17
啊,那代码量实际上是成倍的成长啊,我们现在没有意义去打造一个完整的一个V啊,我们只是去控制变量,就学习一个东西的时候,把另外的变量给控制住啊。哎,就可以了。所以在这里呢,就是他们的指令,那就是我们可以得到a tr的一个内幕啊,就是ad tr的这样一个内幕属性,我们刚才也看见这个a tr有内属性,对吧?哎,然后它的值呢,在这里就叫value value的话就是a tr的这个value。对吧?哎,然后这个时候我们还可以得到指令啊,得到指令的话,那什么呀,对就是我们的,呃,从从这个二啊二号元素开始,因为呃,所有的这个指令呢,都是比如说V杠啊,V杠开头的。
14:07
对吧,哎,那实际上他就开始就可以得到这个指令,指令我们叫第二行啊,Directive,那就是它的这个名字啊,我们就可以sub string。啊,Subs这个R就可以了,那现在的话呢,我们现其实就可以输出这个指令,conso.log这个DR啊,我们输出这个指令,那现在的话这个指令实际诶这报错啊啊ad tr的内幕。看看这是怎么回事,A t RA tr的内幕,然后atr内幕的话,Subtream啊小写。好,哎,那这块的话,你看实际上是ass对吧,那ass没关系啊,因为一会我们就用if语句来去做了。啊,If语句来去做了,就比如说这块有一个if语句,就是v if。啊V港衣,那这个V衣的话,是不是就会有个if就会得到。对吧,诶那这块的话,我们就可以去判断啊,就看看看看是不是指令,所以指令的分析呢,就是在这里就开始了,他就要在这看a tr的这个内幕啊,它的嗯,Index of这个V杠啊,然后它是不是等于等于零。
15:19
啊,等于等于零就表示它不是负一,它不是负一呢,它是零就表示它是以V杠开头的,V杠开头的当然是指令了。对吧,哎,所以说你现在就会知道V杠开头的呢,就是指令。诶,那V项开头的话,就是指令的话,我们这个时候就要干嘛啊对,我们这个时候就需要看看它是不是model指令还是bin的指令啊,这会就可以去去去去看了,就看我们现在得到的这个指令,它是不是index of对吧?哎,就是它是不是model指令。啊,或者咱们就直接就DR等于等于model啊,那就相当于model指令,然后在else if是不是DR,它是不是就可能是for指令对吧?哎,所以指令呢。
16:04
指令的这个触发是在这里做的,对吧,比如说model,那这个时候是不是就双向数据绑定,双向数据绑定要干嘛?对双向数据绑定的话,我们一会就需要给他添加监听。啊,添加事件监听,因为你需要Y6ON change嘛,就是产值事件肯定也有对吧?诶然后那个得到数据这个东西也要有对吧?诶然后呢,也需要有监听器,然后也需要有这个数据,所以指令是在这里处理的。啊,就是你稍微一写,其实你的思路就会很明确,在这里去进行这个指令的一个处理。啊,那比如说我这里,比如说我现在发发现一个input type等于text,然后V-model这个A。对吧,那我在这里就可以输输输出啊,输出就是发现了model指令啊,我们就发现了这个model指令,那model指令的这个值呢,就是我们这个八六。哎,我们输出啊,那他实际上他现在是因为这一层没有啊,这一层是还没有,它需要一层一层的一个,呃,节点给遍利下来对吧?诶一层一层的节点便利下来的话,他才能去发现他这个这个这个这个指令是吧?诶才能去发现它啊。
17:15
好吧,哎,所以说它是这样的一个思路,但是我们可以现在啊,比如说在身上有个V-if,那那这里就是if啊,那就是可以告诉他,就是发现了if指令。哎,然后这块是Y6Y6,比如说是A,那这块是发现if指令是不是A呀,对吧,当然这块可以是个表达式,比如说A大于八。啊,那这个就就能被拿出来,所以你现在就知道了,这个指令它其实就是通过就是这样的啊,一个一个义,然后去从他身上去读出来的。哎,是这样子的啊,所以这些代码的话,适合大家自己用手写写啊,越写越清楚对吧?哎,越写越清楚啊。那好,那一会我们去分析什么指令呢,一会儿我们就去分析一下,呃,就是。
18:03
呃,这个VGA model啊,双向数据绑定对吧,诶好。
我来说两句