手写一个发布-订阅模式

[sisterAn]

class EventEmitter {
  constructor() {
    // 初始值为空对象
    this.listeners = Object.create(null)
  }
  
  // 注册事件
  on = (event, listener) => {
    // this.bindEvent(event, listener, false)
    if (!event || !listener) {
      return
    }
    if (this.listeners[event]) {
        //如果有就放一个新的
        this.listeners[event].push(listener)
    } else {
        //如果没有就创建一个数组
        this.listeners[event] = [listener]
    }
  }
  
  // 只订阅一次
  once = (event, listener) => {
    // this.bindEvent(event, listener, true)
    function one() {
        // 在one函数运行原来的函数，只有将one清空
        listener.apply(this, arguments)
        // 先绑定 执行后再删除
        this.off(event)
    }
      this.on(event, one)
      //此时emit触发会执行此函数，会给这个函数传递rest参数
  }
  
  // 发布事件
  emit = (event, ...args) => {
    if (!this.hasBind(event)) {
      console.warn(`this event: ${event} don't has bind listener.`)
      return
    }

    this.listeners[event].forEach(listener => listener.call(this, ...args))
  }
  
  // 取消订阅
  off = (event, listener) => {
    if (!this.hasBind(event)) {
      console.warn(`this event: ${event} don't exist.`)
      return
    }

    // remove all listener
    if (!listener) {
      delete this.listeners[event]
      return
    }

    // remove specific listener
    this.listeners[event] = this.listeners[event].filter(item => item !== listener)
  }

  hasBind = event => {
    return this.listeners[event]
      && this.listeners[event].length
  }
}

// 测试
const baseEvent = new EventEmitter()
function cb(value){
    console.log("hello "+value)
}
baseEvent.once("click",cb)
// baseEvent.off("click")
baseEvent.emit("click",'2020')
// hello 2020
console.log(baseEvent.listeners)

[chenguzhen87]

因该要加一个逻辑，不然该事件清除了，又调用解绑事件
if (this.listeners[event]) {
this.off(event)
}

[omitchen]

this.off(event)

执行一次把前面所有订阅的事件都卸载了，不太合适吧

[xllpiupiu]

/**
 * https://blog.csdn.net/weixin_43792004/article/details/113442506
 */
//中间人 主题
class Dep {
    constructor(callback) {
        this.subs = []
        this.callback = callback
    }
    addSub(sub) {
        this.subs.push(sub)
        return this
    }
    notify() {
        this.subs.forEach(item=>item.update(this.callback))
    }
}
//订阅者
class Sub {
    constructor(val) {
        this.val = val
    }
    update(callback) {
        this.val = callback(this.val);
        console.log('this.val: ', this.val);
    }
}
//发布者
class Pub {
    constructor() {
        this.deps = []
    }
    addDep(dep) {
        this.deps.push(dep)
    }
    removeDep(dep) {
        let index = this.deps.indexOf(dep)
        if(index!==-1) {
            this.deps.splice(index,1)
            return true
        }
        return false
    }
    publish(dep) {
        this.deps.forEach(item=>item===dep&&item.notify())
    }
}
let dep1 = new Dep(item=>item*item)
let sub1 = new Sub(3)
dep1.addSub(sub1)
let pub1 = new Pub()
pub1.addDep(dep1)
pub1.publish(dep1)