写一个eventEmitter类(发布/订阅模式),包括on()、off()、once()、emit()方法

1、on(event,fn):监听event事件,事件触发时调用fn函数;

2、once(event,fn):为指定事件注册一个单次监听器,单次监听器最多只触发一次,触发后立即解除监听器;

3、emit(event,arg1,arg2,arg3…):触发event事件,并把参数arg1,arg2,arg3…传给事件处理函数;

4、off(event,fn):停止监听某个事件。

class EventEmitter{
      	constructor(){
            this._events = Object.create(null)//创建一个新对象来存放所有被监听的事件和处理函数
        }

        on(event,callback){  //监听event事件,触发时调用callback函数
            let callbacks = this._events[event] || [] //判断event事件是否已有其他事件处理函数,没有则为空数组
            callbacks.push(callback)
            this._events[event] = callbacks
            return this
        }
        off(event,callback){  //停止监听event事件
            let callbacks = this._events[event]
            this._events[event] = callbacks && callbacks.filter(fn => fn !== callback) //如果event事件内存在事件处理函数,就查找其中是否有callback函数并把它过滤掉。
            return this
        }
        emit(...args){ //触发事件,并把参数传给事件的处理函数
            const event = args[0]
            const params = [].slice.call(args,1) //!!!因为args非数组,所以需要通过空数组来调用数组的slice方法并把this指向args
            const callbacks = this._events[event]//获取event事件的全部事件处理函数
            callbacks.forEach(fn => fn.apply(this.params))//遍历执行全部事件处理函数
            return this
        }
        once(event,callback){ //为事件注册单次监听器
            let wrapFanc = (...args) => {//创建一个wrapFanc函数实现单次调用后停止监听
                callback.apply(this.args)//执行wrapFanc
                this.off(event,wrapFanc)//后停止监听事件
            }
            this.on(event,wrapFanc)//注册监听wrapFanc事件
            return this
        }
    }
export default EventEmitter //将这个类暴露出去
const emitter = new EventEmitter();
emitter.on('drink', (person) => {
	console.log(person + '喝水')
})
emitter.on('eat', (person) => {
	console.log(person + '吃东西')
})
emitter.once('buy', (person) => {
	console.log(person + '买东西')
})
emitter.emit('drink', '我') // 我喝水
emitter.emit('drink', '我') // 我喝水
emitter.emit('eat', '其它人') // 其它人吃东西
emitter.emit('eat', '其它人') // 其它人吃东西
emitter.emit('buy', '其它人') //其它人买东西
emitter.emit('buy', '其它人') //这里不会再次触发buy事件,因为once只能触发一次
emitter.off('eat') //移除eat事件
emitter.emit('eat', '其它人') //这里不会触发eat事件,因为已经移除了
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: React 组件之间的通信可以使用发布-订阅模式。这种模式提供了一种不直接对组件进行交互的方法。 在发布-订阅模式中,组件之间不直接交互,而是通过一个中间的订阅者(也称为事件总线)进行通信。 以下是一个简单的例子: ``` // 创建一个事件总线 const EventBus = new EventEmitter(); // 组件 A 发布消息 function handleClick() { EventBus.emit("message", "Hello from A"); } function ComponentA() { return ( <button onClick={handleClick}> 发布消息 </button> ); } // 组件 B 订阅消息 function ComponentB() { const [message, setMessage] = useState(""); useEffect(() => { EventBus.on("message", setMessage); return () => { EventBus.off("message", setMessage); }; }, []); return <div>收到消息:{message}</div>; } function App() { return ( <div> <ComponentA /> <ComponentB /> </div> ); } ``` 在这个例子中,组件 A 发布一条消息,组件 B 订阅并显示消息。 ### 回答2: 一个例子可以是一个购物车的应用程序。在该应用程序中,有一个商品列表组件和一个购物车组件。 当用户点击商品列表中的某个商品时,商品列表组件会触发一个事件,通知其他组件某个商品被选中了。购物车组件订阅了这个事件,并根据收到的消息更新购物车的显示。 具体来说,商品列表组件内部可以定义一个事件发布者,当用户点击某个商品时,发布者会把该商品的信息发送给所有订阅者。购物车组件可以实现一个订阅者,它会监听商品列表组件的事件,并根据事件中的商品信息更新购物车的显示。 例如,当用户点击商品列表中的商品「苹果」时,商品列表组件就会触发一个事件,事件中包含了商品的信息。购物车组件订阅了这个事件,一旦收到事件,它会更新购物车中的内容,把「苹果」加入购物车。 这种发布订阅模式的组件通信方式使得两个组件之间解耦,并且可以方便地添加更多的订阅者。例如,可以添加一个支付模块作为另一个订阅者,当购物车更新时,支付模块可以自动计算总金额并展示给用户。 这个例子展示了React组件之间通过发布订阅模式进行通信的思路,提高了组件的复用性和可扩展性。 ### 回答3: React 组件之间的通信可以通过发布订阅模式来实现。发布订阅模式(PubSub)是一种广泛应用于软件设计的模式,它允许组件之间松耦合地进行通信,并且可以在需要的时候订阅和取消订阅消息。 举个例子来说明,假设我们有两个React组件:一个发布者组件(Publisher),另一个订阅者组件(Subscriber)。发布者组件发布一个事件,然后订阅者组件监听该事件,并在接收到事件后执行相应的操作。 在实际应用中,可以使用第三方库来实现发布订阅模式,比如 PubSub.js。首先,我们需要在发布者组件中引入 PubSub.js,并在需要发布事件的地方调用`PubSub.publish()`方法,将事件名和相关数据作为参数传入。 ```jsx import React from 'react'; import PubSub from 'pubsub-js'; class Publisher extends React.Component { handleClick = () => { const data = { message: 'Hello, subscribers!' }; PubSub.publish('event', data); }; render() { return ( <button onClick={this.handleClick}> Publish Event </button> ); } } export default Publisher; ``` 然后,在订阅者组件中也引入 PubSub.js,并在需要订阅事件的地方调用`PubSub.subscribe()`方法,将事件名和对应的回调函数作为参数传入。 ```jsx import React from 'react'; import PubSub from 'pubsub-js'; class Subscriber extends React.Component { state = { message: '', }; componentDidMount() { this.token = PubSub.subscribe('event', this.handleEvent); } componentWillUnmount() { PubSub.unsubscribe(this.token); } handleEvent = (eventName, data) => { this.setState({ message: data.message }); }; render() { return ( <div> <p>{this.state.message}</p> </div> ); } } export default Subscriber; ``` 这样,在订阅者组件中,每当发布者组件发布事件时,订阅者组件就会收到事件,并将相应的消息显示在页面中。 通过使用发布订阅模式,React 组件之间可以实现松耦合的通信,提高了组件的可复用性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值