plh97 / blog

✏️blog. writing in issues.
https://plhh.xyz/
82 stars 8 forks source link

javascript - 发布订阅模式 #113

Open plh97 opened 6 years ago

plh97 commented 6 years ago

狗一样的设计模式

总是被发布订阅模式这么高大上的名字吓唬,,才发现,很简单的就实现了。其实浏览器的点击事件绑定同样是发布订阅模式。

on - 就是订阅的意思

将新的代码推入队列,依次进行订阅。

emit - 就是发布的意思

将订阅的代码队列先入后出顺序执行。

代码如下:

// 一个简单的事件订阅发布的实现,取代原始Event对象,提升IE下的兼容性
class LoadEvent {
  constructor () {
    this.listeners = {}
  }
  on (eventName, callback) {
    this.listeners[eventName] === undefined ? this.listeners[eventName] = [] : ''
    this.listeners[eventName].push(callback)
  }
  emit (eventName) {
    this.listeners[eventName] && this.listeners[eventName].forEach(callback => callback())
  }
}

有了这个,某种程度上来说,就是自定义事件了。只是无法监听鼠标点击事件而已。但是可以依靠代码来触发。