00:00
好嘞,各位,那在这一小节呢,咱们来分析一下VIEW3的工程结构,我们分析的是这个啊,各位就是用VC Li所创建的工程,那么用V所创建的这个呢,只是让大家了解一下,我们不去分析它里面的工程结构,当然了,人家这里面写的也挺好的,也挺精简的,甚至这个里面文件的个数啊,比c Li创建出来的工程还要少,但是呢,我们不关注的,哎,我们关注这种主流的方式,C所创建出来的工程,还有就是呢,给大家的资料里面057他我放了一个东西啊,叫初始化工程,打开之后呢,是三个压缩包,分别对应着这三个人的初始化工程,哎,舒老师,什么叫初始化工程啊?大家想想,我在给你讲这三个东西的时候,前提都得是通过一个命令得到一个官方写好的工程,那个工程就是初始化工程,当然我们这个里面可不是初始化了,你打开这里边写了这么多的东西,是不是你自己在练习的时候,你肯定也得创建一个这个东西最。
01:00
开始的样子就是那个初始化工程,但是由于网络原因,哎,或者你电脑的这个原因导致呢,有一些小伙伴不能正常的初始化咱们的工程,那你就把我这拿过来直接解压用就得了,然后等到这个闲暇之余,你再去排查一下问题,为什么自己的电脑不能够初始化工程是不慢慢来,多半同学都是跟你的NPM有关,说几个常见的解决思路啊,各位,第一个把你NPM的缓存清一清,或许能好,第二个同学就是重装一下你的NOEGS啊,那么第三个呢,就是排查一下你这个网络问题是不?哎,你可以配置一个什么淘宝镜像啊什么之类的是不,要不你就开一个科学上网工具等等这些啊,反正就是出现问题慢慢解决好了,同学不墨迹了,把这个关掉,既然想分析工程结构,那就得打开这个工程来走着,不用紧张,各位啊,打开之后你观察左侧文件的名字,文件夹的名字,甚至是它们的摆放位置,都跟我们学习这个VIEW2啊是完全一致的,哎,那只不过呢,里面有一些文件。
02:00
里面的写法呀,发生了变化,慢慢来各位,第一步我要把read me这个文档给它删掉,为啥呢?我们的笔记不在这里面写了,笔记已经提前写好了,不在这儿了吗?对吧?快速上手这个马当文档啊,那我就给他删了,你别到了公司就把人家的read me给一删,哎,说我不写笔记了,同学,咱之前也聊过,Read me里面写的应该是对项目的一些介绍,对不啊,只不过我们讲课的时候喜欢把笔记写在这个里面,OK,来,右键给它删掉,因为我们不需要接下来同学按照之前的套路去分析吧,代码怎么运行你就怎么分析,所以说很自然的,我们得分析入口文件,打开src,找到mid.js,那这里呢,一共写了三行代码,哎,有一行我们见过各位,就是这个来走着干嘛呢,引入所有组件的父亲,哎,或者是所有组件的外壳组件APP是吧,那剩下这个完了,没见过这个呢,也没见过来吧,开始分析是这样啊,各位在V2工程里面我们见过的写法,见过的API,我。
03:00
从来不写注释啊,我在这个里面只写VIEW3里面新提出来的东西,哎,或者说写法变了的东西,好不?你想想VIEW2里边写过的,在这再来一遍,多墨迹啊是不?哎,写的就直接全是新的,大家也便于观察,来走着同学这会儿那怎么说呢,引入的不再是view构造函数了,大家回想一下,我们之前在VIEW2里可不是这么玩的,没这东西,直接上来就是view这个构造函数,随后呢,我new这个view,然后得到一个什么东西VM,随后呢,哎,就跟那个页面的那个容器呢,就发生对话了,那在这呢,不是了,各位来撤回来,引入的不是view构造函数,是create APP同学,直译过来什么意思?创建一个APP的全称叫做application,有应用的意思啊,那它的含义就是创建一个应用的实例对象用的啊,来先写着啊,各位走在这后边补一句,叫做引入的是一个名为名为什么呢?Create APP的。
04:00
工厂函数,诶各位看看啊,我用了一个形容词这块呢,叫做构造函数啊,那这个东西呢,我教他工厂函数有什么区别呢?最大的区别就是构造函数一般来说首字母大写,你看,所以说那个V是大写的,还有就是得通过new去调用,那么工厂函数的特点就是无需通过new关键字去调用,就你想得到东西,不用new直接调我就可以,所以说同学你看人家的首字母,嗯,小写的是吧?哎,其实同学这首字母大小写吧,这玩意儿无所谓,我就写一构造函数,首字母就是小写的,那怎么着运行的时候它也不会报错,但是就有点不符合标准是不?各位好了,同学引入了可瑞APP这么一个工厂函数,那这个东西它能干嘛呢?是不往下看呢?都说了是工厂函数,那就意味着可以直接调,那你看这哈,人家是不是直接调的,那调完了之后给我什么了呢?来观察一下第五行整体运行的逻辑啊,是这样的,首先呢,我调用create APP这个函数,然后呢把这外壳。
05:00
它组件APP给它传进去了,我就得到了一个什么东西,哎,完了,这个东西的身上啊,就有一个mount方法,同学,你之前见过这个东西Dollar mount啊,在这呢,不是Dollar mount了,是mount,那这个APP又是什么意思呀?是页面上那个容器的ID,第五行呢,我先给你注掉,咱们回忆一下之前我们在VIEW2里面是怎么写的,哎,同学就假设啊,你引入了那个view的构造函数,你是不是得你有一个view啊,哎,再走着里边是不是得传输配置项啊啊,EL是不是指定为哪个容器服务啊,或者说接管哪个容器啊,如果你不喜欢写EL,那之前我们可是这么玩的,点Dollar符mount对吧,然后在这儿写上那个选择器APP里边怎么写,还记得吗?各位啊,如果要是说正常,你定义组件吧,其实在这儿呢,你应该写那个components去注册组件,对不,但是我们之前呢,给大家分析过,在VIEW2的那个工程里面,它是借助了一个render配置项,大家还记得吗?哎,Render的值呢。
06:00
一个函数,这个函数呢,会收到一个参数叫做H啊这个H函数呢,同学有一个特点怎么着来,我得写一个returnh函数,得把谁传进去,是不是这个外壳组件APP传进去啊,那你要精简点写删掉这对吧,这块呢也删掉,那当然这小括号呢,给它补上啊走,然后箭头左侧只有一个是不是这么写呀,同学V2的时候我们是不是这么玩的呀?啊,那你要把这段代码给它拆解一下,是不是这么写的,来写一个cost vm等于然后怎么办呀,在这VM点谁呢?Dollar符mount,然后写一个这个选择器APP是不是这么玩的?哎,先得到什么呢?VMVM.dollar符mount OK,这是之前的写法,来注掉啊,不删注掉在这呢,把它解开走,那这段代码啊,我也拆解一下,各位是不首先第一步呢,我先收到它执行的结果啊,那我用这么一个变量叫做APP等于它小写的啊,随后在这呢,我在app.mount来同学看看这个粉色框,然后呢。
07:00
你再看看这个分子框是吧,看看这个绿色框,你再看看这个绿色框,同学多像啊,是不?来慢慢分析,先把这行的注释啊给它写上,我得到的这个小写的APP到底是个什么东西呢?来走着第六行的代码叫做创建应用实例对象啊说老师应用实例对象这什么东西啊,其实同学就有点类似于之前的什么呢?VM原来不是这种结构吗?来各位啊,考虑考虑,原来啊是一个VMVM呢,直接领导着一个人,谁呢?就是所有组件他爹。APP这个组件完了,APP下属有一堆什么儿子啊孙子呀,乱七八糟的是吧?哎从孙子什么的一堆这个结构,那么现在呢,同学这个APP,哎这个小写的APP就有点类似于VM的存在啊,然后呢,它也是直接跟谁对话呢,那个APP组件去对话,然后APP下属呢,有一堆也是这么一个树形的结构,哎体会体会,那这个时候啊,可能就有一些同学问了,老师,那他和他有啥区别呢?为啥三里边要弄出来这么一个人呢?来给大家写写啊,创建实力对象来一个诶分号APP好走着写一个括号吧,哎叫做类似于之前VIEW2中的谁呢VM,但哎同学我一说,但那就要说区别了,但怎么呢?但APPDVM更轻,哎,轻什么意思?哎说老师上称凉了,他100斤,他50斤,我说的轻不是这意思。我说的轻的意。
08:37
意思是APP身上没有像VM那样有着那么多的属性和方法啊,弄得那么重VM其实之前就有点重了,身上的属性和方法实在是太多了,什么东西是吧?用到用不到的都往他身上怼,这回呢,换路子了,APP非常的轻盈,哎,说老师我不信,我想看看,那你就看看呗,在这写一个console log,然后呢,给你输出谁呢APP那在这呢,我前边给你加几个分格符吧,走着来运行一下啊,各位npm so,这呢就得需要弱弱的等待一下了啊。
09:10
等以后再讲的时候呢,我就不每次都开这工程了,我就一直开着啊,然后咱一改页面就有效果啊,稍微等一会儿。OK,启动了吧,按住CTRL键点一下浏览器呢就开了,嗯,然后呢,切到这个控制台啊,稍等检查诶刷新一波,有的时候可能有点卡啊各位来关掉重新来一次,按住CTRL一点。哎,就开了,然后呢,切到控制台刷新一波,同学你看其实APP的本质是啥?哎,就是一个一般对象是吧?各位来打开它,看看它身上有什么呢?哎,有一些我们熟悉的,也有一些我们不熟悉的,哎同学看看我们哪些熟悉呢?这个component好像是组件是吧?啊,这个熟悉不?Directive指令吗?这个呢,Makes in是不是混合?哎同学说两个最重要的东西啊,Mount是不是挂载啊,这个provide呢,我们还没讲,哎是不是由三里的一个新东西啊,回头咱再说来看这个amount,同学来吧,现在啊,别关注那么多,就关注他们两个,Amount叫啥挂载,Amount叫啥卸载?诶也就是说同学你刚才弄出来这个APP,如果你想让他接管的那些组件都能出现在页面上,那你得调mount啊,那如果说我放完了之后,我后悔了,我不想要了呢,那就on mount就卸载是不?各位你看看整体来说是不是确实比之前VM身上的属性方法要少是不?哎,好了回来走啊,那把这个呢给它隐藏。
10:33
掉验证完了吧,确实比VM轻了一些,那这行代码是干嘛的呢?同学,就俩字儿,挂载完事了,你不写这行代码,你自己瞧去,页面呢,不会出现任何东西的,但是现在同学不是不出东西,现在是报错了,他说什么呢?APP你定义了,但是这个值呢,你没有使用过,同学,谁搞的鬼语法检查,那怎么办?关闭它怎么关?同学,来吧,找到我们当时学VIEW2的时候里边写的一个配置啊,叫做view conflict.js大家还记得这个吧,这个东西不是专门用于调整脚手架的吗?同学,VIEW2里面怎么写,VIEW3里面还是怎么写?哎,直接把这东西摁住啊,然后回到这儿呢,松手,放在根目录下就可以了,那在这你注意了,同学,我不想配置代理,我也不想自定义这个入口文件,我只想做一件事,Lit on save false,关闭语法检查好了,这个时候回到这儿,停掉它,清空,然后呢,重新再启动,你看一下这APP,纵使我定义了没用,它也不会给我报警告了,我们必须得关掉啊。要不这。
11:33
这呢,没法讲了啊,你这边调一个东西,好家伙老师往上边翻,那会儿也得住掉,那会儿也得住掉,翻不上啊,按住CTRL点一下走,这回开了吧,嗯,怎么感觉又卡了呢?没卡是因为你没有调用这个mount,所以说页面上没东西,只要你调一保存回来,页面是不是就有东西,哎,那我们在测试另外一个啊,就是刚才啊,咱看到的另外一个API就是on的,哎,就是卸载好,我在这呢写一个定时器,等多长时间呢?同学,等一秒钟吧,啊,别太快了,一秒一秒不算快啊,来在这儿写APP点不叫amount,哎,刚才你看的amount,那也就是页面上一秒钟之后啊要消失是不是?诶东西都没了,来刷新一波,嗯,等一秒钟走,是不是卸载掉了,OK,诶,这就是我们分析的这个入口文件啊,那我们把这些东西呢,就删掉来同学最后啊,给大家对比一下,觉不觉得这个绿色的就相当于这绿色的。
12:30
是吧,哎,然后这粉色的呢,就相当于这个对不?各位好了,那把这些呢就都删掉了,也就是说我们发现他的套路了啊,那这个时候啊,肯定有同学有这种疑惑啊,说老师我就想问一下啊,我现在用的是view u3,不假啊,也是基于view u3呢创建出来的工程,说老师我就想问一句,我还像原来那么写行不行,或许你会有这疑问啊来同学那咱试试来撤回来凑撤回来完这块呢住掉,这呢住掉,但APP没招你没惹你把它留着这句话住掉,也就是说我还想回味一下当年,那就view from哪呢?诶这个view来吧,你试试view是不是就位了,APP呢就位了来吧,走,这没毛病吧,VM准备好了,这不就当年这么一个写法吗?保存回头看一下效果啊,刷新一波咋了各位,他说什么什么东西不对了,不是一个构造函数,我就直接告诉你各位,你根本没有引入这家伙,我就在这儿给你来一个consolo,我给你来几个and符,给你输出你所引入的这个。
13:31
啊,输出你觉得你好像引入成功了的这个view,你自己瞧效果,且看and符后边是谁能new一个andde find呀,哎,所以说在这同学之前的写法这块行不通了,老师啊,我没准觉得这么写行啊,他是分别暴露的呗,哎,或者统一暴露的呗,我这么引入呗,你回头来看也不行啊,也就是说同学它并不兼容之前的写法在这个位置是不是?哎,还得规规矩矩的引入create APP还得正常创建,还得want,那这些东西让他就此拜拜,OK,入口文件分析完了,你觉得接下来分析上,哎,按照代码执行的方式去走呗,同学这是不是引入了APP这个组件呀,好,那就给它关掉,回到这个APP里面,同学这儿呢,你就不用紧张了,这些东西啊,你都见过来在这儿呢,缩进调一下瞧,引入什么呢?Hello word这个组件,这干嘛呢?给APP这个组件起名字呢?那这是干呢,注册组件呢是不?那这呢同学都不想看。
14:31
看看就是样式呗,啊同学,有一个地方发生变化,哎,我不知道你发没发现,就是这同学VIEW2里你能这么写吗?VIEW2里哥们儿你得这么写啊,得有一个跟标签,完了再把东西丢进去,但是VIEW3啊,变了啊,可以没有跟标签,这是一个最大的变化来走着啊,叫做VIEW3组件中的模板结构,可以没有什么呢,跟标签,诶,这个跟啊。
15:01
哎,说老师那别的地方呢,别的地方同学目前没有什么变化,哎就目前他写的这些东西来说没啥变化,你打开hello word.review同学这不也是一堆结构吗?啊说老师诶他不是说没有跟标签吗?那他咋还写了一个同学他为了上样式嘛,就是你不要把东西学的那么绝对,人家说可以没有,那你写行不行也行嘛,是不,各位啊,那这个就没啥看的了,这不都是那些东西吗?Pros吗?对吧,那这这些东西是不?诶SCO是吧,局部样式来关掉,那你说你还想看啥没啥了,各位你看logo对吧,这个图再打开public网站页签图标,这是啥呀,整个那个单页面应用那页面吗?是吧,各位完事了,这不APP在这准备好了吗?哎,所以说同学我们就把这结构啊分析完毕了,来吧,Src复制一份给它改个名字,哎,叫做零一下划线下划线src叫做分析工程结构,OK,哎,其实主要的东西都在这个M里面呢,是不是各位啊,Create APP,这是人家新。
16:02
出来的这么一个API啊,VIEW2里面没有,OK,那这一小节呢,我们听。
我来说两句