00:00
好嘞,各位,在这一小节呢,我们给大家讲一个特别重要也特别厉害的一种组件间通信的方式,叫做全局事件总线,这么写的这几个字儿,全局事件总线,不要被他的名字给吓到,哎呀,说老师这东西是不是可难了呀,我的天呐,这么高端事件总线,哎,同学,在这里边我们连一个新的API都不会用到,这里边所写的东西全都是之前我们讲过的东西,之前的东西你要熟,同学这个事件总线就是送给你的东西啊,说老师,那你为什么说他厉害呢?它厉害在哪儿啊?我告诉你各位,它可以实现任意组件间呢进行通信,就随便拿出来两个组件,直接就能互通数据,哎,就这么厉害啊,有点像什么呢?有点像对讲机一样,我不管你什么身份,我什么身份?我这对讲机给你了,我这再留一份,咱俩之间直接就能进行对话。
01:00
哎,特别好用,开发当中用的特别多啊,给大家呢,先画一下它的原理图,咱们慢慢来,首先我的应用结构啊,肯定是这个样子的,各位,整个应用的外侧呀,有一个非常大的组件,它叫做APP,然后里边呢,我随便给你写几个啊各位,比如说呢,左边有一个绿色的A,右边呢有一个这个黄色的B。B里边呢,有一个蓝色的C。下边再画最后一个就是D组键,橙色的D,然后呢,它是这么设计的啊各位特别的巧妙,他呢找来这么一个人,粉色的X,哎,X呢,在这儿,同学你要注意啊,这个X不属于任何一个组件,说老师X是不是这个A组件里边的,不是它不属于任何一个组件,就往这一呆,诶往这一放X,然后呢,这么玩,各位说有一天啊,这个A组件,哎,绿色的A组件,想收到点别人给他的数据,那他就这么做,同学仔细听我说的话,他这么做,在A组件里面写点代码给这个X呀,绑定一个自定义事件,比如说自定义事件的名字呀,叫做DEMO,由于我们是在A组件里面给这X绑。
02:32
定的自定义事件,所以说同学很自然的,这个DEMO这个自定义事件的回调就留在了哪个组件里呢?当然是A组件,这会儿能不能听得懂各位,我在A组件里面找到的你,然后给你绑的自定义事件,那我代码都是写在A里的呀,是不是?那我的回调呢,当然留在A里面呢,好了,然后说有一天呢,这个D组件,最下边这个橙色的D组件想给A呀,传点儿数据,那他就这么做了,你看好了各位啊,在D组件里面,你写一段代码去触发X身上的哪个自定义事件呢?DEMO这个自定义事件,并且在触发事件的同时,我在带点数据过去,比如说带一个666,那我问各位X身上的DEMO事件是不是被触发了,是的,那么DEMO事件所对应的回调,我问各位,是不是就得执行?
03:32
那么回调在哪呢?在这儿呢?执不执行执行回调一执行来,我问各位,你传那个666,是不是就以参数的形式来到了这里啊?体会一下啊说老师,那如果有一天B组件想收到别人给他的数据呢,那就这么写呗,在B组件里面你写一段代码,诶给这X呀绑定一个自定义事件,比如说事件的名字叫做test,由于是在B组件里面给X绑定的事件,所以说很自然的test这个自定义事件所对应的回调就很自然的留在了哪个里面呢?B组件里面。
04:16
哎,那如果说有一天这个B组件还想给黄色的这个B组件啊同学来这有点绕嘴,是不是橙色的B给黄色的B传数据,那你只需要在这个D组件里面编写一段代码去触发X身上的什么事件呢?各位这回可不是DEMO了,而是test的事件,说老师我想带一个数字八过去,好啊,那你这么一写,X身上的T的自定义事件是不是就被处罚了,事件被触发,事件所对应的回调是不就得执行,那回调在哪呢?在B里呢?既然在B里呢,那肯定能收到谁呢这个八啊来我再说同学,如果有一天C想收到点数据,那怎么办?那就在C组件里面写点代码给这X绑定一个,比如说叫做这个啊TEST2事件,然后就把这个事件的回调又留在了C的自身,对不对,各位哎,说有一天呢,这个。
05:16
的A想给C传点数据啊,那怎么办?那A组件里面你就编写一段代码去触发X身上的什么事件呢?当然是TEST2事件携带点数据过去,比如说带个九过去,那各位我问你这块同理是不是就收到了这个九啊同学体会体会什么叫事件总线?同学觉不觉得整个应用里面各种榜事件,各种触发事件都靠谁呢呀,是不都靠那X呢?是不?各位诶这就是事件总线的一个原理图,同学我说一下这个事件总线呀,其实是我们程序员在编码的时候,大家总结出来的一个经验,知道不?他不是说什么一个新的API,说老师我找官网完,官网告诉我这是个方法,能传几个参数,不是各位就是把现有的东西诶组合组合发现就能实现一个特别好的效果。
06:15
那同学用生活中的例子去说一下,你觉不觉得这X呀?其实他也挺惨的。你比如说各位ABCDX这些东西都是我们生活中的人,哎,咱就拿这X来说,他混的比较惨,他天天跟人家一起玩,但是呢,同学那些人其实都在利用他,你觉得呢,有没有一种感觉,各位这个X啊,他就是个傀儡是不啊,啊,我对你好,我有摸底是不?各位,哎,OK,那既然都把话聊到这儿了,各位我们就再分析一波啊,就是这个X啊,得符合什么样的要求,他才能作为这个中间人呢?才能作为这个整个事件的协调者呢?是不?啊,舒老师就发现这傀儡也不是那么好当呗,那可不,同学你琢磨琢磨,生活中的老好人是那么好当的吗?啊,就是你问张三周围80个朋友说张三怎么样?同学要让这80个人全都说,哎,张三还行,挺好的。同学,这事儿不太容易啊,我跟你讲是不好,来同学分析一波。你说得具备。
07:23
怎么样的条件啊,同学是这样啊,这个东西啊,我不想匆匆忙忙的讲,还说同学把这记住吧,啊,就这四行代码,全局实践总线啊,就实现了,就这么用就得了。同学这个东西有N种写的方法,肯定我得教大家一个最标准的,但是我希望咱们是这样,就是一边猜一边写,把人家那个设计思路体会出来,最终才知道啊,原来这么写才是最好的。来各位闲言少叙,我问你得符合哪几个要求才能作为这X出现呢?第一个要求同学,我觉得得是这样,你得保证啊,这个X得让所有的组件都能看到它,同学你觉得呢,这是最低标准,说的可好听了,哎呀,A里边写一段代码给X绑定一个啥?诶自定义事件,同学你A里边连X你看都看不见,你绑个寂寞是不?
08:18
哎,而且同学你听我说呀,不是说保证A组件能看见,是保证所有组件都能看见这个X对不对?总线嘛,谁都能找到,他说我想给你绑个事件啊,谁也都能去找到,他说诶,我想处发个事件对不对?各位这不墨迹了,必须保证所有人都能看到你。那么第二个要求你觉得是什么呢?既然这X能绑事件,那你说是不是得保证这个X可以调用得到Dollar on,你调不到Dollar on,同学免谈对吧?啊,那你说还得有一个API,它也得能调用到,就是Dollar谁呢?Off对吧,那我可以解绑吗?还有一个它也得能调用到Dollar什么呢?Emmit同学,你说这是不是就是第二个要求。
09:09
你就比如说啊各位这X呀,你确实通过某种办法让所有的组件都能看到它了啊,但是X的值呢,是一个布尔值啊,比如说是一个false,那同学来吧,A组件在这辛辛苦苦的找到了X,哎,说X呀,我想给你绑一个事件啊,然后X说滚,为啥呀,我是false啊,我调不到这些东西啊,是不OK同学你把这一和二你给它实现了啊,事件总线你也就实现完了,OK,这个图我不删,保存一下CTRLS存到我的桌面上,好各位接下来呢,代码上键,咱就把这一和二给它实现了,好回到代码中,那我得把之前写的这些东西啊,我就全删掉了啊,那个todo list给它删掉好还是那个套路找到哪儿呢?找到这个样式,这啊,那这样吧,不找这个有一个更好的人,谁呢?就是一个自定义事件这块,嗯,拿过来不一点点写了,耽误时间粘过来。
10:09
里边的东西调一下各位,这块只留下学校的名称和地址啊,不接受任何的东西,有自己的数据,没有任何的methods OK,干干净净样式不删啊,那辛辛苦苦写的好,再找到这个student,这些全都删掉,然后这呢,名字数据留着,Number不要了,Methods这块呢,我看一下全都删掉吧,啊,走,干干净净的啊,那这呢也正常,给它写着好两个组件准备完毕了,同学,School和student是什么关系,他俩,哎,兄弟啊兄弟,APP这来这么多东西是吧?哎,咱都给它删掉,这里留着一个message就得了,完里边这呢,全都删掉啊,引入school student,然后注册啊,这个也给它删掉,留一个message,这个methods mount全都给它删掉,干干净净吧,在这儿school拿过来,School呢,用一下自闭合就可以啊,好,再来。
11:09
这个谁呢?Student杠这儿呢?好了,看一下效果啊各位打开,嗯,还是之前的老样子,是不是打开控制台刷新一波来吧各位,实现先实现一,在这儿呢,先实现一,我得整出来1X,让所有组件都能看得到,各位啊,先不用考虑二二一会儿再说来吧,谢谢同学。你说这X得放在哪儿才能让所有的组件都能看得见呢?啊,之前有同学啊,这么跟我说,说老师那还不简单,别忘了浏览器里边有一个大家长谁呀?Window老师,那我就这样做呗,你看我在这个命点GS,这不是入口文件吗?哎,那当然这块咱给它删掉啊,诶给它删掉咱不用这勾子呀,说老师那这不是入口文件吗?嘿,我在创建VM之前,老师我就给你做这么一件事儿,window.x比如说等于一个对象,对象里边有A是一,有B是二,随便写啊同学你就在这真把这X你给我写成一布尔值也行,一会儿咱再调呗,现在只关注大家能不能看得见它,对不对?同学我问你,人家这么说一点毛病没有吧。
12:21
同学你要这么写的话,我问你是不是不管你用什么框架,你脱离不了window吧,或者说你不管用了什么框架,它不会把你浏览器里边的window给你废了吧,那是不可能的,所以说同学我这么做行不行?行啊,那你看一下效果来,在这个school组件里面我写一个什么呢?这个mount是吧,这钩子我输出,诶回来重新写,我输出,输出谁呢?window.x对不?各位,然后在这呢,我前面给你写一个school组件,就证明不是别的组件,在这写一逗号,那这一堆同学我给你拿过来放在哪儿,这个student里边,那你说同学行不行呢?这会改一下叫做student,那必须行啊各位,那刷新一波,你看是不是看到点X了,哎,但是你这么做呀,同学有点不太好啊,一般来说,同学,我们在用框架的时候,没有人往window身上给你放点啥,OK,我知道你这样放没啥毛病,就是能实现,但是不太好啊,说老师那往哪放呢?那再分析呗,各位来我的目的。
13:21
是啥来着?哎,注意听我说的话啊,叫做让所有的组件都能看得见啊,琢磨琢磨,有些同学啊,可能想到这儿了,听我说啊,各位说老师啊,我想起来一个事儿,就是所有的组件都能看得见,老师,你的意思就是让所有的VC都能看得见呗,对不?组建实例对象说老师,那我想到了这么一个人呢?老师他呀,View component,老师,你看是不是这么回事啊,所有的VC都是view component所拗出来的,哎,说老师,咱之前讲过这个呀,那很简单呀,我就往这个view component的原型对象上,我放1X,那所有的VC不就都能看得见这X了吗?
14:13
哎,同学,人家这么说没啥毛病吧,对不对,VC是他的实例对象,那我想让实例对象那能看到这个X,那我X放到圆形上是不是可以啊,不会有同学这么想吧,说老师那就放在VC自身呗,同学,你怎么能控制的了,你有多少个VC呢?对不啊,你这应用可能有很多组件嘛,你不能说人家用出来一个,然后你再往里放一个吧,那不太现实,我们的要求是写了一次代码,然后所有的VC都能看得见,所以说难免有同学有这种想法,老师往这里边儿放。那说老师写写吧,来,你写上,老师我教你用component.pro type.x等于你刚才那对象对吧?老师这不就写完了吗?啊,但是同学我想问你的是啊,这个view component是直接存在的东西吗?
15:09
咱得这么说,各位,你这个view啊,是引入了这个库之后,是不是直接就有这个view。还记不记得view component咋出来的了?各位你在这写,我告诉你最终的结局,它就是报错view component is not defend,各位还记不记得了,咱在这儿啊,讲过这么一东西,嗯,哪个呢,在这儿,呃,非单文件组件里面啊,这个view component啊同学,View component是咋出来的呀?这儿呢,各位读啊,不是程序员定义的,是view.extend生成的,而且同学看看我们说这词儿,你每一次调用view.extend生成的都是一个什么呢?新的view component,所以说同学咱得这么说,你在你的应用里面,你写了一个student组件标签是吧?哎,你写完了,你再写一个student组件标签,那你可要知道啊,各位,你每一次写组件标签,View都会帮你knew这个view component,但是他俩knew的是两个view component,是不是这意思,各位。
16:15
啊,你看每次都都是一个新的view component,这个点很重要啊,说老师那我明白了,往它的原型上放好像不太合适是吧,因为这东西你看写一个标签一个新的,他写一个标签一个新的他那我控制不了了呀,那可不嘛啊然后呢,就有同学有这种想法,诶说老师那咱这么的呗,那没办法了,我就改一下那个源码去呗,是吧,说老师你看他不让我碰这个东西,行住掉,哎,慌老师来我教你这不引入view了吗?点开它啊,然后咱引入的是哪个来着,第次下的什么runtime e SM对不对?诶老师你找你找那个instant是吧,或者找那个view component,行,So view component啊说老师在这呢,你看啊,说老师那简单,来你看着我教你啊,这sub不就是这个view component吗?啊,老师来吧,我告诉你,你就往下写,比如说写在这点,它的这个prototype.x让它等于这个。
17:15
个对象A是E,然后那B是二,对吧?老师写完了你看看啊,我通过改源码的方式,诶,我往这个view component的原型对象上咋的追加一个X,说老师那妥了对吧?你每次返回的不都是这个吗?那我就在这里边给你加上一句话,说老师这回妥了,你瞧着吧,这回我输出那X,哎,各位不能window点了,你说这回得怎么的,是不是this.this是谁呀?各位this是school组件实例对象自身有X吗?没有,顺着原型一找,哎,各位一找就找到谁了,找到它的缔造者的原型对象,那么VC的缔造者是谁呀?View component,那我往没往它的原型上加一个X呢?加了,那你说能不能找到呢?那是肯定可以的,这边呢,再给它改一下this点来同学瞧,效果刷新一波能找见不能,但是同学你这种方法极其不推荐,就是真的,你听我说你要这么写,同学你还莫不如直接就整那window上去。
18:15
你干嘛呢呀,大哥是不是改源码的呀,没这么玩的是不啊,后端里边可能有一些说咱们调一下这个什么GVM啥的,但你在这儿同学没没这么搞的呀,是不?哎,不要这样写啊,所以说同学哎呀分析来分析去,Window呢说不太好啊,View component原型呢,咱还办不到是不?源码还不让动,说老师那在这儿,那就嗯拿不到了呗,那你没加那句话,那咋办呢?诶各位有一个地方我之前跟你说过,我说这个地方里边的属性和方法VC都能看得见,我不知道你记不记得了,在哪儿呢,在这。打开我们在给你分析哪儿呢?一个重要的内置关系的时候,啊,我跟你说过这句话,就是为什么要有这么一个红色框里的关系,哎呀,说老师完了,这玩意儿我有点忘了,同学忘就随他忘,等把基础全听完了,再把讲这块那一小节拎出来,咱再看看来现在主要说为什么要有这个关系来读这句话,这是之前你学过的东西,是你认可过的东西。同学让组件实例对象VC可以访问到view原型上的属性和方法,那同学我问你这玩意儿有几个呀?View构造函数它可是只有一个独一份儿的呀,所以说同学你往它的原型上放个X,那我问你同学不仅仅组建实例对象VC,还有谁VM啊,都能看得见对不对?哎,说老师,那怎么找到的呢?啊,忘了这个图吗?你看我就怕你忘,哎,录这一小节之前,我把这PPT都放在桌面上了,各位。
19:55
哎,我问你这是谁呀?VC自己身上找X有吗?没有没有找哪儿啊,其实没有,他找了自己那个缔造者的原型就是这个吗?刚才你到源码里手动改的那个人嘛,但是这个人有很多,咱还不能改那源码,那所以说同学就这条线呀,就这条黄色的线,你可谢谢他吧,是不,他走了这条线,那也就意味着同学view的原型对象V只有一个,View的原型对象也只有一个,所以说你只要把X往这个里边一加,我问你各位是不是就可以了,来试试,回到这儿啊,打开咱们的这个命点GS,那在这儿呢,给它删掉啊,说老师为啥非得在命点GS里做这件事儿呢?哥们,你在哪引入的view?你心里还没点abcd数吗?是不?哥位哎,哪引入的view你就去哪操作吗?来view点什么圆形对象点什么X等于来咋写?A是一,B是二,同学,我这A1B2我是随便写的,知道不就是我。
20:55
得写点有代表性的东西,我不能写个空对象啊,它不好观察问题对不对,好回来,OK,放上了吧,各位瞧着,来到school里面找那X去,我顺着哪条线找的,我顺着自己的组件实例对象找的,其实同学就是刚才这个图来最后给你墨迹一遍,其实他找的环节是这样的,加粗一条绿色的线,就是自己身上没有找圆形,圆形没有顺着这条线找到了V的圆形对象上的X是不好了,回头看效果,各位刷新一波来,X就位没就位了,说老师那你说了这么半天,是不是就想表达一个事儿啊,就是必须得把这X放在这个view的原型对象上,是的,我就这意思来,同学咱得这么说啊,不是说啊这个东西就得有一定的这个标准,或者一定得怎么怎么样,同学,我就问你放在那个window上行不行,行,但咱说不太好,然后放在这个人身上,那你就别想了,对不对。
21:52
它不是一个呀,对不对,好了各位,这咱就不提了啊,好,回到我们刚才的图里来吧,各位是不是把第一个实现了。
我来说两句