发布订阅模式

2021-08-23 13:00:43 阅读：150 来源： 互联网

标签：subscriptionStack 订阅 value eventName callBack 发布模式 emit origin

本文的创作启发来自于Vue中的EventBus(也有人叫中央事件总线)，全文系博主原创，转载请标明出处，如有理解不当之处欢迎各位大佬赐教，谢谢！

本文代码秉承发布订阅模式的思想模拟实现了 Vue中的EvnetBus

那么，上代码！

JS版

class Subscription {
    subscriptionStack = {};
    on(eventName, callBack) {
        if (this.subscriptionStack[eventName]) {
            this.subscriptionStack[eventName].callBacks.push(callBack);
            callBack(this.subscriptionStack[eventName].value);
        } else {
            console.error("该接口未注册,请先通过emit方法注册接口,再来监听")
            return;
        }
    }
    emit(eventName, value) {
        if (this.subscriptionStack[eventName]) {
            Reflect.set(this.subscriptionStack[eventName], 'value', value);
        } else {
            const origin = {
                value,
                callBacks: []
            }
            const proxyHandle = {
                get(origin, key) {
                    return origin[key];
                },
                set(origin, key, value) {
                    if (key == 'value' && origin.callBacks.length) {
                        origin.callBacks.forEach(callBack => {
                            callBack(value);
                        })
                    }
                }
            }
            this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
        }
    }
}

Ts版

interface SubscriptionClassInterface {
  subscriptionStack: object;
  on(eventName: string, callBack: (val: any) => void): void;
  emit(eventName: string, value: any): void;
}

class Subscription implements SubscriptionClassInterface {
  subscriptionStack: object;
  on: (eventName: string, callBack: (val: any) => void) => void;
  emit: (eventName: string, value: any) => void;

  constructor() {
    this.subscriptionStack = {};

    this.on = (eventName: string, callBack: (val: any) => void) => {
      if (this.subscriptionStack[eventName]) {
        this.subscriptionStack[eventName].callBacks.push(callBack);
        callBack(this.subscriptionStack[eventName].value);
      } else {
        console.error("该接口未注册,请先通过emit方法注册接口,再来监听");
        return;
      }
    };

    this.emit = (eventName: string, value: any) => {
      if (this.subscriptionStack[eventName]) {
        Reflect.set(this.subscriptionStack[eventName], "value", value);
      } else {
        const origin = {
          value,
          callBacks: [],
        };
        const proxyHandle = {
          get(origin, key): any {
            return origin[key];
          },
          set(origin, key, value): any {
            if (key == "value" && origin.callBacks.length) {
              origin.callBacks.forEach((callBack) => {
                callBack(value);
              });
            }
          },
        };
        this.subscriptionStack[eventName] = new Proxy(origin, proxyHandle);
      }
    };
  }
}

使用方法：

第一步、

# 创建实例
let s = new Subscription();

第二步、

# 发布事件
s.emit(事件名,值)
# 举个栗子：
s.emit('change',20);

第三步、

# 订阅事件
s.on(事件名,回调函数)
> 此处的事件名一定要和emit中的对应上
# 举个栗子：
s.on('change',function(val){
//emit中传入的值在Val中接收到
//这里可以写入相应的逻辑代码
//每当再次调用emit这个回调函数会被自动调用，完成响应式
})

------------------------- End -------------------------

标签：subscriptionStack,订阅,value,eventName,callBack,发布,模式,emit,origin
来源： https://www.cnblogs.com/fuyouplus/p/15175412.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9