00:00
好的,我们又一次的啊去搭建了咱们非常经典的挖派的这样的一个环境结构,我们来看一下这个结构啊,它的层次,首先呢,我们是有这个,呃,这个没有任何依赖,但是呢,项目的开发依赖呢,有三个分别是外派五,外派C3和派DV server3,好那么这些开发依赖的话呢,啊,就可以让咱们去进行一个打包。他会从src文件夹啊当中的index为入口,然后打包到虚拟文件夹当中,帮到点JS文件,当然虚拟这个文件呢,并不会真正的生成,它只是在8080端口虚拟生成。那么这样的话呢,我们可以把index JS清空,那么这个文件实际上就是我们自己开发的这个voe文件,为什么呢?因为这个地方实际上就是你你比如说你这要去写个class view啊,当然了,我们这个index.js啊,它这个要去引入这个,呃。
01:09
一会要去引入这个就是,呃,有view这个文件啊在这,那么这块就有一个constructor OK,好,那么我们的index这底下呢,实际上就叫做对它的测试啊,那实际上我们并没有把new voe这代码写到index当中,这是为什么呢?这是因为我们啊,觉得在index的HTML当中去进行new的书写,可能会更加的符合咱们场平时的这个直觉,对吧?哎,那我们就写在这儿,并且呢,盗墓元素呢,也更好的可以在这里出现。好了,那这个呢,就是咱们开发环境的一个准备,然后老师呢,已经提前把它run起来了,我们可以看8080端口,你会发现这啊,这view is not DeFine,这是因为呃,我们呃引包,然后这个地方没有,哎,没有暴露吧,啊,或者说是没有向全局暴露啊,那这个地方我们不能去expert,因为这个地方不是CMD模式。
02:15
它是直接从全局要必有这个,呃,这个作用域,所以我们在这里呢,就直接用window道这样暴露方法就可以了啊这块是不报错的对吧,哎,还是非常的神奇啊,非常非常的神奇是吧?好。那这样的话呢,我们怎么玩呢?玩法其实很简单,就是我们现在的终极目的啊他。会从index打包,那么index呢,实际上就可以当做是咱们那个类啊,就是咱们的那个呃view,哎,它等于说也会引这个view类,或者说index呢,它就是view啊,那我们就是直接向外暴露这个呃view就可以了,然后其他类呢,我们再去引入对吧?哎,就没必要把这个名字改改成vuee点呃JS了,因为如果要vuee.js的话,实际上就相当于他就没写了,对吧,我们就隐藏或者就就给他提出去吧,也行,那我就是expert.default class啊利用,然后在这引入。
03:19
哈,然后引入的话呢,然后这怪怪的啊,这必须写个window.view那这块不要出现window.view因为这个文件我们还是想让它,呃,单纯一点就是一个类啊,然后我们只有这一句话了。对吧,哎,好了,那么这样是不报错的啊,那么VI它到底这个东西是什么呢?实际上我们的课程当中一直都没有去揭示。啊,那是时候我们去揭示它了,其实这个文件的组件呢,是非常简单的啊,因为有的人都说了,说VI它有一个特点,就是你去学他一些核心的一些算法啊,那这些算法呢,咱们呃,有一句说一句都是前人总结归纳过的啊,比如说虚拟盗啊,那来自bottom对吧?地步算法呢,也是来自s bottom对吧?哎,然后还有模板引擎呢,可能有一些mass touch的一些借鉴,那么这个时候实际上他就会有一个特别有意思的一个一个情况就是呃,有宇西就是咱们的viewvo库的作者,实际上作为一个整合者,他能把他的工作呢,已经做到了极致啊,那实际上呢,作为一个整合工作呢,他是会有点小难,但是呢,不至于就是说像研究那些底层机理似的有那么难。
04:40
啊,研究那些底层机理的话,实际上他还是会会更难的,是这样子的。好,那么这样的话呢,我们就可以在这constructor啊,那constructor这呢,就会有一个options啊,Options是什么呢?就是你在这new的时候不是有EL吗?EL就井号APP啊,那这不就是APP这样的一个盒子嘛,对吧?哎,所以这块有一个options啊,然后这块呢,还有一些data,就是比如说data塔A是十这样子的,所以这样的话呢,我们这个view这块呢,我们在这就给需要去啊把它给写上,那首先呢,就先去把自己的这个options啊,把这个参数options这个对象,然后存为Dollar options,那目的呢,就是让咱们的这个呃用户啊,咱们的使用者库的使用者,呃也可以去使用这个options啊,然后再写个或者吧空对一下,这样防止opens没有传。
05:40
好,然后接下来呢,我们再拿到得到这个数据啊,啊这个数据数据的话,我们也是让他绑到下划线data上去啊,就等于options的一个data,然后或者是安范的啊,咱们data已经传了。对吧,哎,Data已经完全传了啊。好,然后这个时候呢,我们就可以让它变成响应式的,这个数据呢,要变为响应式的啊,变为响应式的我们一会儿再说。
06:07
对吧,哎,然后这个时候的话,我们肯定啊,要开始去进行一个就是所谓的啊模板了,对吧?哎,就要进行一个模板编译了,就要进行一个就是模板的一个编译啊模板的一个编译。那我们模板编译呢,实际上在这里就可以调用compile类啊,然后去传options的EL给他。Compile类啊,然后是opens中的这个EL传给他,然后上下文呢也传给他,这个上下文呢,就是咱们的view的实例啊,那么compile这个类是什么呢?就是我们要新创建的一个文件,哎,然后这个类呢是default。啊,就是我们这是一个类啊,大家注意这个不是一个啊普通的函数啊,我们要把它给放进来啊叫。
07:00
哎,叫compile,然后是constructor是这样子的啊。OK,哎,我们在这里呢,是这么玩,就是view,然后在这compile。对吧,然后在这里呢,就要引包。啊,这个是点杠comp.JS。哎,这样子的好,然后我们看一下啊,这是呃,报了个错,我们看看为什么啊,因为这是compel了啊compel啊不报错了。对吧,诶这个就是它的一个初始的一个起步,当然这块对数据有一些操作,我们一会再说,先把这个模板编译这部分我们给他干了,对吧?诶模板编译这部分我们给他整出来啊,模板编译。好,模板编译怎么玩呢?我们现在呢,就是呃,看一下这边呢,要接受一个EL,就是挂载点好,然后还有VE实例。啊,然后我们现在呢,呃,给他都加上Dollar,这样的话,用户都能够去调用它EL,那这个呢,就是document cur selector啊这个EL,因为你是井号APP嘛,对吧?诶所以这个就是view的一个实例,好这个就是咱们的挂载点,好挂载点然后接下来就可以去判断,就如果挂载点存在啊,就是如果用户传了,如果用户传入了,这个挂载点就是if this the Dollar e存在。
08:30
那这个时候呢,我们就可以干嘛?对,就可以调用一个经典的函数,大家看一些博客啊,一些书,实际上都有一个叫not to fragment这个函数啊,都会有它,哎,那gment这个单词是什么呢?这个node to是什么?Node就表示是从节点啊,二就表示是to到,哎,那节点到fragment是不是就节点到碎片呀,这个fragment实际上就是咱们第一节课就是大家可以去把这个视频回看一下啊,我们这个第一节课就是利有源码探秘制master魔法引擎当中的tokens。
09:07
哎,就是这门课程中的tokens,实际上就是这里的fragments啊,所以说你只要学了当年的啊,Tokens实际上这个东西你就明白对吧?哎,那么也就是说调用函数让节点是不是变为fragment fragment啊这样子的。对吧?哎,那这样的话,View的模板呢,就会使用片段来替代啊,那么片段是什么?实际上就类似于就是类似于我们的啊,就是Mar touch中的这个tokens啊,那实际上在view底层它是不是使用的是虚拟的抽奖语法术啊,对吧?哎,实际上用的是ast啊,那么这里呢,就是简单啊,就是轻量级呢啊,那实际上我们就叫fragment啊,那你就可能会说老师你为什么不用咱们之前写的那个ast呢?哎,那实际上是那个ast,它是一个呃,单纯供你自己研究的啊,那如果说你你有兴趣可以给他整合上去,但是现在呢,我们写一个更加精简的啊,就专门构建于这个VI整体架构,就是它的指令生命周期啊,整体架构上的东西,我们就自己去写一个精简的函数就可以了。
10:20
好,那它就有一个EL这样子的,哎,然后这样的话呢,它就不会报错啊,它这个函数呢,现在呢,就会输出这个,咱们来看这个APP,这个盒子呢,它就会啊得到那这个盒子里面呢,肯定会有一些东西对吧?诶比如说这里有divi,然后这里有个H3,你好,然后这里有个ul对吧?哎,这里有个例,这是A,这是B,这是C。啊,我们写一些精简的这样的一个倒墓结构,这样啊,这这块就能看见了,这块是呃123对吧,哎,是这样的一个盗墓结构啊,那这个盗结构里为里头没有加上没有没有任何的这个就是双大括号的标记啊,当然如果有的话呢,这个实际上它是。
11:04
没有进行转换的啊,我们现在要给它变成fragment,好,我们下个视频进行讲解。
我来说两句