EventBus概要

EventBus是消息傳遞的一種方式，基于一個(gè)消息中心，訂閱和發(fā)布消息的模式。這種方式的實(shí)現(xiàn)不僅僅局限于前端，在iOS中的消息消息中心也是如此實(shí)現(xiàn)。

設(shè)計(jì)模式：訂閱者發(fā)布者模式，這種設(shè)計(jì)模式在前端很常見。

API的設(shè)計(jì)：

2.1 只能構(gòu)造一個(gè)消息對(duì)象

2.2 on('msgName', func)訂閱消息，msgName:訂閱的消息名稱 func: 訂閱的消息

2.3 one('msgName', func)僅訂閱一次消息，后訂閱的會(huì)替換前面訂閱的消息

2.4 emit('msgName', msg)發(fā)布消息 msgName:消息名稱 msg：發(fā)布的消息

2.5 off('msgName')移除消息

實(shí)現(xiàn)EventBus

// 構(gòu)造EventBus function EventBusClass() {this.msgQueues = {} }EventBusClass.prototype = {// 將消息保存到當(dāng)前的消息隊(duì)列中on: function(msgName, func) {if (this.msgQueues.hasOwnProperty(msgName)) {if (typeof this.msgQueues[msgName] === 'function') {this.msgQueues[msgName] = [this.msgQueues[msgName], func] } else {this.msgQueues[msgName] = [...this.msgQueues[msgName], func] }} else {this.msgQueues[msgName] = func;}},// 消息隊(duì)列中僅保存一個(gè)消息one: function(msgName, func) {// 無需檢查msgName是否存在this.msgQueues[msgName] = func;},// 發(fā)送消息emit: function(msgName, msg) {if (!this.msgQueues.hasOwnProperty(msgName)) {return}if (typeof this.msgQueues[msgName] === 'function') {this.msgQueues[msgName](msg)} else {this.msgQueues[msgName].map((fn) => {fn(msg)})}},// 移除消息off: function(msgName) {if (!this.msgQueues.hasOwnProperty(msgName)) {return}delete this.msgQueues[msgName]} }// 將EventBus放到window對(duì)象中 const EventBus = new EventBusClass() window.EventBus = EventBus

使用EventBus

// 訂閱消息 function subscribe() {EventBus.on('first-event', function(msg) {alert(`訂閱的消息是：${msg}`);}); }// 發(fā)送消息 function emit() {const msgInput = document.getElementById("msgInputId")EventBus.emit('first-event', msgInput.value) }// 移除消息 function off(msgName) {EventBus.off(msgName) }

CodePen預(yù)覽

CodePen預(yù)覽

-----可能需要翻墻-----

<p data-height="265" data-theme-id="0" data-slug-hash="maQpgR" data-default-tab="js,result" data-user="beyondverage0908" data-pen-title="EventBus的實(shí)現(xiàn)" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" class="codepen"><span>See the Pen EventBus的實(shí)現(xiàn) by avg (@beyondverage0908) on CodePen.</span></p>
<script async src="https://static.codepen.io/ass...;></script>

總結(jié)

整個(gè)EventBus主要部分是分為三個(gè)部分。消息中心，訂閱事件方法，發(fā)布消息方法。雖然不能和Vue中實(shí)現(xiàn)的那么全面，但麻雀雖小，五臟俱全。缺少的部分在于對(duì)數(shù)據(jù)安全性的校驗(yàn)。希望給你一個(gè)實(shí)現(xiàn)的思路

總結(jié)

以上是生活随笔為你收集整理的EventBus的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。