00:00
Hello,大家好,这一个小节我们来实现一个事件总线,来完成事件相关的几个功能啊,比如说事件绑定,事件的一个触发,还有呢,事件的一个解绑。事件呢,在DOM当中我们接触过啊,可以为网页元素绑定一些特定事件,比如鼠标事件啊,还有呢,键盘事件,再比如说一些表单事件。而这一次我们要实现的事件总线呢,它呢与我们do的事件呢,略微有点不太一样,它的事件类型是可以自定义的,也就是说事件名字你可以随意去定,比方说呃,One事件,Two事件,Two事件,随事件等等等等,这些事件你都可以去设定啊,我们也去可以为它绑定事件的回调。那这样做的好处就在于呢,可以对代码呢,做一个切分啊,切割,然后呢解耦啊。提高咱们代码实现的一个这样的一个效率。和复用。那好了,那下边的话,我们首先先来演示一下我们写完之后的一个效果啊。
01:01
我们点开编辑器。首先我们会声明一个这样的全局变量,叫EVTBUS。它这上是一个对象里边有一个功,有几个功能啊。第一个就是它可以绑定事件,比如说我们可以绑定一个登录事件。哦,然后呢,在这我们可以做一些提醒啊,大家可以看一下log啊。这个用户。已经登录。当然我们可以把data放进来啊,Data就是那个数据。这是一个。然后呢,下边咱们可以再来一个。然后下面再来一个就是用户的数据,数据。登录数据。已经写入。也就是我们可以为这一个。类型的事件绑定多个回调,这其实跟DOM2当中那个A呢啊效果差不多哈,可以呢,为一个事件绑定多个回调。
02:00
好了,那这是它的一个绑定,下边的话我们还可以呢,去触发这个事件,触发事件比如说我们来一个变声器set time out。然后来个时间间隔,比如说我们定一个两秒,两秒钟之后请触发这个事件ebus。那出发这块我们用的是一个另外一个方法叫做amit,单词本身有发射的意思。然后类型是login,然后呢,数据咱们把张三传进来。哎,张三。好,所以这个一一触发的话,最终的效果应该是张三用户已经登录啊,张三登录数据已经写入。啊,是这样一个效果,但是目前的话它肯定不好使哈,不过没关系,咱们下边来实现一下。首先我们先把它声明一下。然后等于一个对象。因为这块有on啊,这是一个什么呀,这是一个方法,所以说它的这个结构应该是一个对象。然后呢,它里边有一些方法,EVENT,咱们把结构搭一下,有这个on方法。
03:05
它接收两个参数啊,第一个呢是类型,我们用一个type来表示。第二个呢,是一个回调,我们写call back。啊,有了on之外,有了on以后呢,还有一个amit。那么amit的话呢,它这块也是有两个参数,第一个参数呢是类型,第二个参数呢是数据。OK,搞定啊,想要注释这个呢,是绑定事件。下边这个呢,是触发事件。那我们应该如何去实现这个效果呢?其实也比较简单,在绑定的时候,我们只需要把实验类型。与事件回调保存起来。在触发以后。我们去看一下这个类型到底有没有与之对应的回调,如果说有就把它取出来,然后去做一个执行就可以了。
04:00
那既然是要保存,我们保存在哪呢?用一个什么样的结构来保存呢?我们来观察一下,它其实呢,也算是一种k value的一种形式,你看建名建值,建名见值。所以说这个时候我们可以使用一个对象来保存这个数据。那这个对象我们放在哪呢?哎,放在哪呢?咱们其实放到里边最合适的,我写一个这个call back。写个对象。我这儿不能写分号啊。这是保存。类型与回调的一个容器。那当on的时候呢,我们就往里边去保存,Amy的时候呢,就往里边去取好。那么on的话,我往里边存的时候要注意,如果说没有,就是里边如果说没有这个类型,比如说login啊,没有的话,我们就可以往里边直接去存,像这样子logging。然后呢,存一个毁掉,但是这样存在一个小的瑕疵,也是什么瑕疵呢?就是嗯,它可能会绑定两个毁掉,所以说直接写函数不太合适,咱们应该写一个。
05:06
这个数组。哎,然后呢,有一个我们就往里边压一个,有第二个就压第二个。啊是这样一个结构,这种结构呢,咱们后边在触发的时候,两个都可以触发,当然也不光是两个多个都可以。好,所以说我们就冲着这个目标去前进。那么加的时候咱们来判断一下,哎,判断如果说啊,这个this.call back。然后这个下标type去判断一下有没有,如果说要是有怎么办,咱们先说没有吧,好吧,先说没有。如果说没有的话,我们就可以往里边去加入了啊,来一个this。点call back,然后呢,下边来个type等于谁啊,等于call back,大家注意啊,如果说这么写的话,它就成了这样子了。不是一个数组,所以说我们需要把它变成一个数组,怎么变成数组呢?直接写一个中括号就完事。
06:01
搞定啊,这是有的,这是没有的情况就是如果。S属性中。啊,不存在该类型事件。就往里面存。啊,直接往里边存,那么如果说要是有呢。啊,存在的话,我们就应该往里边去加入,应该是this点。Call bags。然后type。点push,然后将这个call back咱们压进来。好了,我们来验证一下啊,首先我们先把它清一下。当在绑定完这两个事件之后,看一看Eve ENT它那个样子。打印一下。好,点开浏览器。刷新一面。点开大家可以看一下啊,Calls里边就有两个回调啊,一个两个没有问题。好了,这这样一来的话,绑定事件功能我们就已经写完了啊,写完之后咱们下边来实现一下这个事件的一个触发。
07:04
事件触发的时候。怎么样去触发呢?其实也比较简单,就到容器当中去找有没有这个类型的属性,如果有就把它取出来,哎,如果没有的话,咱执行不了。所以咱们应该还是要做一个判断啊,如果说。this.call bags。然后点不能用点啊,咱应该要使用中括号tap要是有,并且呢,它这个数组长度啊,还得大于零。把它复制一份拿过来,点lengths大于零,因为等于零的话就没有必要了,就没有必要再去便利,然后去执行了啊。如果你大于零,里边呢,有元素,我们开始变利。数组。怎么来变成数组呢?直接用它。你看啊,this.calls其实就是这个值。就这个数组,所以说呢,我们这个时候呢,把它拿过来直接for each。
08:04
Call back。直接去执行回调就可以了啊。来执行回调啊,Call back,并且把数据传进来。啊,因为在调的时候呢,他传了数据进来啊。出单,把data往里边一传就搞定了。好了,那下边我们来看看这个事件能不能正常去触发,点开浏览器刷新页面等两秒。大家看这张三用户已经登录,张三登录数据已经写入。好了,完成,这是关于事件的绑定与触发,那这咱们再补一个,就是事件的一个解绑。啊,ETBUS.f等于一个。这呢,是name。什么意思呢?就是你可以来解绑数据。我们可以在这呢。拿过来。把它复制一份。
09:00
解绑。数据啊,解绑事件。来个event bus。点of。啊,里边呢,你可以不用传。这个名字也可以传名字啊,如果说你要是传名字。那就是把当前这个类型的。事件回调,咱们给它清掉。那如果说要是不传名字,那就把所有的全都清掉。好了,咱们先来把这个传进来,演示一下login。然后呢,如果说传的话,那么此时此时咱们event name的值就是这个login了啊,我们需要去做一个login删除,好若。传入了。这个name也就是事件类型。好,如果说Eve。那就我们就只是。这是删除。这个name。对应的那个事件回调。
10:03
那么怎么删呢?很简单,直接来一个delete。然后this.call bags,然后下来个Eve name就可以了。Name。好了,我们来验证一下,看好使不好使啊,当在off了之后再打印一下整个的结果。好,点开浏览器刷新页面。然后点开它,大家看这啊call backs就没有了啊,Calls要是没有的话,你这个时候再去执行事件啊,触发事件的话。他就触发不了了,看这。等两秒,这块出不来结果。好,这是这个情况,那如果说是没有船呢。啊,没有传的话就全部都移除。我们就直接来一个啊,this.call backs,直接等于一个空对象完事。啊,这个怎么来验证呢?这个也比较简单啊,我们可以这样来做啊,再绑定一个其他事件,比方说我这写一个logout事件。
11:02
Out。是退出登录。Dogout。啊,大家可以看一下啊,那此时如果说我们光栅光栅logging的话,它的一个样子。右键刷新页面,然后点开,你看到里边还有一个logout。那如果说我这儿要不传呢。不传login的。整个就全都清空了,哎。哟,等一下。等一下,别急。我们这一块的话啊,没有把这个名字删掉啊,我们需要把名字删掉。刷新页面,然后再点开,你看这calls就成功了啊,一个事件就都没有了。好了,那到这儿的话,关于事件总线的一个实现就已经完成了啊,其原理呢,也比较简单,就是造一个容器。啊,把事件类型和回调保存起来。然后呢,出发的时候再把这个再把它呢,取出来去执行回调就可以了。
我来说两句