00:00
好嘞,各位,我们学完了全局事件总线,它可以实现任意组件间通信,那么在这一小节呢,我们就再给大家讲一个同样可以实现任意组件件通信的这么一个技术,叫做消息订阅与发布,这么写的这几个字,消息订阅与发布这个技术特别的简单,非常容易上手,我用一个生活中的例子啊,先给大家说一下,咱们呢,先别说消息的订阅与发布,说说谁呢?说说报纸的订阅与发布,这个大家都熟吧,回想一下同学们N年以前,咱们家定报纸分为几步啊,简单点说就两步,第一步您得跑趟邮局啊,得去订阅报纸,所谓的订报纸就是你得交钱吧啊,你得选报纸吧啊还有就是同学订阅报纸的时候,你必须提供一个重要的数据,就是你的家庭住址,你不说住址,这报纸送给谁去啊?那么第二步呢,各位就不是我们的事儿了,那就是这个家伙的事儿了,邮递员干嘛?
01:00
他要送报纸,你说对不?各位,那你说对于送报纸而言,最重要的是什么呢?当然是他手里边的报纸,你说对不?各位订阅的时候家庭住址很关键,然后人家送报纸的时候,那个报纸很关键。同学订阅报纸如此,订阅消息呢也如此,也是两步,第一步不叫订阅报纸,叫订阅消息,订阅消息那就没有家庭住址了。同学,那你知道什么最重要吗?就是消息的名字,哎,消息名,说老师我咋没整明白啥叫消息呢?同学,我给你打的电话,发的短信,发的微信,全都叫啥消息啊?说老师,那消息名你就理解成你的手机号,就理解成你的微信号。同学,我给你发个短信,这手机号你说我要输入错了,那同学一切都是徒劳对不对?我说什么你都看不见,所以说同学消息名理解成手机号就得了啊,那你订阅完消息之后呢,那第二步干嘛呀,就等着有人啊去发布这个消息。说白了,同学啊,手。
02:00
你买完了手机号办完了,就等着别人给我打电话发短信呢,对不对?哎,所以说第二步呢,就是等着别人去发布消息,那对于发布消息的时候,同学你觉得什么最重要呢?当然是消息的内容,你说对不,收到一条短信啊,张老师给发的内容呢,没有这就不行,对不?各位所以说你看啊东西啊,它都是相辅相成的,说老师那怎么就订阅,怎么就发布,怎么就实现了任意组件件东信呢?来同学画个图吧,走这图啊,咱画过多少遍了,来红色的是一个APP组件,左边有一个绿色的A组件,右边呢有一粉色的B组件,B组件里边呢有一橙色的C组件,最下边再来一个得了啊,叫做蓝色的D组件,接下来呢,同学你听我说啊,C组件里边啊有一点东西,A组件想用。我这话说完了,你必须明确的告诉我,谁是需要数据的人,谁是数据的提供者,很明显A是需要数据的人,C是提供的数据的那个人啊,数据的提供者,对不对?各位,所以说A就相当于我们,C就相当于邮局,是这意思不?各位,哎,那你看着它就是这么玩的,在A组件里面,你去订阅一个消息,比如说我订阅的那个消息的名字呀,叫做DEMO,随后呢,我再给他指定一个回调,叫做test函数啊,这些都是我随便写的,同学订阅的消息名叫什么呀?叫DEMO啊,如果有人发布了这个消息,那么这个test的这个回调函数是不是就得被调用了?OK,同学,你写完了这个就相当于你这报纸啊,订完了具体是哪个报纸告诉人家了,家庭住址告诉人家了,OK,各位听我说,接下来C啊就开始发布消息了,那同学我问问你啊,人家。
03:51
A那边啊,订阅的消息叫做DEMO,那你说你发布的时候能不能随便写,你发布的时候你写了一个哈哈这个消息名,那同学你发布归发布,A这会儿能收到吗?收不到,所以说别瞎写那名字,我发布的时候这个消息的名也叫啥叫DEMO,随后同学你在携带着你想给人家的数据,比如说是数字666,同学你这么一写不要紧,C这边只要一发布,A这边由于订阅了DEMO这个消息,那所以说它的test函数就会触发调用,然后这个666呢,就以参数的形式传到这儿了,OK同学,是不是很简单呢?诶,这就是它整个的这么一个工作模型,同学,所以说DEMO订阅的时候,这个名字很重要,你订阅的什么名,发布的时候是不是就得是什么名,还有就是各位,你告诉我谁订阅消息,需要数据的人订阅消息,提供数据的人干嘛发送消息或者说发布消息就可以了,OK啊,说老师来吧。
04:51
写写吧,是这样啊,各位原生GS里边呢,同学他没有办法轻松的实现订阅与发布,所以说呢,我们得借助一些这个第三方库啊,第三方库那就太多了,各位你现在去getthub上你搜索一下跟这个消息订阅与发布相关的库,那简直是铺天盖地的,那我们在这儿呢,给大家推荐的是这个,来这个库的名字呢,来换个颜色啊,这个库的名字诶,再调一下颜色走,叫做pop萨GS,分析一下它这名儿啊,这个pub啥意思呀?其实呢,是这个单词publish有发布的意思,那这个sub是什么意思呢?其实啊是这个单词subscript什么意思呢?订阅同学,这单词不就发布的意思吗?这单词呢,不就订阅的意思吗?OK,你只要把这个库给他请过来,Pop sub-GS,你就可以轻松的实现在任何一个框架里面进行消息的订阅与发布,注意,我说的是任何一个框架,就包括。
05:51
你在angle里边,你再react里边都可以用这个库,OK,那来咱们就写一写啊来回来各位,那这里边的东西啊,我就再一次的得把它删掉了,然后把什么拿过来呢?咱们讲那个全局事件总线的时候,那个school和student拿过来,我就不一点点写了啊,复制,然后呢,把它粘过来,咱们先别急着运行啊同学,咱调整一下,首先mean.js里面我不想用全局时间总线了,那咋的这三行删掉呗啊然后再打开APP,各位啊,确实展示了这个messages school student对不对,这两个放在这儿了,OK,这有数据行,这些呢,没啥调的,再找到student啊同学,你记不记得当时啊,咱们实现这么一个功能,就是学生这个student组件,要把自己的学生名给固。
06:36
咱们可是实现这个功能的同学,咱们不就拿着这个功能来,不就是拿着这条线咱们练的那个全局事件总线吗?那么接下来我们用同样的这条线,咱们去练习消息订阅与发布啊,同学还是要把学生名给词故啊,还是send student内,但是里边这块各位你上哪找这Dollar for去没了对不?各位哎,删掉怎么写,一会儿再说,在找到school组件各位mount的时候,你也别跟我在这什么Dollar for bus这些东西了,对不对啊,给它删掉,那这样各位我给你留下痕迹来,这块呢,我给它注掉对吧,我不删注掉回到这儿撤回来这儿我也不删啊,给它注掉行吧?各位好,那现在呢,我们看一下效果,我再看一下school组件啊,有没有什么问题,Mount在这儿,哎,正确这会儿也不行,对不啊,没有那个事件了吗?那还off什么呢?好,样式不再看了,来打开看一下效果啊走,目前反正就是这么一个状况,对不啊,点按钮也没什么作用,因为按钮的回调里面什么也没写,对不?各位好了,慢慢来吧,各位分析。
07:36
功能我问你谁需要数据school组件,谁提供数据student组件,对不对啊好嘞,各位那么需要数据的人,就这家伙要怎么着,要订阅消息啊,那怎么写呢?具体的代码怎么写呢?哎,各位你得先把那个库啊给他请过来,来开始安装吧,点一下加号,我这个Vs code的呀,各位这两天更新了,哎,不像咱之前说在这儿有那个选择框了,就是你开了好几个终端,这回是在这儿侧面的这个是吧?OK,来写一下NP mi叫什么名?啪吧萨吧杠GS同学,我声明啊,不是说你用那个消息订阅与发布这个技术就必须得用这个库,你用别的库也可以,对不就是语法不一样,消息订阅与发布只是一种理念,想把理念落到实处,各位那怎么办?你得用一个具体的库啊,你就比如说啊,我想买台车,那你具体得是哪个品牌哪个型号对不对,各位OK,给它安装上这个库特别的小啊,千万别忘了后边那个杠GS啊,你别直接这么。
08:36
姐,你写一个NP mi pop萨,那是另外一个库,OK,好了,回到这个里边,嗯,那同学接下来怎么办呀,引入呗,安装完了肯定得引入啊,所以说同学慢慢来啊,咱们先从哪着手呢?就是收数据的人,谁收数据谁school OK,那就写来开始引入,你安装谁了,你就引入谁安装的谁。啪,Sub说老师再来个杠GS,你这没必要了,就是pop subb就可以from哪呢?Pop sub-GS说老师那你这么引入它是个什么东西啊?我告诉你啊,它呀是一个对象啊,这个对象身上有很多有用的方法,你比如说第一个方法我们就得用了,各位,你之前呢,是在school组件只要挂载完毕了,你就给那个Dollar bus是不是绑定了一个hello,这个时间,那这回就是属于同学,故组件只要挂载完毕,立刻马上我就去订阅一个消息,OK,写上top萨,然后这里边啊有一个API,各位叫做点sub script,哎,就叫做。
09:36
订阅好了,你订阅一个消息吧,说老师那消息的名对你得起个名啊,嗯,随便写,比如说还叫hello,那第二个参数同学你也得写好,就是如果以后有人真的发布了hello这个消息,那得有一个执行的回调吧,哎,所以说在这同学写一个回调函数走,然后在这里边呢,我做一个输出,首先我说叫做有人发布了hello消息啊,然后hello消息的回调执行了,对不?各位哎,恭喜你订阅消息成功,那接下来呢,就等着别人去发布消息了,同样的这段代码复制交给谁student在这儿引入啊,那之后呢,各位我点这按钮的时候干嘛呀,不去订阅了,你得发布了,你当年是触发那个Dollar bus的一个哈事件,但是这回不是了,各位来PA萨拿过来对象吗?他身上啊,有这么一个API,叫做publish,嗯,PU。
10:36
Publish publish不有发布的意思吗?OK,发布什么消息啊,哈喽,带不带着数据带着比如说666 OK,这不就得了吗?啊来瞧瞧效果啊,各位刷新一波啊,我点这按钮放大一点,点这按钮走你各位你看你看有人发布了hello消息啊,Hello消息的回调执行了是不?各位你看你只要一点这个消息就发布,你只要一发布,人家当年在这儿订阅过同学,有没有一种隔空喊话的感觉,有没有一种对讲机的感觉,咱俩调到一个频段,那频段是谁呀?就是消息名呗,然后我这边只要大喊一声,诶,你这边的回调是不是就执行啊?那有些同学可能说,诶老师数据没带过来啊,那的确是,那同学咱之前说了,数据是不是以行参的形式在这过来啊?啊说老师,那我知道了,我就用A1接收,这不就得了,这数据不就来了吗?那你瞧瞧那数据它是什么啊,各位刷新一波来点走你。
11:29
同学看这儿啊,整个这些东西是我刚才亲手写的,这个是那A说老师A是什么,是hello,那数据没过来呀,各位听我说这儿能收到两个参数,一个是你的消息名,一个才是真正的数据,也就是说后边那B呀,它才是真正的数据,好了保存刷新一波,来看着各位走,你666来了没来了,所以说吧,网上也有一些人呢在吐槽说没有必要啊,在这儿设计两个对不?那人家说你看我订阅的什么名我知道,那你这发布的什么名啊,我也知道,那你就没有必要在这再告诉我这个消息叫什么名了,但是人家就告诉了是不,各位哎,所以说在这行参别用A叫msg name消息的名字,对吧?当然你可以写那个完整的单词message,这别写B,写谁呀,写data,那你这呢,把这两个给它复制一下,往这一放不就可以了吗?来回头看一下效果刷新来走你嗯,过来了吧,哎非常简单,各位啊好啊说老师那这就写完了呗,诶不是你想做的更完。
12:29
美一点啊,同学,你得做一个收尾的事儿,你看看啊,这个Dollar bus mounted的时候,我们给它绑上哈事件,那么当这个school组件呢,即将要被销毁的时候啊,那我们是不是得把那个Dollar bus身上的那个事件给它解绑啊,那这个发布消息和订阅消息也是同样的,各位你说你在这儿订阅了一个消息,那如果说有一天这个死故组件呀,不用了,要给他销毁了,那你觉不觉得这个消息就不要再订阅了呀?哎,所以说在这儿我们要做的更好,应该做这么一件事,各位就是如果这个组件呢,要被干掉了啊,在这个before this try里面,你可以这么写,走pop sub同学,订阅是不是叫做sub script,那么如果取消订阅呢?哎,前边加个UN代表否定啊,Onscript什么意思,取消订阅,可能各位是这么想的,老师我明白啊,就跟那个事件一样呗,我当年订阅的这个消息,Hello喽,那我在这就,哎,取消订阅,哈喽同学这么写啊就不对了,因为什么呢?他这个库的设计啊,有点像定时器。
13:29
就是你每一次订阅的一个消息,都会有一个订阅的ID,也就是在这儿你能收到一个ID啊,但咱说了最好别直接写ID,哪怕你写一个pab ID,它也是那么回事啊。pab ID啥意思呢?就是订阅消息的这么一个ID,你每一次订阅这个ID都是不同的值,当你想取消的时候,各位得通过ID去取消订阅,就有点像定时器,通过ID去取消这个定时器,但我这么写肯定是有语法上的错误,这个PAID在这读不到,那怎么办呀?很简单,各位是不是咱说可以放到this身上,那在这呢,This点一写这不就得了吗?是不?各位,哎,你一挂载我就去订阅消息,同学你就把这订阅消息给它理解成这组件,只要一挂载,诶,他就诶提起耳朵一直在这听,听谁呢?就听hello,只要有人诶怎么办去触发这个哈,这个消息了,发布这个消息了,那这个肯定就执行对不?那这是什么意思呢?如果你不用了,那我就取消呗,是吧,各位啊,然后值得你注意的是一个什么事呢?各位,就是这个里边的this。
14:29
词值得我们聊一聊,来,我把这行呢给你注掉,在这呢,我写一个consolo,你注意一下这个this啊,就是这个pop sub这个库,如果配合view去使用的话,你注意一下就是你这边虽然是发布消息了,你写了个hello,六六这边呢也确实被执行,主要是这个this,我们一起来看一下各位刷新一波,嗯,走你你看你看看各位啊,是不是安find啊,朱老师,那这为什么是and find呢?同学你听我说,如果你是在V里面用的都是view的技术,那人家敢宝这个this是组建的实力对象,但是同学啊,你用的是不是人家这个库啊,你是不是安装了一个第三方的东西啊,那vu可就不给你这承诺了啊,更多的时候同学我问大家,我们收到数据之后,更多的时候是不是往这里边塞进去,哎,所以说同学别直接这么写,说老师那这怎么办?老套路,别写正常函数,写一箭头函数,我问你各位这意思刷新一波走,你是不是就正常了啊,是不是VC啊,哪个组件,那同学你看它都有地址和上规谷,那你说。
15:29
肯定是乎组件呗,哎,所以说在这儿呢,你得这么写,或者是同学还是之前那种方式,就是这里边的东西咋的你都别写在这来个this.demo然后需要你做的是在上边配置一个什么呢?Methods,在methods里边你写上这个DEMO对不对?诶在这呢,你就能收到这个数据了,当然你别忘了前边还是那个message name,随后才是data,那你把这句话啊,刚才我还删掉了是吧,那你把这句话直接我写一下吧,Consolo走叫做这个hello是吧?嗯,写上复制hello消息啊收到了,然后呢,再写一个这个data,那这回你看一下啊,来刷新一波,来走你是不是也收到了,最主要的是你这么写吧,它里边的this啊,它不出现问题对不对,在这儿演示一下走刷新一波啊,诶,哪块写错了呢?是在这儿多了一个保存刷新一波走你this是不是没问题?哎,反正就两种方式,各位要么你给他规规矩矩的写在mass里面,靠view去帮你调整这个this,要么就是来全都撤回来,你亲自直接把回调写在刚才的位置,但是有要求必须写成。
16:29
人头函数,对不?各位,这就是消息订阅与发布技术,来吧各位,我们总结一波啊,打开这个read me文档。滑到最后,消息订阅与发布,一种组件间通信的方式,适用于任意组件兼通信。使用步骤,首先安装,随后引入,那么接收数据的组件里面要订阅消息,叫做subscript订阅,订阅的时候会有一个PID或者叫做pub ID啊提供数据的人呢,Publish发布带着数据就可以了,然后最好在这个即将要被销毁的这个钩子当中呢,去取消订阅。OK,各位好,那同学你看看啊,在view里面,全局事件总线可以实现任意组件间通信,那么消息订阅与发布呢,也可以实现任意组件间通信,那我想问各位的是,你觉得用谁好呢?当然是用这个好,对不?因为一切都是V里边所带着的,完全利用了V的这个自定义事件,你说对吧?各位用全局事件总线的本质不也是自定义事件吗?所以说同学消息订阅与发布这个技术呢,挺好的,但是在view里面用的并不多,因为view里面有一个跟他模型完全一致的人,就是事件总线,我们对比一下各位你看看啊,当年啊。
17:38
在这个school组件一挂载的时候,你怎么办?去给那个Dollar for bus绑定一个hello,那这回只不过就换成了你去订阅一个hello消息,对不对啊,那当年你想给人家传东西的时候呢,你去触发hello这个事件,现在只不过就是你发布hello这个消息对不?各位,所以说大家觉不觉得从某种程度上来说呀,就是我之前这图哪个图呢,看一下就这X,我们之前说这X呀是那Dollar bus,那你觉不觉得此时此刻,其实这X呀就被换了一个人,谁呢?就是pop萨,但是人家可不叫自定义事件啊,人家叫做消息订阅与发布好了,那这一小节呢,我们停。
我来说两句